mcglincy/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    Brinwood sales 2005-2013.

  
## data.tsv

          
            Year
            El Paso house
            Max
            Avg
            Min

            
              2005
              370.45
              199.1
              142.34
              79.54

            
              2006
              370.45
              263.11
              174.13
              125.29

            
              2007
              370.45
              273.94
              208.72
              138.82

            
              2008
              370.45
              308.82
              229.43
              150.82

            
              2009
              370.45
              257.27
              211.72
              184.79

            
              2010
              370.45
              229.83
              179.7
              116.99

            
              2011
              370.45
              250.54
              193.92
              117.11

            
              2012
              370.45
              281.39
              237.65
              173.68

            
              2013
              370.45
              257.16
              211.39
              154.54

## 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("$ / sqft");

  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	El Paso house	Max	Avg	Min
2005	370.45	199.1	142.34	79.54
2006	370.45	263.11	174.13	125.29
2007	370.45	273.94	208.72	138.82
2008	370.45	308.82	229.43	150.82
2009	370.45	257.27	211.72	184.79
2010	370.45	229.83	179.7	116.99
2011	370.45	250.54	193.92	117.11
2012	370.45	281.39	237.65	173.68
2013	370.45	257.16	211.39	154.54
	<!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("$ / sqft");

	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>