jcdcodes · February 6, 2016 17:07
diff --git a/README.md b/README.md
diff --git a/commutes.tsv b/commutes.tsv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/html">
 <meta charset="utf-8">
 <style>

 body {
  height: 500px;
  width: 960px;
 }

 svg {
    font: 14px "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .axis path, .axis line{
    fill:none;
    stroke:black;
    stroke-width:1px;
 }
 .dot {
    fill:steelblue;
    stroke:none;
 }
 .am {
    fill:steelblue;
 }
 .pm {
    fill:brown;
 }
 .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
 }
 .band {
    fill: #ded;
 }
 </style>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <body>
 <script>

    var margin = {top: 20, right: 20, bottom: 40, left: 70},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    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 + ")");

    var x = d3.time.scale()
              .range([0, width])
              .nice(d3.time.month);

    var y = d3.scale.log().range([height,0]);

    var dflabel = d3.time.format("%b");

    var xAxis = d3.svg.axis().scale(x)
            .orient("bottom")
            .tickFormat(function(d) { return dflabel(d).slice(0,1); })
            .tickSize(6,0,3)
            .ticks(30);

    var xAxis2 = d3.svg.axis().scale(x)
            .orient("top")
            .tickFormat(d3.time.format("%Y"))
            .ticks(3)
            .tickSize(16,0);

    var yAxis = d3.svg.axis().scale(y)
            .orient("left")
            .tickValues([15,30,45,60,75,90,105,120,135])
            .tickFormat(function(d, i) { return d; })
            .tickSize(6,0,3);

    var line = d3.svg.line()
            .x(function(d) { return x(d.starttime); })
            .y(function(d) { return y(d.minutes); });


    var df = d3.time.format("%a %b %d %H:%M:%S %Y");

    minutes_from_hms = function(hmstext) {
        var hms = hmstext.split(" ");
        var h = +hms[0].slice(0, -1),
            m = +hms[1].slice(0, -1),
            s = +hms[2].slice(0, -1);
        return 60*h + m + s/60.0;
    };

    d3.tsv("commutes.tsv", function(data) {

        data.forEach(function(d) {
            d.t = df.parse(d.starttime.slice(0, 20) + d.starttime.slice(24, 28));
            d.distance = +d.distance;
            d.minutes = minutes_from_hms(d.duration);
        });

        x.domain([df.parse("Fri Jun 08 08:23:38 2012"), df.parse("Fri Nov 07 18:15:27 2014")]);
        y.domain([10, 1.05 * d3.max(data, function(d) { return d.minutes; })]);

        // Nominal commute duration
        svg.append("rect")
            .attr("x", x(x.domain()[0]))
            .attr("y", y(40))
            .attr("width", x(x.domain()[1]))
            .attr("height", y(30)-y(40))
            .attr("class", "band");

        // Data points
        svg.selectAll("circle")
             .data(data)
           .enter().append("circle")
             .attr("cx", function(d) { return x(d.t); })
             .attr("cy", function(d) { return y(d.minutes); })
             .attr("r", 3.5)
             .attr("class", function(d) { return d.t.getHours() < 12 ? "am" : "pm" });

        // X-axis months
        svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0,"+height+")")
                .call(xAxis)
              .selectAll("text")
                .attr("x", 10)
                .attr("y", 5)
                .attr("text-anchor", null);

        // X-axis years
        svg.append("g")
                .attr("class", "axis")
                .attr("transform", "translate(0,"+height+")")
                .call(xAxis2)
              .selectAll("text")
                .attr("x", 20)
                .attr("y", -5)
                .attr("text-anchor", null);

        // Y-axis label
        svg.append("text")
            .attr("x", -270)
            .attr("y", -40)
            .attr("transform", "rotate(-90)")
            .text("Duration (minutes)");

        // Y-axis
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(-10, 0)")
            .call(yAxis);

    });

    svg.append("text")
       .attr("class", "legend")
       .attr("transform", "translate(800, 20)")
       .text("Morning");

    svg.append("circle")
       .attr("cx", 790)
       .attr("cy", 15)
       .attr("r", 3.5)
       .attr("class", "am");

    svg.append("text")
       .attr("class", "legend")
       .attr("transform", "translate(800, 40)")
       .text("Evening");

    svg.append("circle")
       .attr("cx", 790)
       .attr("cy", 35)
       .attr("r", 3.5)
       .attr("class", "pm");


 </script>
 </body>
 </html>

diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/html">
	<meta charset="utf-8">
	<style>

	body {
	height: 500px;
	width: 960px;
	}

	svg {
	font: 14px "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	.axis path, .axis line{
	fill:none;
	stroke:black;
	stroke-width:1px;
	}
	.dot {
	fill:steelblue;
	stroke:none;
	}
	.am {
	fill:steelblue;
	}
	.pm {
	fill:brown;
	}
	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}
	.band {
	fill: #ded;
	}
	</style>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<body>
	<script>

	var margin = {top: 20, right: 20, bottom: 40, left: 70},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	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 + ")");

	var x = d3.time.scale()
	.range([0, width])
	.nice(d3.time.month);

	var y = d3.scale.log().range([height,0]);

	var dflabel = d3.time.format("%b");

	var xAxis = d3.svg.axis().scale(x)
	.orient("bottom")
	.tickFormat(function(d) { return dflabel(d).slice(0,1); })
	.tickSize(6,0,3)
	.ticks(30);

	var xAxis2 = d3.svg.axis().scale(x)
	.orient("top")
	.tickFormat(d3.time.format("%Y"))
	.ticks(3)
	.tickSize(16,0);

	var yAxis = d3.svg.axis().scale(y)
	.orient("left")
	.tickValues([15,30,45,60,75,90,105,120,135])
	.tickFormat(function(d, i) { return d; })
	.tickSize(6,0,3);

	var line = d3.svg.line()
	.x(function(d) { return x(d.starttime); })
	.y(function(d) { return y(d.minutes); });


	var df = d3.time.format("%a %b %d %H:%M:%S %Y");

	minutes_from_hms = function(hmstext) {
	var hms = hmstext.split(" ");
	var h = +hms[0].slice(0, -1),
	m = +hms[1].slice(0, -1),
	s = +hms[2].slice(0, -1);
	return 60*h + m + s/60.0;
	};

	d3.tsv("commutes.tsv", function(data) {

	data.forEach(function(d) {
	d.t = df.parse(d.starttime.slice(0, 20) + d.starttime.slice(24, 28));
	d.distance = +d.distance;
	d.minutes = minutes_from_hms(d.duration);
	});

	x.domain([df.parse("Fri Jun 08 08:23:38 2012"), df.parse("Fri Nov 07 18:15:27 2014")]);
	y.domain([10, 1.05 * d3.max(data, function(d) { return d.minutes; })]);

	// Nominal commute duration
	svg.append("rect")
	.attr("x", x(x.domain()[0]))
	.attr("y", y(40))
	.attr("width", x(x.domain()[1]))
	.attr("height", y(30)-y(40))
	.attr("class", "band");

	// Data points
	svg.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("cx", function(d) { return x(d.t); })
	.attr("cy", function(d) { return y(d.minutes); })
	.attr("r", 3.5)
	.attr("class", function(d) { return d.t.getHours() < 12 ? "am" : "pm" });

	// X-axis months
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0,"+height+")")
	.call(xAxis)
	.selectAll("text")
	.attr("x", 10)
	.attr("y", 5)
	.attr("text-anchor", null);

	// X-axis years
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0,"+height+")")
	.call(xAxis2)
	.selectAll("text")
	.attr("x", 20)
	.attr("y", -5)
	.attr("text-anchor", null);

	// Y-axis label
	svg.append("text")
	.attr("x", -270)
	.attr("y", -40)
	.attr("transform", "rotate(-90)")
	.text("Duration (minutes)");

	// Y-axis
	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(-10, 0)")
	.call(yAxis);

	});

	svg.append("text")
	.attr("class", "legend")
	.attr("transform", "translate(800, 20)")
	.text("Morning");

	svg.append("circle")
	.attr("cx", 790)
	.attr("cy", 15)
	.attr("r", 3.5)
	.attr("class", "am");

	svg.append("text")
	.attr("class", "legend")
	.attr("transform", "translate(800, 40)")
	.text("Evening");

	svg.append("circle")
	.attr("cx", 790)
	.attr("cy", 35)
	.attr("r", 3.5)
	.attr("class", "pm");


	</script>
	</body>
	</html>