county school plans mn

_.md

[ Launch: county school plans mn ] 7629114 by gelicia

config.json

{"description":"county school plans mn","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/EBvlaKz.png"}

data.csv

inlet.js

var data = tributary.data;

function countyObj(countyInfo){
  var outArr = [];
  var popArr = [];
  var collArr = [];
  
  for(var prop in countyInfo){
    if (typeof countyInfo[prop] === 'string'){
      if (prop == 'countyName'){
        outArr.countyName = countyInfo[prop];
      } 
      else if (prop == 'metro'){
        outArr.metro = countyInfo[prop];
      }
      else if (prop.substring(0,3) == 'pop'){
        popArr[prop.substring(4)] = Number(countyInfo[prop]);
      }  
      else if (prop.substring(0,11) == 'collOrByond'){
        collArr[prop.substring(12)] = (Number(countyInfo[prop]) / 100) * popArr[prop.substring(12)];
      }     
    }  
  } 
  
  outArr.populations = popArr;
  outArr.collegeAmt = collArr;
  return outArr;   
}   
  
var parseDate = d3.time.format("%Y");
var years = ["1998","2001","2004","2007","2010"];
years = years.map(function(d){return parseDate.parse(d);});

var countyIdx = 79; 

var margin = {top: 20, right: 20, bottom: 30, left: 78},
    width = 348 - margin.left - margin.right,
    height = 204 - margin.top - margin.bottom;

var countyData = countyObj(data[countyIdx]);
 
var x = d3.time.scale()
    .range([0, width])
	.domain(d3.extent(years));
 
var y = d3.scale.linear()
    .range([height, 0])
	.domain([0, d3.max(countyData.populations, function(d,i) {return d; })]);
   
var xAxis = d3.svg.axis()
    .scale(x)
    .tickValues(years)
    .orient("bottom"); 

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
 
var popArea = d3.svg.area()
    .x(function(d,i) { return x(years[i]); })
    .y0(height)
    .y1(function(d) {return y(countyData.populations[d.getFullYear()]); });
  
var schoolArea = d3.svg.area()
    .x(function(d,i) { return x(years[i]); })
    .y0(height)
    .y1(function(d) { return y(countyData.collegeAmt[d.getFullYear()]); });

var stateAvgLine = d3.svg.line()
	.x(function(d,i) { return x(years[i]); })
    .y(function(d) { 
	  var population = countyData.populations[d.getFullYear()];
      var stateInfo = data[data.length-1]; 
      return y((stateInfo['collOrByond-'+d.getFullYear()]/100) * population); 
    });  

var svg = d3.select("svg")
  //  .attr("width", width + margin.left + margin.right)
   // .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
   
 svg.append("path")
      .datum(years) 
      .attr("class", "popArea")
      .attr("d", popArea);
   
  svg.append("path")
      .datum(years)
      .attr("class", "schoolArea")
      .attr("d", schoolArea);

  svg.append("path")
      .datum(years)
      .attr("class", "stateLine")
      .attr("d", stateAvgLine);

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

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

var index = svg.append("g")
.attr("transform", "translate(0," + 179 + ")");

index.append("rect")
.attr({
  height: 20,
  width: 20,
  'class': 'popArea'
})

index.append("rect")
.attr({
  y: 25,
  height: 20,
  width: 20,
  'class': 'schoolArea'
});

index.append("path")
.attr({
  d : "M0,50L22,50",
  "transform": "translate(0," + 11 + ")",
  'class': 'stateLine'
})

index.append("text").attr({
  x: 25,
  y: 16
}).text("Students Surveyed")

index.append("text").attr({
  x: 25,
  y: 41
}).text("Students Planning on Going to College or Beyond")

index.append("text").attr({
  x: 25,
  y: 66
}).text("State Avg % of Students Planning on Going to College or Beyond")

style.css

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

text{
	font-size:12px
}

.popArea {
  fill: #007AFF;
}

.schoolArea {
  fill: #1750CA;
}

.stateLine {
  fill: none;
  stroke: #FFFF00;
  stroke-width: 3;
  stroke-dasharray: 5,5;
}