cool-Blue/data-alt.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    Idiomatic version of an animated line chart with added animated "y-value and y-axis only" initial entry.

Instead of passing the line data into a d3.svg.line() object explicitly, the data is first bound to the path and then passed to the d3.svg.line() object implicitly via selection.attr().

  
## data-alt.csv

          
            date
            close

            
              10-May-12
              99.55

            
              8-May-12
              76.86

            
              6-May-12
              67.62

            
              4-May-12
              64.48

            
              2-May-12
              60.98

            
              1-May-12
              58.13

            
              30-Apr-12
              53.98

            
              27-Apr-12
              67.00

            
              26-Apr-12
              89.70

            
              25-Apr-12
              99.00

            
              24-Apr-12
              90.28

            
              23-Apr-12
              106.70

            
              20-Apr-12
              94.98

            
              19-Apr-12
              85.44

            
              18-Apr-12
              73.34

            
              17-Apr-12
              53.70

            
              16-Apr-12
              50.13

            
              13-Apr-12
              65.23

            
              12-Apr-12
              62.77

            
              11-Apr-12
              66.20

            
              10-Apr-12
              68.44

            
              9-Apr-12
              66.23

            
              5-Apr-12
              63.68

            
              4-Apr-12
              64.31

            
              3-Apr-12
              69.32

            
              2-Apr-12
              61.63

## data.csv

          
            date
            close

            
              1-May-12
              58.13

            
              30-Apr-12
              53.98

            
              27-Apr-12
              67.00

            
              26-Apr-12
              89.70

            
              25-Apr-12
              99.00

            
              24-Apr-12
              130.28

            
              23-Apr-12
              166.70

            
              20-Apr-12
              234.98

            
              19-Apr-12
              345.44

            
              18-Apr-12
              443.34

            
              17-Apr-12
              543.70

            
              16-Apr-12
              580.13

            
              13-Apr-12
              605.23

            
              12-Apr-12
              622.77

            
              11-Apr-12
              626.20

            
              10-Apr-12
              628.44

            
              9-Apr-12
              636.23

            
              5-Apr-12
              633.68

            
              4-Apr-12
              624.31

            
              3-Apr-12
              629.32

            
              2-Apr-12
              618.63

            
              30-Mar-12
              599.55

            
              29-Mar-12
              609.86

            
              28-Mar-12
              617.62

            
              27-Mar-12
              614.48

            
              26-Mar-12
              606.98

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body {
  font: 12px Arial;
}

path {
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}

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

</style>
<body>

<div id="option">
  <input name="updateButton"
         type="button"
         value="Update"
         onclick="updateData()"/>
</div>

<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<script>

  // Set the dimensions of the canvas / graph
  var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

  // Parse the date / time
  var parseDate = d3.time.format("%d-%b-%y").parse;

  // Set the ranges
  var x = d3.time.scale().range([0, width]);
  var y = d3.scale.linear().range([height, 0]);

  // Define the axes
  var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

  var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

  // Define the line
  var valueline = d3.svg.line()
    .x(function (d) {
      return x(d.date);
    })
    .y(function (d) {
      return y(d.close);
    });

  // Adds the svg canvas
  var svg = d3.select("body")
    .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")");
  //EDIT ********************************************
  var line, source = ["data.csv", "data-alt.csv"];
  source.get = (function(){
    var pointer = true;
    return function(){
      return (pointer =!pointer, this[+pointer]);
    }
  })();
  // Get the data
  d3.csv(source.get(), function (error, data) {
    data.forEach(function (d) {
      d.date = parseDate(d.date);
      d.close = +d.close;
    });
    var entryData = data.map(function (d) {
      return ({date: d.date, close: 0})
    })

    // Scale the range of the data
    x.domain(d3.extent(data, function (d) {
      return d.date;
    }));
    y.domain([0, d3.max(data, function (d) {
      return d.close;
    })]);

    //Bind the data first THEN add the valueline path.
    //Start with all zero y values
    line = svg.selectAll("line").data([entryData]);
    line.enter().append("path")
      .attr("class", "line")
      .attr("d", valueline);
    // Transition initial data, y values only
    line.data([data]);
    line.transition().delay(500).call(trans, "entry")
      // Add the valueline path.
      .attr("d", valueline);

    // Add the X Axis
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    // Add the Y Axis with entry transition
    var gYaxis = svg.append("g")
      .attr("class", "y axis");
    //Null axis starting point
    y.domain([0, 0]);
    gYaxis.call(yAxis);
    //Final axis after entry transition
    y.domain([0, d3.max(data, function (d) {
      return d.close;
    })]);
    gYaxis.transition().delay(500).call(trans, "entry")
      .call(yAxis);

  });

  // ** Update data section (Called from the onclick)
  function updateData() {

    // Get the data again
    d3.csv(source.get(), function (error, data) {
      data.forEach(function (d) {
        d.date = parseDate(d.date);
        d.close = +d.close;
      });

      // Scale the range of the data again
      x.domain(d3.extent(data, function (d) {
        return d.date;
      }));
      y.domain([0, d3.max(data, function (d) {
        return d.close;
      })]);

      //EDIT ********************************************
      // Bind the new data and then transition
      line = svg.selectAll(".line").data([data]);
      line.enter().append("path")
        .attr("class", "line")
      line.transition().call(trans)
        // Add the valueline path.
        .attr("d", valueline);

      // Select the section we want to apply our changes to
      var svgTrans = d3.select("body").transition();

      // Make the changes
      svgTrans.select(".x.axis") // change the x axis
        .call(trans)
        .call(xAxis);
      svgTrans.select(".y.axis") // change the y axis
        .call(trans)
        .call(yAxis);

    });
  }
  function trans (transition, name){
    var delays = {normal:0, entry: 500};
    name = name || "normal";
    transition.duration(750).delay(delays[name]).ease("sin-in-out")
  }
</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	date	close
	10-May-12	99.55
	8-May-12	76.86
	6-May-12	67.62
	4-May-12	64.48
	2-May-12	60.98
	1-May-12	58.13
	30-Apr-12	53.98
	27-Apr-12	67.00
	26-Apr-12	89.70
	25-Apr-12	99.00
	24-Apr-12	90.28
	23-Apr-12	106.70
	20-Apr-12	94.98
	19-Apr-12	85.44
	18-Apr-12	73.34
	17-Apr-12	53.70
	16-Apr-12	50.13
	13-Apr-12	65.23
	12-Apr-12	62.77
	11-Apr-12	66.20
	10-Apr-12	68.44
	9-Apr-12	66.23
	5-Apr-12	63.68
	4-Apr-12	64.31
	3-Apr-12	69.32
	2-Apr-12	61.63
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	body {
	font: 12px Arial;
	}

	path {
	stroke: steelblue;
	stroke-width: 2;
	fill: none;
	}

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

	</style>
	<body>

	<div id="option">
	<input name="updateButton"
	type="button"
	value="Update"
	onclick="updateData()"/>
	</div>

	<!-- load the d3.js library -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

	<script>

	// Set the dimensions of the canvas / graph
	var margin = {top: 30, right: 20, bottom: 30, left: 50},
	width = 600 - margin.left - margin.right,
	height = 270 - margin.top - margin.bottom;

	// Parse the date / time
	var parseDate = d3.time.format("%d-%b-%y").parse;

	// Set the ranges
	var x = d3.time.scale().range([0, width]);
	var y = d3.scale.linear().range([height, 0]);

	// Define the axes
	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom").ticks(5);

	var yAxis = d3.svg.axis().scale(y)
	.orient("left").ticks(5);

	// Define the line
	var valueline = d3.svg.line()
	.x(function (d) {
	return x(d.date);
	})
	.y(function (d) {
	return y(d.close);
	});

	// Adds the svg canvas
	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform",
	"translate(" + margin.left + "," + margin.top + ")");
	//EDIT ********************************************
	var line, source = ["data.csv", "data-alt.csv"];
	source.get = (function(){
	var pointer = true;
	return function(){
	return (pointer =!pointer, this[+pointer]);
	}
	})();
	// Get the data
	d3.csv(source.get(), function (error, data) {
	data.forEach(function (d) {
	d.date = parseDate(d.date);
	d.close = +d.close;
	});
	var entryData = data.map(function (d) {
	return ({date: d.date, close: 0})
	})

	// Scale the range of the data
	x.domain(d3.extent(data, function (d) {
	return d.date;
	}));
	y.domain([0, d3.max(data, function (d) {
	return d.close;
	})]);

	//Bind the data first THEN add the valueline path.
	//Start with all zero y values
	line = svg.selectAll("line").data([entryData]);
	line.enter().append("path")
	.attr("class", "line")
	.attr("d", valueline);
	// Transition initial data, y values only
	line.data([data]);
	line.transition().delay(500).call(trans, "entry")
	// Add the valueline path.
	.attr("d", valueline);

	// Add the X Axis
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	// Add the Y Axis with entry transition
	var gYaxis = svg.append("g")
	.attr("class", "y axis");
	//Null axis starting point
	y.domain([0, 0]);
	gYaxis.call(yAxis);
	//Final axis after entry transition
	y.domain([0, d3.max(data, function (d) {
	return d.close;
	})]);
	gYaxis.transition().delay(500).call(trans, "entry")
	.call(yAxis);

	});

	// ** Update data section (Called from the onclick)
	function updateData() {

	// Get the data again
	d3.csv(source.get(), function (error, data) {
	data.forEach(function (d) {
	d.date = parseDate(d.date);
	d.close = +d.close;
	});

	// Scale the range of the data again
	x.domain(d3.extent(data, function (d) {
	return d.date;
	}));
	y.domain([0, d3.max(data, function (d) {
	return d.close;
	})]);

	//EDIT ********************************************
	// Bind the new data and then transition
	line = svg.selectAll(".line").data([data]);
	line.enter().append("path")
	.attr("class", "line")
	line.transition().call(trans)
	// Add the valueline path.
	.attr("d", valueline);

	// Select the section we want to apply our changes to
	var svgTrans = d3.select("body").transition();

	// Make the changes
	svgTrans.select(".x.axis") // change the x axis
	.call(trans)
	.call(xAxis);
	svgTrans.select(".y.axis") // change the y axis
	.call(trans)
	.call(yAxis);

	});
	}
	function trans (transition, name){
	var delays = {normal:0, entry: 500};
	name = name \|\| "normal";
	transition.duration(750).delay(delays[name]).ease("sin-in-out")
	}
	</script>
	</body>