AndrewStaroscik/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A visualization created to help me understand transitions within 'g' elements in d3.
I want to understand how to transition paths and labels linked to the same data.  This visualization deals with  the path and the label separately by linking the path and text variables to the same data.
While this works, it violates the principle of maintaining one to one joins between data and elements (see mbostocks answer here).
I have tried similar enter and transition structure within g elements with no success.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}


</style>
<input type="button" name="change" id="change" value="Change" />
<div id="vis"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var dataset = [
{name: "Path 1", centerX: 0, values: []},
{name: "Path 2", centerX: 0, values: []}
];

var width = 500,
    height = 200;

var color = d3.scale.category20();

var line = d3.svg.line()
    .x(function(d) {return d.x })
    .y(function(d) {return d.y });

var svg = d3.select("#vis").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.select("#change").on("click", change);
updatePaths(); // run for the first time
updateView(); // run for the first time

function updateView() {
    var path = svg.selectAll("path")
	.data(dataset);
    path
        .enter().append("path")
        .attr("d", function(d) { return line(d.values) + "Z"; })
	.style("fill", function(d, i) { return color(i); });
    path
	.transition().duration(500)
	.attr("d", function(d) { return line(d.values) + "Z"; });

    var text = svg.selectAll("text")
	.data(dataset);
    text
        .enter().append("text")
	.attr("x", function(d) { return d.centerX; })
	.attr("y", 100)
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function(d) { return d.name; });text
	.transition().duration(500)
	.attr("x", function(d) { return d.centerX; });
}


function change() {
    updatePaths();
    updateView();
}

// data updating function to draw custom paths each time the change button is pushed
function updatePaths() {
    var i,
    firstX = Math.random() * 50 + 100,
    secondX = Math.random() * 100 + 300;
    dataset[0].values = [];
    dataset[1].values = [];

    dataset[0].centerX = firstX;
    dataset[1].centerX = secondX;

    for(i = 0; i < 10; i += 1) {
        dataset[0].values.push({x: firstX + (Math.random() * 40 + 20) * Math.sin((Math.PI / 180) * i * 360 / 9), y: 100 + (Math.random() * 60 + 20) * Math.cos((Math.PI / 180) * i * 360 / 9)})
    }

    for(i = 0; i < 6; i += 1) {
	dataset[1].values.push({x: secondX + (Math.random() * 80 + 30) * Math.sin((Math.PI /180) * i * 360 / 5), y: 100 + (Math.random() * 60 + 30) * Math.cos((Math.PI / 180) * i * 360 / 5)})
    }
}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	text {
	font: 10px sans-serif;
	}


	</style>
	<input type="button" name="change" id="change" value="Change" />
	<div id="vis"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var dataset = [
	{name: "Path 1", centerX: 0, values: []},
	{name: "Path 2", centerX: 0, values: []}
	];

	var width = 500,
	height = 200;

	var color = d3.scale.category20();

	var line = d3.svg.line()
	.x(function(d) {return d.x })
	.y(function(d) {return d.y });

	var svg = d3.select("#vis").append("svg")
	.attr("width", width)
	.attr("height", height);

	d3.select("#change").on("click", change);
	updatePaths(); // run for the first time
	updateView(); // run for the first time

	function updateView() {
	var path = svg.selectAll("path")
	.data(dataset);
	path
	.enter().append("path")
	.attr("d", function(d) { return line(d.values) + "Z"; })
	.style("fill", function(d, i) { return color(i); });
	path
	.transition().duration(500)
	.attr("d", function(d) { return line(d.values) + "Z"; });

	var text = svg.selectAll("text")
	.data(dataset);
	text
	.enter().append("text")
	.attr("x", function(d) { return d.centerX; })
	.attr("y", 100)
	.attr("dy", ".35em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.name; });text
	.transition().duration(500)
	.attr("x", function(d) { return d.centerX; });
	}



	function change() {
	updatePaths();
	updateView();
	}

	// data updating function to draw custom paths each time the change button is pushed
	function updatePaths() {
	var i,
	firstX = Math.random() * 50 + 100,
	secondX = Math.random() * 100 + 300;
	dataset[0].values = [];
	dataset[1].values = [];

	dataset[0].centerX = firstX;
	dataset[1].centerX = secondX;

	for(i = 0; i < 10; i += 1) {
	dataset[0].values.push({x: firstX + (Math.random() * 40 + 20) * Math.sin((Math.PI / 180) * i * 360 / 9), y: 100 + (Math.random() * 60 + 20) * Math.cos((Math.PI / 180) * i * 360 / 9)})
	}

	for(i = 0; i < 6; i += 1) {
	dataset[1].values.push({x: secondX + (Math.random() * 80 + 30) * Math.sin((Math.PI /180) * i * 360 / 5), y: 100 + (Math.random() * 60 + 30) * Math.cos((Math.PI / 180) * i * 360 / 5)})
	}
	}

	</script>