D3 Examples - Ch7

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Set up variables
    var dataset, xScale, yScale;
    svgW = 700;
    svgH = 500; 
    pad = 50;
    
    var parseTime = d3.timeParse("%m/%d/%Y");
    
    var formatTime = d3.timeFormat("%b %e");
    
    var rowConverter = function (d) {
      return {
        Date: parseTime(d.Date),
        Amount: parseInt( d.Amount)
      };
    };
    
    // Load in data
    d3.csv("time_scale_data.csv", rowConverter, function (data) {
       // Transfer data to global variable
      dataset = data;
      
      // Set up SVG
      var svg = d3.select("body")
        .append("svg")
        .attr("width", svgW)
        .attr("height", svgH);
      
      // Set up scales
      var xScale = d3.scaleTime()
        .domain([d3.min(dataset, function (d) { return d.Date; }), 
                 d3.max(dataset, function (d) { return d.Date; })])
        .range([pad, svgW-pad]);
      var yScale = d3.scaleLinear()
        .domain([d3.min(dataset, function (d) { return d.Amount; }), 
                 d3.max(dataset, function (d) { return d.Amount; })])
        .range([svgH-pad, pad]);
      
      // Plot scatter
      svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr("cx", function (d) { return xScale(d.Date); })
        .attr("cy", function (d) { return yScale(d.Amount); })
        .attr("r", 5);
      
      // Enter text
      svg.selectAll("text")
        .data(dataset)
        .enter()
        .append("text")
        .attr("x", function (d) { return xScale(d.Date) + 10; })
        .attr("y", function (d) { return yScale(d.Amount); })
        .text(function (d) { return formatTime(d.Date); })
        .attr("font-family", "Century Gothic")
        .attr("font-size", "12px")
        .attr("alignment-baseline", "middle");
        
      
      
      
    })
​
  </script>
</body>
​
    