povrates

_.md

[ Launch: povrates ] 44161e0bf33b4d4b38e3 by mattpetters

config.json

{"description":"povrates","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"povrates.json":{"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,"ajax-caching":true}

inlet.js

var svg = d3.select("svg");

var cHeight = 500;



var data = tributary.povrates.povertyRates;
console.log(data);


var maxRate = d3.max(data, function(d) {
  return d.rate
});
var minRate = d3.min(data, function(d) {
  return d.rate
});
console.log(maxRate);
console.log(minRate);

var yScale = d3.scale.linear()
	.domain([11, 16])
	.range([cHeight, 0]);

var xScale = d3.scale.ordinal()
.domain(d3.range(data.length))
.rangeBands([0, 500], 1.11104);

var gpath = svg.append("g").attr("transform", "translate(68, 19)");
var gaxis = svg.append("g").attr("transform","translate(0,0)");

var bars = g.selectAll("rect").data(data);

var line = d3.svg.line()
.x(function(d,i) { return xScale(i) })
.y(function(d,i) { return yScale(d.rate) })
.interpolate("basis");

gpath.append("path")
.attr("d", line(data))
.attr("id", "myPath")
.style({
  fill: "none",
  stroke: "#ff6e00",
  "stroke-width":"6"
}).on('mouseover', function(d,i) {
  d3.select(this)
    console.log(this)
});

//var length = myPath.getTotalLength();

//var myPoint = myPath.getPointAtLength(length);



var axisScale = d3.scale.linear()
.domain([16, 11])
.range([0, 500])

var leftAxis = d3.svg.axis()
.scale(axisScale)
.orient("left") //left, right, top
.ticks(6);

var bottomAxis = d3.svg.axis()
.scale(axisScale)
.orient("bottom") //left, right, top
.ticks(6);

leftAxis(g)
gpath.attr("transform", "translate(149, 122)")
gpath.selectAll("path")
  .style({ fill: "none", stroke: "#ff6600"})
gpath.selectAll("line")
  .style({ stroke: "#00efc3"})

//d3.select("g").append("svg:circle")
//		.attr("cx", myPoint.x)
//		.attr("cy", myPoint.y)
//		.attr("r", 4.5);

var circles = gpath.selectAll("circle").data(data);

circles.enter().append("circle").attr({
  x:"",
  y:"",
  r:6
});

povrates.json

{
  "povertyRates":[
    {"year":"1980","rate":"13"},
	{"year":"1981", "rate":"14"},
    {"year":"1982", "rate":"15"},
    {"year":"1983", "rate":"15.2"},
	{"year":"1984", "rate":"14.4"},
	{"year":"1985", "rate":"14"},
	{"year":"1986", "rate":"13.6"},  
	{"year":"1987", "rate":"13.4"},
	{"year":"1988", "rate":"13"}, 
	{"year":"1989", "rate":"12.8"},
	{"year":"1990", "rate":"13.5"},
	{"year":"1991", "rate":"14.2"},
	{"year":"1992", "rate":"14.8"},
	{"year":"1993", "rate":"15.1"},
	{"year":"1994", "rate":"14.5"},
	{"year":"1995", "rate":"13.8"},
	{"year":"1996", "rate":"13.7"},
	{"year":"1997", "rate":"13.3"},
	{"year":"1998", "rate":"12.7"},
	{"year":"1999", "rate":"11.9"},
	{"year":"2000", "rate":"11.3"},
	{"year":"2001", "rate":"11.7"},
	{"year":"2002", "rate":"12.1"},
	{"year":"2003", "rate":"12.5"}
	]
}