Skip to content

Instantly share code, notes, and snippets.

@gelicia gelicia/_.md

Created Jun 14, 2013
Embed
What would you like to do?
helping kyle
{"description":"helping kyle","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"data.csv":{"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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
year rate
1906 4.7
1907 4.6
1908
1909 7.8
1910 9.7
1911
1912
1913
1914
1915 7.3
1916 7.6
1917
1918 8.2
1919 9.2
1920 6.2
1921 5.2
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
};
var data = tributary.data;
var data2 = data.map(function(d, i){
// uncomment and re-comment for working y axis ;)
// d.year = d3.time.format('%Y').parse(d.year);
var newObj;
if (i < data.length-1 && d.rate !== ""){
newObj = {}
newObj.startYear = d.year;
newObj.startRate = d.rate;
var aheadIdx = 1;
//sometimes i look fear in the face and use while loops in tributary
while (data[i+aheadIdx].rate === "" && (i+aheadIdx <= data.length)){
//console.log(aheadIdx);
aheadIdx++;
}
newObj.endYear = data[i+aheadIdx].year;
newObj.endRate = data[i+aheadIdx].rate;
newObj.isData = aheadIdx == 1 ? true : false;
}
return newObj;
});
data2 = data2.filter(function(d){return d;});
//console.log(data2)
var width = 600 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var x_axis = d3.svg.axis()
.scale(x)
.ticks(4)
.orient('bottom');
var y_axis = d3.svg.axis()
.scale(y)
.orient('left')
.ticks(4);
var svg = d3.select('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
var g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain(d3.extent(data, function(d) { return d.rate; }));
g.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(x_axis);
g.append('g')
.attr('class', 'y axis')
.call(y_axis);
console.log(data2);
g.selectAll('.line')
.data(data2)
.enter()
.append('line')
.attr({
x1 : function(d) { return x(d.startYear); },
y1 : function(d) { return y(d.startRate); },
x2 : function(d) { return x(d.endYear); },
y2 : function(d) { return y(d.endRate); },
'class' : function(d) { return d.isData ? 'line' : 'line line-undefined'; }
});
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.y.axis path {
display: none;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 3px;
}
.line-undefined {
stroke: grey;
stroke-dasharray: 5,5;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.