rlindgren · May 4, 2018 17:31
diff --git a/.block b/.block
 license: gpl-3.0
 border: no
diff --git a/app.js b/app.js
 // heavily copied from https://bl.ocks.org/mbostock/3883245

 onReady(init);

 function init() {
  var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var x = d3.scaleTime()
      .rangeRound([0, width]);

  var y = d3.scaleLinear()
      .rangeRound([height, 0]);

  var line = d3.line()
      .x(function(d) { return x(d.Date); })
      .y(function(d) { return y(d.Count); });

  d3.csv('date_count.csv', coerceTypes, function withData(err, data) {

    x.domain(d3.extent(data, function(d) { return d.Date; }));
    y.domain(d3.extent(data, function(d) { return d.Count; }));

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
      .select(".domain")
        .remove();

    g.append("g")
        .call(d3.axisLeft(y))
      .append("text")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Count");

    g.append("path")
        .datum(data)
        .attr("fill", "none")
        .attr("stroke", "steelblue")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line);
  });   
 }

 function coerceTypes(d) {
  d.Count = +d.Count;
  d.Date = new Date(d.Date);
  return d;
 }

 function onReady(fn) {
  var args = [].slice.call(arguments, 1);
  var loaded = false;
  (function runner() {
    if (document.readyState === "loading") {
      document.onreadystatechange = runner;
    } else if (!loaded) {
      loaded = true;
      fn.apply(null, args);
    }
  })()
 }
diff --git a/date_count.csv b/date_count.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <svg width="960" height="500"></svg>
 <script src="app.js"></script>
	// heavily copied from https://bl.ocks.org/mbostock/3883245

	onReady(init);

	function init() {
	var svg = d3.select("svg"),
	margin = {top: 20, right: 20, bottom: 30, left: 50},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.scaleTime()
	.rangeRound([0, width]);

	var y = d3.scaleLinear()
	.rangeRound([height, 0]);

	var line = d3.line()
	.x(function(d) { return x(d.Date); })
	.y(function(d) { return y(d.Count); });

	d3.csv('date_count.csv', coerceTypes, function withData(err, data) {

	x.domain(d3.extent(data, function(d) { return d.Date; }));
	y.domain(d3.extent(data, function(d) { return d.Count; }));

	g.append("g")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))
	.select(".domain")
	.remove();

	g.append("g")
	.call(d3.axisLeft(y))
	.append("text")
	.attr("fill", "#000")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("text-anchor", "end")
	.text("Count");

	g.append("path")
	.datum(data)
	.attr("fill", "none")
	.attr("stroke", "steelblue")
	.attr("stroke-linejoin", "round")
	.attr("stroke-linecap", "round")
	.attr("stroke-width", 1.5)
	.attr("d", line);
	});
	}

	function coerceTypes(d) {
	d.Count = +d.Count;
	d.Date = new Date(d.Date);
	return d;
	}

	function onReady(fn) {
	var args = [].slice.call(arguments, 1);
	var loaded = false;
	(function runner() {
	if (document.readyState === "loading") {
	document.onreadystatechange = runner;
	} else if (!loaded) {
	loaded = true;
	fn.apply(null, args);
	}
	})()
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<svg width="960" height="500"></svg>
	<script src="app.js"></script>