steamgraph

_.md

[ Launch: steamgraph ] 8964404 by Cynddl

config.json

{"description":"steamgraph","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"inline-console":true,"thumbnail":"http://i.imgur.com/Lj8oqCZ.gif"}

data.json

[
  {
    "name": "apples",
    "values": [
      { "x": 0, "y":  91},
      { "x": 1, "y": 48},
      { "x": 2, "y": 172},
      { "x": 3, "y": 223}
    ]
  },
  {  
    "name": "oranges",
    "values": [
      { "x": 0, "y":  9},
      { "x": 1, "y": 163},
      { "x": 2, "y": 47},
      { "x": 3, "y": 15}
    ]
  },
  {  
    "name": "truc",
    "values": [
      { "x": 0, "y":  9},
      { "x": 1, "y": 4},
      { "x": 2, "y": 26},
      { "x": 3, "y": 57}
    ]
  }
]

inlet.js

var layers = tributary.data;

var m = layers[0].values.length; // number of samples per layer
var width = tributary.sw,
    height = tributary.sh,
    mx = m - 1,
    my = 350;

var stack = d3.layout.stack()
    .offset("wiggle")
    .values(function(d) { return d.values; });

var svg = d3.select("svg")
            .append("svg:g")

var color = d3.scale.linear()
    .range(["#FF0C00", "#FFC000"]);


var x = d3.scale.linear()
    .domain([0, m - 1])
    .range([0, width]);

var y = d3.scale.linear ()
    .domain([0, 350])
    .range([height, 0]);

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

svg.selectAll("path")
    .data(stack(layers))
    .enter().append("path")
    .attr("d", function(d) { return area(d.values); })
    .style("fill", function(d, i) { return color(i); });