danharr/index.html

## index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>line growing example d3js</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

<style>


.line {
    fill: none;
    stroke-width: 4;
    stroke:#0099FF;
    opacity:0.9;
}

p {

    font-family: ChevinBold;
    font-size:20px;
}

#Decision {
    position:absolute;
    left:600px;
    top:330px;
}


#data {
    position:absolute;
    left:20px;
    top:330px;
}

</style>
</head>
<body>
<p>Don't see anything?  Make sure you're using Chrome not IE8 and below</p>
    <p id="data">Data</p>
    <p id="Decision">Decision Makers</p>
<script type="text/javascript">

var svg = d3.select("body")
            .append("svg")
            .attr("width", 1500)
            .attr("height", 1500);
var dataset = [
[50.1,50],
[48.2,49.1],
[50.9,20],
[27.8,100],
[29.3,73],
[22.3,48.9],
[55.8,34.4],
[52.1,5.3],
[64.6,23.7],
[72,12.6],
[77.8,68.1],
[66.9,53.6],
[76.7,41.1],
[78.1,48.6],
[5.6,38.5],
[29.1,35.8],
[37.1,23.7],
[34.2,49.1],
[69.9,22.9],
[56.6,42.6],
[37.7,65.7],
[41.5,57.5],
[14.3,52],
[54.1,49.7],
[54.2,50.9],
[66.1,58.6],
[62.7,16.1],
[61,34.3],
[43,32.1],
[41,70.1],
[47.8,56.1],
[8.4,87.5],
[33.6,86.7],
[39,78],
[51.5,79.9],
[54.7,76],
[32.4,76.7],
[31.6,80.4],
[26.8,100],
[27.2,62.3],
[3.5,45.6],
[45,67.3],
[55.4,56],
[42.6,63.1],
[93.3,0],
[54.2,16.7],
[54,13.8],
[79.6,19.6],
[39.2,46.3],
[58.5,67.7],
[40.3,17.9],
[71.8,24.5],
[98.6,18.7],
[59.9,38.9],
[33.3,90],
[64.2,19.6],
[56.6,34.4],
[62.4,20.7]];

var x = d3.scale.linear().domain([0,100]).range([40,400]);
var y = d3.scale.linear().domain([0,100]).range([60,600]);


 var path=
 svg.append("svg:path")
        .attr("class", "line")
        .attr("d", "m 25.253814,263.43304 c 29.889958,-2.86317 58.545065,-17.13799 78.834896,-39.27235 20.28984,-22.13436 32.02373,-51.92028 32.28188,-81.94595 0.085,-9.89205 -1.04195,-19.84619 -4.01598,-29.28097 -2.97403,-9.43478 -7.83912,-18.348108 -14.68303,-25.490996 -6.84391,-7.142888 -15.71705,-12.454265 -25.405541,-14.452525 -9.688493,-1.99826 -20.165512,-0.550977 -28.626429,4.574727 -5.188274,3.143106 -9.550697,7.596511 -12.744592,12.753675 -3.193895,5.157164 -5.228714,11.005829 -6.110217,17.007519 -1.763005,12.00338 1.113557,24.4115 6.744363,35.15781 5.630806,10.74631 13.897258,19.93557 23.086091,27.85735 9.188834,7.92178 19.326581,14.65516 29.430455,21.37088 21.31564,14.16783 42.78425,28.45003 66.41861,38.2735 23.63436,9.82347 49.86181,15.0114 75.00275,10.21383 17.38763,-3.31803 33.85857,-11.4293 46.97304,-23.31835 13.11448,-11.88905 22.81652,-27.5345 27.47032,-44.61317 4.6538,-17.07868 4.21991,-35.53447 -1.3949,-52.32175 -5.61481,-16.78728 -16.41066,-31.827843 -30.62205,-42.381294 -18.01034,-13.374571 -41.59211,-19.254917 -63.63973,-15.113177 -22.04761,4.14174 -42.12872,18.469302 -52.52782,38.346681 -9.19259,17.57119 -10.64421,38.7664 -5.20336,57.83594 5.44085,19.06954 17.4929,35.97405 32.92218,48.43147 15.42928,12.45743 34.11523,20.58238 53.50223,24.75305 19.387,4.17067 39.47759,4.47953 59.19016,2.31968 30.86169,-3.38142 61.54458,-13.07964 86.43024,-31.64255 24.88566,-18.56291 43.4776,-46.59785 46.90989,-77.45392 2.74568,-24.68352 -4.56686,-50.497752 -20.52732,-69.526121 -15.96046,-19.028369 -40.50194,-30.799045 -65.33564,-30.478985 -26.78563,0.345216 -52.70409,14.771188 -68.27353,36.569852 -15.56944,21.798663 -20.86604,50.308294 -15.56914,76.567234 3.94617,19.56282 13.48634,37.83595 26.53449,52.93635 13.04815,15.1004 29.53092,27.07709 47.5016,35.75644 35.94135,17.3587 77.02005,21.41106 116.88275,19.39353 21.23813,-1.0749 42.58462,-3.83801 62.60076,-11.01906 20.01614,-7.18105 38.73658,-19.03432 51.66543,-35.91799 12.92884,-16.88367 19.56769,-39.09119 15.37949,-59.93999 -2.09411,-10.4244 -6.84855,-20.34883 -13.92903,-28.28105 -7.08049,-7.93221 -16.50004,-13.818185 -26.82323,-16.36479 -9.17554,-2.263495 -18.9512,-1.874954 -28.00571,0.832427 -9.05451,2.70738 -17.3807,7.700663 -24.23856,14.203263 -13.71572,13.0052 -21.22519,31.76653 -22.50702,50.62423 -1.25025,18.3932 3.18639,37.13355 12.55063,53.01384 9.36425,15.8803 23.61617,28.83281 40.31669,36.64084 16.70052,7.80804 35.77842,10.4383 53.96872,7.44065 18.1903,-2.99765 35.41541,-11.61043 48.72745,-24.36435");

 var totalLength = path.node().getTotalLength();

 path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
  .ease("linear")
    .duration(4000)
    .attr("stroke-dashoffset", 0);


 var path2=
 svg.append("svg:path")
        .attr("class", "line")
        .attr("d", "m 32.324881,354.34677 c 55.444878,69.45187 131.622459,122.13543 216.172649,149.50258 54.15177,17.52781 111.89135,24.80413 168.46312,18.53733 56.57178,-6.26681 111.90201,-26.31536 157.81615,-59.95358 40.16823,-29.42858 72.79204,-69.06826 93.94419,-114.14724");

 var totalLength2 = path2.node().getTotalLength();

 path2
  .attr("stroke-dasharray", totalLength2 + " " + totalLength2)
  .attr("stroke-dashoffset", totalLength2)
  .transition()
  .ease("linear")
    .duration(2000)
    .attr("stroke-dashoffset", 0);


</script>


</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>line growing example d3js</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

	<style>


	.line {
	fill: none;
	stroke-width: 4;
	stroke:#0099FF;
	opacity:0.9;
	}

	p {

	font-family: ChevinBold;
	font-size:20px;
	}

	#Decision {
	position:absolute;
	left:600px;
	top:330px;
	}


	#data {
	position:absolute;
	left:20px;
	top:330px;
	}

	</style>
	</head>
	<body>
	<p>Don't see anything? Make sure you're using Chrome not IE8 and below</p>
	<p id="data">Data</p>
	<p id="Decision">Decision Makers</p>
	<script type="text/javascript">

	var svg = d3.select("body")
	.append("svg")
	.attr("width", 1500)
	.attr("height", 1500);
	var dataset = [
	[50.1,50],
	[48.2,49.1],
	[50.9,20],
	[27.8,100],
	[29.3,73],
	[22.3,48.9],
	[55.8,34.4],
	[52.1,5.3],
	[64.6,23.7],
	[72,12.6],
	[77.8,68.1],
	[66.9,53.6],
	[76.7,41.1],
	[78.1,48.6],
	[5.6,38.5],
	[29.1,35.8],
	[37.1,23.7],
	[34.2,49.1],
	[69.9,22.9],
	[56.6,42.6],
	[37.7,65.7],
	[41.5,57.5],
	[14.3,52],
	[54.1,49.7],
	[54.2,50.9],
	[66.1,58.6],
	[62.7,16.1],
	[61,34.3],
	[43,32.1],
	[41,70.1],
	[47.8,56.1],
	[8.4,87.5],
	[33.6,86.7],
	[39,78],
	[51.5,79.9],
	[54.7,76],
	[32.4,76.7],
	[31.6,80.4],
	[26.8,100],
	[27.2,62.3],
	[3.5,45.6],
	[45,67.3],
	[55.4,56],
	[42.6,63.1],
	[93.3,0],
	[54.2,16.7],
	[54,13.8],
	[79.6,19.6],
	[39.2,46.3],
	[58.5,67.7],
	[40.3,17.9],
	[71.8,24.5],
	[98.6,18.7],
	[59.9,38.9],
	[33.3,90],
	[64.2,19.6],
	[56.6,34.4],
	[62.4,20.7]];

	var x = d3.scale.linear().domain([0,100]).range([40,400]);
	var y = d3.scale.linear().domain([0,100]).range([60,600]);





	var path=
	svg.append("svg:path")
	.attr("class", "line")
	.attr("d", "m 25.253814,263.43304 c 29.889958,-2.86317 58.545065,-17.13799 78.834896,-39.27235 20.28984,-22.13436 32.02373,-51.92028 32.28188,-81.94595 0.085,-9.89205 -1.04195,-19.84619 -4.01598,-29.28097 -2.97403,-9.43478 -7.83912,-18.348108 -14.68303,-25.490996 -6.84391,-7.142888 -15.71705,-12.454265 -25.405541,-14.452525 -9.688493,-1.99826 -20.165512,-0.550977 -28.626429,4.574727 -5.188274,3.143106 -9.550697,7.596511 -12.744592,12.753675 -3.193895,5.157164 -5.228714,11.005829 -6.110217,17.007519 -1.763005,12.00338 1.113557,24.4115 6.744363,35.15781 5.630806,10.74631 13.897258,19.93557 23.086091,27.85735 9.188834,7.92178 19.326581,14.65516 29.430455,21.37088 21.31564,14.16783 42.78425,28.45003 66.41861,38.2735 23.63436,9.82347 49.86181,15.0114 75.00275,10.21383 17.38763,-3.31803 33.85857,-11.4293 46.97304,-23.31835 13.11448,-11.88905 22.81652,-27.5345 27.47032,-44.61317 4.6538,-17.07868 4.21991,-35.53447 -1.3949,-52.32175 -5.61481,-16.78728 -16.41066,-31.827843 -30.62205,-42.381294 -18.01034,-13.374571 -41.59211,-19.254917 -63.63973,-15.113177 -22.04761,4.14174 -42.12872,18.469302 -52.52782,38.346681 -9.19259,17.57119 -10.64421,38.7664 -5.20336,57.83594 5.44085,19.06954 17.4929,35.97405 32.92218,48.43147 15.42928,12.45743 34.11523,20.58238 53.50223,24.75305 19.387,4.17067 39.47759,4.47953 59.19016,2.31968 30.86169,-3.38142 61.54458,-13.07964 86.43024,-31.64255 24.88566,-18.56291 43.4776,-46.59785 46.90989,-77.45392 2.74568,-24.68352 -4.56686,-50.497752 -20.52732,-69.526121 -15.96046,-19.028369 -40.50194,-30.799045 -65.33564,-30.478985 -26.78563,0.345216 -52.70409,14.771188 -68.27353,36.569852 -15.56944,21.798663 -20.86604,50.308294 -15.56914,76.567234 3.94617,19.56282 13.48634,37.83595 26.53449,52.93635 13.04815,15.1004 29.53092,27.07709 47.5016,35.75644 35.94135,17.3587 77.02005,21.41106 116.88275,19.39353 21.23813,-1.0749 42.58462,-3.83801 62.60076,-11.01906 20.01614,-7.18105 38.73658,-19.03432 51.66543,-35.91799 12.92884,-16.88367 19.56769,-39.09119 15.37949,-59.93999 -2.09411,-10.4244 -6.84855,-20.34883 -13.92903,-28.28105 -7.08049,-7.93221 -16.50004,-13.818185 -26.82323,-16.36479 -9.17554,-2.263495 -18.9512,-1.874954 -28.00571,0.832427 -9.05451,2.70738 -17.3807,7.700663 -24.23856,14.203263 -13.71572,13.0052 -21.22519,31.76653 -22.50702,50.62423 -1.25025,18.3932 3.18639,37.13355 12.55063,53.01384 9.36425,15.8803 23.61617,28.83281 40.31669,36.64084 16.70052,7.80804 35.77842,10.4383 53.96872,7.44065 18.1903,-2.99765 35.41541,-11.61043 48.72745,-24.36435");

	var totalLength = path.node().getTotalLength();

	path
	.attr("stroke-dasharray", totalLength + " " + totalLength)
	.attr("stroke-dashoffset", totalLength)
	.transition()
	.ease("linear")
	.duration(4000)
	.attr("stroke-dashoffset", 0);







	var path2=
	svg.append("svg:path")
	.attr("class", "line")
	.attr("d", "m 32.324881,354.34677 c 55.444878,69.45187 131.622459,122.13543 216.172649,149.50258 54.15177,17.52781 111.89135,24.80413 168.46312,18.53733 56.57178,-6.26681 111.90201,-26.31536 157.81615,-59.95358 40.16823,-29.42858 72.79204,-69.06826 93.94419,-114.14724");

	var totalLength2 = path2.node().getTotalLength();

	path2
	.attr("stroke-dasharray", totalLength2 + " " + totalLength2)
	.attr("stroke-dashoffset", totalLength2)
	.transition()
	.ease("linear")
	.duration(2000)
	.attr("stroke-dashoffset", 0);




	</script>


	</body>
	</html>