Ch7_scaleTime

DONE. 180108

This is an exercise from D3 Chapter 7 concerning time scales. I've added in CSV data to facilitate analysis. This is applying the use of scales to Time data.

forked from eychang9's block: Ch7_scaleLinear

<!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>

https://d3js.org/d3.v4.min.js