anbnyc · June 9, 2016 14:54
diff --git a/index.html b/index.html
 <html>
 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
 <style>
    
 .axis path,
 .axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
 }

 .axis text {
    font-family: sans-serif;
    font-size: 13px;
 }   
 
 </style>
 </head>
 <body>
 <h3>Mark Dunetz: Progress Over Time</h3>
 <h4>June 9, 2016</h4>

 <script>    

 //Width and height
 var w = 950;
 var h = 500;

 var padding = 50;

 //dyanmic axes variables

 //create scale function
 var scale = d3.scale.linear()
                    .domain([100, 500])
                    .range([10, 350]);
                           

 var xScale = d3.scale.linear()
                     .range([padding, w - padding]) //labels getting cuttoff so doubling padding on right side.

                     
 var yScale = d3.scale.linear()
                     .range([h - padding, padding]); //a smaller input will produce a larger output value, pushing circle elements down.

 var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .ticks(10);
    
        
 var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
    
    

 //get data from sheet
 //Note: deal with date coming in - d3 date class
 d3.csv('mdbday.csv', function(raw){

  var dataset = raw;

    //define scales
    xScale.domain([
        d3.min(dataset, function(d) { 
            return +d.x;
        }),
        d3.max(dataset, function(d) { 
            return +d.x;
        })
    ]);

    yScale.domain([
        0, 
        d3.max(dataset, function(d) { 
            return +d.y;
        })
    ]);

    //the SVG container
    var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);

    //define line function
    var lineFunction = d3.svg.line()
        .x(function(d) { return xScale(+d.x); })
        .y(function(d) { return yScale(+d.y); });

    var lineGraph = svg.selectAll(".line")
        .data(dataset)
        .enter().append("g")
        .attr("class","line")

    var lineWillTake = 6000;

    lineGraph.append("path")
        .attr("d", function(d){ return lineFunction(d.order); })
        .attr("class", "line")
        .attr("fill", "none")
        .transition()
        .duration(lineWillTake)
        .attrTween("d", interpolate)
        .attr("stroke", "blue" );
        
    function interpolate(d){
        var interpolateScale = d3.scale.quantile()
            .domain([0,1])
            .range(d3.range(1,dataset.length + 1));        
        return function(t){
            var interpolatedLine = dataset.slice(0, interpolateScale(t));
            return lineFunction(interpolatedLine);
        }
    }
    
    
    var circle = svg.selectAll("circle")
      .data([[21.7,5.38],[14.24,8.63]])
      .enter().append('circle')
      .attr('fill',"pink")
      .attr('stroke',"green")
      .attr('r',0)
      .transition()
      .delay(lineWillTake)
      .duration(1000)
      .attr('cx',function(d){
        return xScale(d[0]);
      })
      .attr('cy',function(d){
        return yScale(d[1]);
      })
      .attr('r',6);
        
    //add axes
    svg.append("g")
        .attr("class", "axis") // assign an axis class
        .attr("transform", "translate(0," + (h - padding) + ")") //push the axis group to the bottom 
        .call(xAxis)
      .append("text")
        .attr("transform","translate("+w/2+",30)")
        .text("love, sysDaar");
        
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis)
     .append("text")
      .attr("transform","translate(20,"+(h/2 - 30)+") rotate(-90)")
      .attr("dy", "-4em")
      .style("text-anchor", "end")
      .text("Dear Mark,");


 });

 </script>
diff --git a/mdbday.csv b/mdbday.csv
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
	<style>

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 13px;
	}

	</style>
	</head>
	<body>
	<h3>Mark Dunetz: Progress Over Time</h3>
	<h4>June 9, 2016</h4>

	<script>

	//Width and height
	var w = 950;
	var h = 500;

	var padding = 50;

	//dyanmic axes variables

	//create scale function
	var scale = d3.scale.linear()
	.domain([100, 500])
	.range([10, 350]);


	var xScale = d3.scale.linear()
	.range([padding, w - padding]) //labels getting cuttoff so doubling padding on right side.


	var yScale = d3.scale.linear()
	.range([h - padding, padding]); //a smaller input will produce a larger output value, pushing circle elements down.

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10);


	var yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("left");



	//get data from sheet
	//Note: deal with date coming in - d3 date class
	d3.csv('mdbday.csv', function(raw){

	var dataset = raw;

	//define scales
	xScale.domain([
	d3.min(dataset, function(d) {
	return +d.x;
	}),
	d3.max(dataset, function(d) {
	return +d.x;
	})
	]);

	yScale.domain([
	0,
	d3.max(dataset, function(d) {
	return +d.y;
	})
	]);

	//the SVG container
	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	//define line function
	var lineFunction = d3.svg.line()
	.x(function(d) { return xScale(+d.x); })
	.y(function(d) { return yScale(+d.y); });

	var lineGraph = svg.selectAll(".line")
	.data(dataset)
	.enter().append("g")
	.attr("class","line")

	var lineWillTake = 6000;

	lineGraph.append("path")
	.attr("d", function(d){ return lineFunction(d.order); })
	.attr("class", "line")
	.attr("fill", "none")
	.transition()
	.duration(lineWillTake)
	.attrTween("d", interpolate)
	.attr("stroke", "blue" );

	function interpolate(d){
	var interpolateScale = d3.scale.quantile()
	.domain([0,1])
	.range(d3.range(1,dataset.length + 1));
	return function(t){
	var interpolatedLine = dataset.slice(0, interpolateScale(t));
	return lineFunction(interpolatedLine);
	}
	}


	var circle = svg.selectAll("circle")
	.data([[21.7,5.38],[14.24,8.63]])
	.enter().append('circle')
	.attr('fill',"pink")
	.attr('stroke',"green")
	.attr('r',0)
	.transition()
	.delay(lineWillTake)
	.duration(1000)
	.attr('cx',function(d){
	return xScale(d[0]);
	})
	.attr('cy',function(d){
	return yScale(d[1]);
	})
	.attr('r',6);

	//add axes
	svg.append("g")
	.attr("class", "axis") // assign an axis class
	.attr("transform", "translate(0," + (h - padding) + ")") //push the axis group to the bottom
	.call(xAxis)
	.append("text")
	.attr("transform","translate("+w/2+",30)")
	.text("love, sysDaar");

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + padding + ",0)")
	.call(yAxis)
	.append("text")
	.attr("transform","translate(20,"+(h/2 - 30)+") rotate(-90)")
	.attr("dy", "-4em")
	.style("text-anchor", "end")
	.text("Dear Mark,");


	});

	</script>
order	x	y
1	0	0
2	0.5	1.59
3	1	1.34
4	1.5	2.45
5	2	2
6	3	3.75
7	3.5	3
8	4.5	5.4
9	5	5
10	5.63	6.43
11	6	7.15
12	6.14	8.15
13	6.11	6.31
14	6.25	7.15
15	6.77	7.15
16	6.94	6.31
17	7.27	6.72
18	7.59	6.77
19	8	7
20	8	6.36
21	7.5	6.34
22	8.2	6.7
23	8.45	7
24	8.45	6.34
25	8.47	5.3
26	8.64	7.27
27	9.31	7.12
28	9.3	6.54
29	8.77	6.39
30	9.76	7.27
31	9.7	6.34
32	9.75	5.36
33	10	7.27
34	10.46	7.11
35	10.55	6.5
36	9.87	6.5
37	10.9	7.24
38	10.9	6.5
39	11.45	6.45
40	11.76	7.3
41	11.09	5.17
42	12.86	8.37
43	12.83	7.45
44	12.74	6.55
45	13.51	6.55
46	13.46	7.39
47	13	7.23
48	14.2	7.45
49	14.11	6.63
50	14.65	7.35
51	15.11	7.35
52	14.9	6.6
53	15.58	7
54	15.82	8.37
55	15.76	7.56
56	16.4	7.56
57	15.43	7.56
58	15.87	6.45
59	16.45	7.32
60	16.72	8.4
61	16.44	6.36
62	16.77	7.3
63	17.13	7.27
64	17.29	6.36
65	17.58	7.21
66	18.04	7.24
67	18.04	8.32
68	18.04	6.36
69	17.39	6.36
70	18.68	6.7
71	19	7
72	19.55	6.84
73	19.55	6.21
74	18.9	6.21
75	20	7
76	20.13	6.25
77	20.64	6.27
78	21	7
79	20.46	4.7
80	21.92	8.31
81	21.71	6.24