D3 Block-a-Day: Day 2, January 2nd, 2017

D3 Block-a-Day: Day 2, January, 2nd 2017

New Year's Resolution for 2017: Make a D3 Block a day to teach myself D3. This is Number 2. This example is taken from Malcolm Maclean's D3.js Tips and Tricks V4. This example shamelessly copies one of his examples and modifies the content to something related to education.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>D3 Block-a-Day: Day 2, January 2, 2017</title>
    <link rel="stylesheet" type="text/css" href="styles.css"/>
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <style> /* set the CSS */

body {
				font: 20px Helvetica Neue;
		}

.line {
        fill: none;
      	stroke-linecap: "round";
      	stroke-dasharray: 10,5;
        stroke: darkgrey;
        stroke-width: 2px;
    }

.xaxis {
      	font: 12px Helvetica Neue;
     }

.yaxis {
      	font: 14px Helvetica Neue;
     }

</style>
</head>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 50, left: 70},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// parse the date / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

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

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
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 + ")");

// Get the data
d3.csv("data.csv", function(error, data) {
  if (error) throw error;

// format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });

// 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; })]);

// Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);

// Add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(5))
      .attr("class", "xaxis");

// text label for the x axis
  svg.append("text")
      .attr("transform",
            "translate(" + (width*0.1) + " ," +
                           (height + margin.top + 30) + ")")
      .style("text-anchor", "middle")
  		.style("font-family", "Helvetica Neue")
      .text("Date");

// Add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y))
  		.style("font-family", "Helvetica Neue")
  		.attr("class", "yaxis");

// text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
  		.attr("x", - 0.75*height)
      .attr("dy", "1em")
      .style("text-anchor", "middle")
  		.style("font-family", "Helvetica Neue")
      .text("Scale Score");

});

</script>
</body>

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