mcglincy/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    Brinwood sales 2005-2013

  
## data.tsv

          
            Year
            El Paso house
            Max
            Avg
            Min

            
              2005
              489000
              309000
              195640
              136000

            
              2006
              489000
              399900
              234859
              160000

            
              2007
              489000
              417500
              282734
              211000

            
              2008
              489000
              500000
              320259
              214000

            
              2009
              489000
              379000
              294450
              190000

            
              2010
              489000
              340000
              251575
              190000

            
              2011
              489000
              375000
              237611
              135000

            
              2012
              489000
              365000
              296695
              197000

            
              2013
              489000
              449000
              310419
              234900

## 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	El Paso house	Max	Avg	Min
2005	489000	309000	195640	136000
2006	489000	399900	234859	160000
2007	489000	417500	282734	211000
2008	489000	500000	320259	214000
2009	489000	379000	294450	190000
2010	489000	340000	251575	190000
2011	489000	375000	237611	135000
2012	489000	365000	296695	197000
2013	489000	449000	310419	234900
	<!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>