Ch8_axesTime

DONE. 180108

This is an exercise from D3 Chapter 7 concerning time scales. I've added in CSV data to facilitate analysis. This attempts to recreate 8-13, but given the use of alternative functions (stuff that I would not have known at this point), this is pretty much the end.

forked from eychang9's block: Ch7_scaleLinear

forked from eychang9's block: Ch7_scaleTime

<!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; }
    .axis path, 
    .axis line {
      stroke: red;
      shape-rendering: crispEdges;
    }
    .axis text {
      font-family: Segoe UI;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <script>
    // Set up variables
    var dataset, xScale, yScale;
    svgW = 800;
    svgH = 500; 
    pad = 75;
    
    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([0, 
                 d3.max(dataset, function (d) { return d.Amount; })])
      	.range([svgH-pad, pad]);

// Enter drop lines
      svg.selectAll("line")
      	.data(dataset)
      	.enter()
      	.append("line")
      	.attr("x1", function (d) { return xScale(d.Date); })
      	.attr("y1", function (d) { return yScale(d.Amount); })
      	.attr("x2", function (d) { return xScale(d.Date); })
      	.attr("y2", yScale(0))
      	.attr("stroke-width", 1)
      	.attr("stroke", "#ddd")
      
      // 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");
      
      // Enter axes
      var xAxis = d3.axisBottom(xScale);
      
      svg.append("g")
      	.attr("class", "axis")
      	.attr("transform", "translate(0," + (svgH-pad) + ")")
      	.call(xAxis);
      
      var yAxis = d3.axisLeft(yScale);
      
      svg.append("g")
      	.attr("class", "axis")
      	.attr("transform", "translate(" + pad + ",0)")
      	.call(yAxis);
      
      
      
    })

</script>
</body>

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