mcglincy/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    Hyde Park 2/1 $/SqFt

  
## data.tsv

          
            Year
            4009AveD
            Max
            Avg
            Min

            
              2004
              413.76
              350.77
              223.04
              159.48

            
              2005
              413.76
              290.54
              240.75
              167.42

            
              2006
              413.76
              299.67
              256.11
              211.44

            
              2007
              413.76
              445.60
              309.62
              250.00

            
              2008
              413.76
              366.42
              326.97
              274.37

            
              2009
              413.76
              316.82
              259.29
              145.65

            
              2010
              413.76
              319.01
              251.67
              157.59

            
              2011
              413.76
              338.01
              255.15
              199.62

            
              2012
              413.76
              305.56
              274.12
              240.67

            
              2013
              413.76
              407.07
              327.33
              218.73

## 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;
}

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

</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 70, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y").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()
    .x(function(d) { return x(d.Year); })
    .y(function(d) { return y(d.Price); });

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) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year"; }));

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

  var priceCats = color.domain().map(function(name) {
    return {
      name: name,
      values: data.map(function(d) {
        return {Year: d.Year, Price: +d[name]};
      })
    };
  });

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

  y.domain([
    d3.min(priceCats, function(p) { return d3.min(p.values, function(v) { return v.Price; }); }),
    d3.max(priceCats, function(p) { return d3.max(p.values, function(v) { return v.Price; }); })
  ]);

  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("class", "y label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price");

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

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

  priceCat.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.Year) + "," + y(d.value.Price) + ")"; })
      .attr("x", 3)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

});

</script>
Year	4009AveD	Max	Avg	Min
2004	413.76	350.77	223.04	159.48
2005	413.76	290.54	240.75	167.42
2006	413.76	299.67	256.11	211.44
2007	413.76	445.60	309.62	250.00
2008	413.76	366.42	326.97	274.37
2009	413.76	316.82	259.29	145.65
2010	413.76	319.01	251.67	157.59
2011	413.76	338.01	255.15	199.62
2012	413.76	305.56	274.12	240.67
2013	413.76	407.07	327.33	218.73
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

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

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	var margin = {top: 20, right: 70, bottom: 30, left: 50},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var parseDate = d3.time.format("%Y").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()
	.x(function(d) { return x(d.Year); })
	.y(function(d) { return y(d.Price); });

	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) {
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year"; }));

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

	var priceCats = color.domain().map(function(name) {
	return {
	name: name,
	values: data.map(function(d) {
	return {Year: d.Year, Price: +d[name]};
	})
	};
	});

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

	y.domain([
	d3.min(priceCats, function(p) { return d3.min(p.values, function(v) { return v.Price; }); }),
	d3.max(priceCats, function(p) { return d3.max(p.values, function(v) { return v.Price; }); })
	]);

	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("class", "y label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Price");

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

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

	priceCat.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.Year) + "," + y(d.value.Price) + ")"; })
	.attr("x", 3)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });

	});

	</script>