Rawr chart

_.md

[ Launch: Tributary inlet ] 6232741 by tarvaina

config.json

{"description":"Rawr chart","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},"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,"thumbnail":"http://i.imgur.com/LrQI1M1.png"}

data.json

[
  {
    "name": "Apple",
    "eaters": 16,
    "consumptionPerEater": 2.208
  },
  {
    "name": "Apple",
    "eaters": 17,
    "consumptionPerEater": 1.549062144
  },
  {
    "name": "Pear",
    "eaters": 8,
    "consumptionPerEater": 3.5
  }
]

inlet.js

var data = tributary.data;

var width = tributary.sw;
var height = tributary.sh;
var bottomAxisAreaHeight = 30;
var leftAxisAreaWidth = 51;

var chartAreaHeight = height - bottomAxisAreaHeight;
var chartAreaWidth = width - leftAxisAreaWidth;

var colors = d3.scale.category20();


var rawrLayout = function(data) {
  cumulativeSum = 0;

  for (i = 0; i < data.length; ++i) {
    data[i].x0 = cumulativeSum;
    cumulativeSum += data[i].eaters;
  }
}

 
rawrLayout(data);
var yMax = d3.max(data, function(d) { return d.consumptionPerEater; });
var lastDatum = data[data.length-1];
var xMax = lastDatum.x0 + lastDatum.eaters;

console.log([xMax, yMax]);

var xScale = d3.scale.linear()
  .domain([0, xMax])
  .range([0, chartAreaWidth]);

var yScale = d3.scale.linear()
  .domain([0, yMax])
  .range([chartAreaHeight, 0]);

var svg = d3.select("svg");

var bottomAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + [leftAxisAreaWidth, chartAreaHeight] + ")")
  .call(bottomAxis);

var leftAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left");
svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(" + [leftAxisAreaWidth, 0] + ")")
  .call(leftAxis);

var dataArea = svg.append("g")
  .attr("class", "data")
  .attr("transform", "translate(" + [leftAxisAreaWidth, 0] + ")");

var rects = dataArea.selectAll("rect.data").data(data).enter()
  .append("rect")
  .attr("x", function (d) { return xScale(d.x0); })
  .attr("y", function (d) { return yScale(d.consumptionPerEater); })
  .attr("width", function(d) { return xScale(d.eaters); })
  .attr("height", function(d) { return yScale(0) - yScale(d.consumptionPerEater); } )
  .attr("fill", function(d, i) { return colors(i); });

style.css

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

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}

.data rect {
    shape-rendering: crispEdges;
}