hoschi/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This line chart is constructed from a TSV file storing the daily average temperatures of New York, San Francisco and Austin over the last year. The chart employs conventional margins and a number of D3 features:

d3.tsv - load and parse data
d3.time.format - parse dates
d3.time.scale - x-position encoding
d3.scale.linear - y-position encoding
d3.scale.category10, a d3.scale.ordinal - color encoding
d3.extent, d3.min and d3.max - compute domains
d3.keys - compute column names
d3.svg.axis - display axes
d3.svg.line - display line shape


## data.tsv

          
            date
            New York
            San Francisco
            Austin

            
              20120801
              75.0
              55.4
              86.5

            
              20120802
              77.7
              54.4
              85.8

            
              20120803
              79.7
              53.7
              85.3

            
              20120804
              79.6
              54.1
              86.0

            
              20120805
              81.5
              57.8
              84.2

            
              20120806
              80.0
              58.2
              81.9

            
              20120807
              75.7
              58.0
              86.5

            
              20120808
              77.8
              57.0
              86.1

            
              20120809
              78.6
              55.0
              86.8

            
              20120810
              77.8
              54.8
              88.0

            
              20120811
              78.5
              53.0
              85.1

            
              20120812
              78.8
              52.5
              87.4

            
              20120813
              78.6
              53.3
              88.0

            
              20120814
              76.8
              53.9
              88.0

            
              20120815
              76.7
              56.2
              87.2

            
              20120816
              75.9
              57.1
              86.1

            
              20120817
              77.6
              55.3
              86.8

            
              20120818
              72.6
              56.2
              84.9

            
              20120819
              70.4
              54.3
              76.8

            
              20120820
              71.8
              53.1
              80.6

            
              20120821
              73.6
              53.4
              80.0

            
              20120822
              74.7
              54.5
              78.2

            
              20120823
              74.6
              55.7
              79.1

            
              20120824
              76.0
              54.8
              81.9

            
              20120825
              76.2
              53.8
              84.7

            
              20120826
              73.4
              56.5
              83.5

            
              20120827
              74.6
              58.3
              82.1

            
              20120828
              79.4
              58.7
              84.0

            
              20120829
              74.7
              57.5
              85.7

            
              20120830
              73.5
              55.9
              87.2

            
              20120831
              77.9
              55.4
              82.9

            
              20120901
              80.7
              55.7
              84.8

            
              20120902
              75.1
              53.1
              83.9

            
              20120903
              73.5
              53.5
              85.5

            
              20120904
              73.5
              52.5
              86.4

            
              20120905
              77.7
              54.5
              85.8

            
              20120906
              74.2
              56.3
              85.4

            
              20120907
              76.0
              56.4
              85.3

            
              20120908
              77.1
              56.5
              81.9

            
              20120909
              69.7
              56.4
              74.8

            
              20120910
              67.8
              55.4
              71.6

            
              20120911
              64.0
              56.2
              75.9

            
              20120912
              68.1
              55.7
              82.1

            
              20120913
              69.3
              54.3
              80.5

            
              20120914
              70.0
              55.2
              70.0

            
              20120915
              69.3
              54.3
              71.2

            
              20120916
              66.3
              52.9
              70.3

            
              20120917
              67.0
              54.8
              72.1

            
              20120918
              72.8
              54.8
              73.7

            
              20120919
              67.2
              56.8
              72.7

            
              20120920
              62.1
              55.4
              71.7

            
              20120921
              64.0
              55.8
              72.9

            
              20120922
              65.5
              55.9
              73.1

            
              20120923
              65.7
              52.8
              75.6

            
              20120924
              60.4
              54.5
              78.3

            
              20120925
              63.2
              53.3
              78.3

            
              20120926
              68.5
              53.6
              79.6

            
              20120927
              69.2
              52.1
              76.4

            
              20120928
              68.7
              52.6
              77.2

            
              20120929
              62.5
              53.9
              75.2

            
              20120930
              62.3
              55.1
              71.9

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y%m%d").parse;

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

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

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });

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

d3.tsv("data.tsv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });

  var cities = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {date: d.date, temperature: +d[name]};
      })
    };
  });

  x.domain(d3.extent(data, function(d) { return d.date; }));

  y.domain([
    d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
    d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
  ]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Temperature (ºF)");

  var city = svg.selectAll(".city")
      .data(cities)
    .enter().append("g")
      .attr("class", "city");

  city.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .style("stroke", function(d) { return color(d.name); });

  city.append("text")
      .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
      .attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });
});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
date	New York	San Francisco	Austin
20120801	75.0	55.4	86.5
20120802	77.7	54.4	85.8
20120803	79.7	53.7	85.3
20120804	79.6	54.1	86.0
20120805	81.5	57.8	84.2
20120806	80.0	58.2	81.9
20120807	75.7	58.0	86.5
20120808	77.8	57.0	86.1
20120809	78.6	55.0	86.8
20120810	77.8	54.8	88.0
20120811	78.5	53.0	85.1
20120812	78.8	52.5	87.4
20120813	78.6	53.3	88.0
20120814	76.8	53.9	88.0
20120815	76.7	56.2	87.2
20120816	75.9	57.1	86.1
20120817	77.6	55.3	86.8
20120818	72.6	56.2	84.9
20120819	70.4	54.3	76.8
20120820	71.8	53.1	80.6
20120821	73.6	53.4	80.0
20120822	74.7	54.5	78.2
20120823	74.6	55.7	79.1
20120824	76.0	54.8	81.9
20120825	76.2	53.8	84.7
20120826	73.4	56.5	83.5
20120827	74.6	58.3	82.1
20120828	79.4	58.7	84.0
20120829	74.7	57.5	85.7
20120830	73.5	55.9	87.2
20120831	77.9	55.4	82.9
20120901	80.7	55.7	84.8
20120902	75.1	53.1	83.9
20120903	73.5	53.5	85.5
20120904	73.5	52.5	86.4
20120905	77.7	54.5	85.8
20120906	74.2	56.3	85.4
20120907	76.0	56.4	85.3
20120908	77.1	56.5	81.9
20120909	69.7	56.4	74.8
20120910	67.8	55.4	71.6
20120911	64.0	56.2	75.9
20120912	68.1	55.7	82.1
20120913	69.3	54.3	80.5
20120914	70.0	55.2	70.0
20120915	69.3	54.3	71.2
20120916	66.3	52.9	70.3
20120917	67.0	54.8	72.1
20120918	72.8	54.8	73.7
20120919	67.2	56.8	72.7
20120920	62.1	55.4	71.7
20120921	64.0	55.8	72.9
20120922	65.5	55.9	73.1
20120923	65.7	52.8	75.6
20120924	60.4	54.5	78.3
20120925	63.2	53.3	78.3
20120926	68.5	53.6	79.6
20120927	69.2	52.1	76.4
20120928	68.7	52.6	77.2
20120929	62.5	53.9	75.2
20120930	62.3	55.1	71.9
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20, right: 80, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%Y%m%d").parse;

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

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

	var color = d3.scale.category10();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var line = d3.svg.line()
	.interpolate("basis")
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.temperature); });

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

	d3.tsv("data.tsv", function(error, data) {
	if (error) throw error;

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

	data.forEach(function(d) {
	d.date = parseDate(d.date);
	});

	var cities = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {date: d.date, temperature: +d[name]};
	})
	};
	});

	x.domain(d3.extent(data, function(d) { return d.date; }));

	y.domain([
	d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
	d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
	]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Temperature (ºF)");

	var city = svg.selectAll(".city")
	.data(cities)
	.enter().append("g")
	.attr("class", "city");

	city.append("path")
	.attr("class", "line")
	.attr("d", function(d) { return line(d.values); })
	.style("stroke", function(d) { return color(d.name); });

	city.append("text")
	.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
	.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")"; })
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });
	});

	</script>