kiera stream data

_.md

[ Launch: kiera stream data ] 6093638 by bollig

config.json

{"description":"kiera stream data","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"streamdata.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}},"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,"thumbnail":"http://i.imgur.com/V7ReKqG.png"}

inlet.js

var data = tributary.streamdata
var svg = d3.select("svg");

var margin = {top: 20, right: 20, bottom: 30, left: 40};
var width = 775 - margin.left - margin.right;
var height = 146 - margin.top - margin.bottom;

var streamOpacity = 0.9;
var barOpacity = .0;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 1);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

var names = d3.keys(data[0]).filter(function(key) { return key !== "year"; })
color.domain(names);

var stack = d3.layout.stack().offset("wiggle")


processed = data.map(function(d) {
  var y0 = 0;
  var ret = {
    name: d.name,
    year: d.year,
    values: d
  }
  ret.months = names.map(function(name) { return { year: d.year, name: name, y0: y0, y1: y0 += +d[name]}; });
  ret.total = ret.months[ret.months.length - 1].y1;
  return ret
});
//processed.sort(function(a, b) { return b.total - a.total; });

x.domain(processed.map(function(d) { return d.year; }));
y.domain([0, d3.max(processed, function(d) { return d.total; })]);


var layers = names.map(function(name) {
  var layer = [];
  for(var i = 0; i < data.length; i++) {
    var d = null;
    processed[i].months.forEach(function(p) { if(p.name == name) d = p;});
    layer.push(d);
  }
  console.log("name",name)
  return {
    months: layer,
    name: name
  };
})


var area = d3.svg.area()
  .x(function(d,i) { return x(i); })
  .y0(function(d) { return y(d.y0); })
  .y1(function(d) { return y(d.y1); })
  .interpolate("cardinal")


svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
.selectAll("text")
.attr("transform", "translate(20, 20)rotate(45)")

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


var state = svg.selectAll(".state")
    .data(processed)
  .enter().append("g")
    .attr("class", "g")
    .attr("transform", function(d) { return "translate(" + x(d.year) + ",0)"; });

state.selectAll("rect")
    .data(function(d) { return d.months; })
  .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.y1); })
    .attr("height", function(d) { return y(d.y0) - y(d.y1); })
    .style("fill", function(d) { return color(d.name); })
  .style("opacity", barOpacity)

svg.selectAll("path")
    .data(layers)
  .enter().append("path").classed("stream", true)
  .attr("d", function(d) { return area(d.months) })
  .style("fill", function(d,i) { return color(d.name); })
  .style("stroke", function(d,i) { return color(d.name); })
  .style("opacity", streamOpacity)


var legend = svg.selectAll(".legend")
    .data(color.domain().slice().reverse())
  .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

legend.append("text")
    .attr("x", width - 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d; });

streamdata.csv

style.css

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

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

.hover {
  opacity: 1
}