Tributary inlet

_.md

[ Launch: Tributary inlet ] 4979923 by trinary

config.json

{"description":"Tributary inlet","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}},"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}

inlet.js

var raw_series = [{"note": "ICA SUPERMARKET", "date": "2013-01-18T20:16:13", "amount": 321.0}, {"note": "ICA SUPERMARKET", "date": "2013-01-19T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-01-20T20:16:13", "amount": 174.0}, {"note": "ICA SUPERMARKET", "date": "2013-01-21T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-01-22T20:16:13", "amount": 293.0}, {"note": "ICA SUPERMARKET", "date": "2013-01-23T20:16:13", "amount": 283.0}, {"note": "ICA SUPERMARKET", "date": "2013-01-24T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-01-25T20:16:13", "amount": 373.0}, {"note": "ICA SUPERMARKET", "date": "2013-01-26T20:16:13", "amount": 556.0}, {"note": "ICA SUPERMARKET", "date": "2013-01-27T20:16:13", "amount": 199.0}, {"note": "ICA SUPERMARKET", "date": "2013-01-28T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-01-29T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-01-30T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-01-31T20:16:13", "amount": 50.0}, {"note": "ICA SUPERMARKET", "date": "2013-02-01T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-02T20:16:13", "amount": 110.0}, {"note": "ICA SUPERMARKET", "date": "2013-02-03T20:16:13", "amount": 196.0}, {"note": "ICA SUPERMARKET", "date": "2013-02-04T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-05T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-06T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-07T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-08T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-09T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-10T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-11T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-12T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-13T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-14T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-15T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-16T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-17T20:16:13", "amount": 0}, {"note": "ICA SUPERMARKET", "date": "2013-02-18T20:16:13", "amount": 0}];

/* Rendering options */
var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

/* Parse the dates in the raw_series data */
var format = d3.time.format('%Y-%m-%dT%H:%M:%S');

raw_series.forEach(function (d) {
    d.date = format.parse(d.date);
    d.value = d.amount;
});


var x = d3.time.scale()
        .range([0, width]);

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

/* I don't know why I have this */
var z = d3.scale.category20c();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.days)

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

/**
 * Create the stacked layout
 *
 */
var stack = d3.layout.stack()
    .offset('wiggle')
    .values(function (d) { return d.values; })
    .x(function (d) { return d.date; })
    .y(function (d) { return d.amount; });

/**
 * Generated nested array of the series
 */
var nest = d3.nest()
    .key(function (d) { return d.note })
    /*.key(function (d) { return d.date })*/

var area = d3.svg.area()
        .interpolate('monotone')
        .x(function (d) { return x(d.date); })
        .y0(function (d) { return y(d.y0); })
        .y1(function (d) { return y(d.y0 + d.y); });
var dates = raw_series.map(function(d) { return d.date;})
var svg = d3.select('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

var layers = stack(nest.entries(raw_series));
x.domain(d3.extent(raw_series, function (d) { return d.date; }));
y.domain([0, d3.max(raw_series, function (d) { return d.y0 + d.y; })]);
console.log(y.domain());

svg.selectAll(".layer")
    .data(layers)

  .enter().append("path")
    .attr("class", "layer")
    .attr("d", function(d) { return area(d.values); })
    .style("fill","#933");

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

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