helping kyle

_.md

[ Launch: helping kyle ] 5779073 by gelicia

config.json

{"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}

data.csv

inlet.js

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'; }
  
});

 

style.css

.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;
}