zawarudo · January 28, 2014 05:13
diff --git a/index.html b/index.html
 <html>
 <head>
 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 <style> 

 #otherVis {
  width: 500px;
  height: 200px;
  background: #F00;
  display: none;
 }

 body {
  background: #777;
 }


 text {
  fill: #ccc;
 }

 path {
  fill: none;
  stroke-width: 2px;
  stroke: rgb(0,0,200);
 }
 </style>
 </head>
 <body>
  <div id="otherVis"></div>
  <div id="chart">

  </div>
  <script type="text/javascript">
 var circRadius, hoverRadius, data, h, h2, w, w2, max, margin, vis, x, y, inDuration, outDuration;

    circRadius = 5;
    hoverRadius = circRadius * 1.5;
    
    data = [1,1.5,1,1,1.5,1.5,2];
    
    margin = {top: 10, bottom: 10, left: 10, right: 10};

    w = 800;
    h = 300;

    w2 = w - margin.left - margin.right;
    h2 = h - margin.top - margin.bottom;

    inDuration = 800;
    outDuration = 800;

    max = d3.max(data);

    x = d3.scale.linear().domain([0, data.length - 1]).range([0, w2]);
    y = d3.scale.linear().domain([0, max]).range([h2, 0]);

    vis = d3.select('#chart')
            .attr('width', w)
            .attr('height', h)
          .append('svg:svg')
            .attr('width', w)
            .attr('height', h)
            .attr('class', 'viz')
            .append('svg:g')
            .attr('width',w2)
            .attr('height', h2)
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    vis.selectAll('path.line')
          .data([data])
          .enter()
          .append("svg:path")
          .attr("d", d3.svg.line()
          .x(function(d, i) { return x(i); })
          .y(y));

    var pointHolders = vis.selectAll('.point').data(data).enter().append("svg:g").attr("class", "pointHolder")

        pointHolders.append("svg:circle")
            .attr("class", "point")
            .attr("r", circRadius)
            .attr("cx", function(d, i) {
              return x(i);
            }).attr("cy", function(d) {
              return y(d);
            })
            .on('click', function(d, i) {
              var clicked = d3.select(this);
              clicked.attr("id", "selected");//Existance of selected node ID handles our zoomed in state.
              toggleVis();
            });



 // Ping stuff
  var influence = 50;//ping ring radius
  var pingInterval = 5000;//timer for pings

        pointHolders.append("svg:circle")//Pings are just circles with no filling
            .attr("class", "pings")
            .attr("r", circRadius)
            .attr("cx", function(d, i) {
              return x(i);
            }).attr("cy", function(d) {
              return y(d);
            })
            .style("fill", "none")
            .each(function() { 
                var d = this;
                setInterval(function() {
                  var thisNode = d3.select(d);
                  thisNode.style("stroke", "#F00")//Red
                    .style("stroke-width", "2px")
                    .attr("r", 0)
                    .transition() //Trigger Animation
                    .style("stroke-width", "1px")
                    .attr("r", influence)
                    .style("stroke", "#777")//Use the background color to make it disappear
                    .duration(pingInterval - 200);
                }, pingInterval);
            });
 // End ping stuff

 function toggleVis() {
  var otherVisualization = d3.select("#otherVis"); //Our thing we will show on "zoomed in" 
      otherVisualization.on('click', function() { toggleVis() }); //Hook listener event for on click of our zoomed in area.

  var roadVis = d3.select("#chart");//Our initial roadmap visualization
  var selectedNode = d3.selectAll("#selected");//Circle node that was clicked on
      if ( selectedNode[0].length == 0 ) { //Exit zoom in
          otherVisualization.style("display", "none");//Hide zoomed in view
          roadVis.style("display", "block");//Show high level view
          d3.selectAll('.point').transition().attr('r', circRadius).duration(outDuration); //animate "zooming out"
      }else {//Enter zoom in
          //.each "end" handles our callback
          selectedNode.transition().attr('r', w * 1.4).duration(inDuration).each("end", function() { 
              otherVisualization.style("display", "block");//Display zoomed in view
              roadVis.style("display", "none");//Hide high level
              selectedNode.attr("id", "none");//Unmark selected node
      });
      }
 }

 </script>
 </body>
 </html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>

	#otherVis {
	width: 500px;
	height: 200px;
	background: #F00;
	display: none;
	}

	body {
	background: #777;
	}


	text {
	fill: #ccc;
	}

	path {
	fill: none;
	stroke-width: 2px;
	stroke: rgb(0,0,200);
	}
	</style>
	</head>
	<body>
	<div id="otherVis"></div>
	<div id="chart">

	</div>
	<script type="text/javascript">
	var circRadius, hoverRadius, data, h, h2, w, w2, max, margin, vis, x, y, inDuration, outDuration;

	circRadius = 5;
	hoverRadius = circRadius * 1.5;

	data = [1,1.5,1,1,1.5,1.5,2];

	margin = {top: 10, bottom: 10, left: 10, right: 10};

	w = 800;
	h = 300;

	w2 = w - margin.left - margin.right;
	h2 = h - margin.top - margin.bottom;

	inDuration = 800;
	outDuration = 800;

	max = d3.max(data);

	x = d3.scale.linear().domain([0, data.length - 1]).range([0, w2]);
	y = d3.scale.linear().domain([0, max]).range([h2, 0]);

	vis = d3.select('#chart')
	.attr('width', w)
	.attr('height', h)
	.append('svg:svg')
	.attr('width', w)
	.attr('height', h)
	.attr('class', 'viz')
	.append('svg:g')
	.attr('width',w2)
	.attr('height', h2)
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	vis.selectAll('path.line')
	.data([data])
	.enter()
	.append("svg:path")
	.attr("d", d3.svg.line()
	.x(function(d, i) { return x(i); })
	.y(y));

	var pointHolders = vis.selectAll('.point').data(data).enter().append("svg:g").attr("class", "pointHolder")

	pointHolders.append("svg:circle")
	.attr("class", "point")
	.attr("r", circRadius)
	.attr("cx", function(d, i) {
	return x(i);
	}).attr("cy", function(d) {
	return y(d);
	})
	.on('click', function(d, i) {
	var clicked = d3.select(this);
	clicked.attr("id", "selected");//Existance of selected node ID handles our zoomed in state.
	toggleVis();
	});



	// Ping stuff
	var influence = 50;//ping ring radius
	var pingInterval = 5000;//timer for pings

	pointHolders.append("svg:circle")//Pings are just circles with no filling
	.attr("class", "pings")
	.attr("r", circRadius)
	.attr("cx", function(d, i) {
	return x(i);
	}).attr("cy", function(d) {
	return y(d);
	})
	.style("fill", "none")
	.each(function() {
	var d = this;
	setInterval(function() {
	var thisNode = d3.select(d);
	thisNode.style("stroke", "#F00")//Red
	.style("stroke-width", "2px")
	.attr("r", 0)
	.transition() //Trigger Animation
	.style("stroke-width", "1px")
	.attr("r", influence)
	.style("stroke", "#777")//Use the background color to make it disappear
	.duration(pingInterval - 200);
	}, pingInterval);
	});
	// End ping stuff

	function toggleVis() {
	var otherVisualization = d3.select("#otherVis"); //Our thing we will show on "zoomed in"
	otherVisualization.on('click', function() { toggleVis() }); //Hook listener event for on click of our zoomed in area.

	var roadVis = d3.select("#chart");//Our initial roadmap visualization
	var selectedNode = d3.selectAll("#selected");//Circle node that was clicked on
	if ( selectedNode[0].length == 0 ) { //Exit zoom in
	otherVisualization.style("display", "none");//Hide zoomed in view
	roadVis.style("display", "block");//Show high level view
	d3.selectAll('.point').transition().attr('r', circRadius).duration(outDuration); //animate "zooming out"
	}else {//Enter zoom in
	//.each "end" handles our callback
	selectedNode.transition().attr('r', w * 1.4).duration(inDuration).each("end", function() {
	otherVisualization.style("display", "block");//Display zoomed in view
	roadVis.style("display", "none");//Hide high level
	selectedNode.attr("id", "none");//Unmark selected node
	});
	}
	}

	</script>
	</body>
	</html>