helping cirenyc

_.md

[ Launch: Tributary inlet ] 6174583 by gelicia
[ Launch: Tributary inlet ] 6174383 by emilford

config.json

{"description":"helping cirenyc","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},"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/ODOMyuK.png"}

data.json

[{"label":"Main Building","usage":{"electric":{"value":170700.0,"unit":"kWh"},"gas":{"value":112.0,"unit":"mcf"},"total":{"unit":"BTUs","value":593628400.0}},"cost":{"electric":{"value":19086.34,"unit":"$"},"gas":{"value":3104.49,"unit":"$"},"total":{"unit":"$","value":22190.83}}},{"label":"Greenhouse","usage":{"electric":{"value":165600.0,"unit":"kWh"},"gas":{"value":681.0,"unit":"mcf"},"total":{"unit":"BTUs","value":633127200.0}},"cost":{"electric":{"value":18516.09,"unit":"$"},"gas":{"value":4258.51,"unit":"$"},"total":{"unit":"$","value":22774.6}}}]

inlet.js

var json = tributary.data

var chart_type, data, height, location, svg, width, x, xAxis, y, yAxis;

var margin = {top: 29, right: 34, bottom: 30, left: 66},
    width = 405 - margin.left - margin.right,
    height = 367 - margin.top - margin.bottom;

chart_type = "usage"

data = json.map(function(d) {
  return {
    label: d.label,
    value: d[chart_type]["total"].value
  };
});


x = d3.scale.ordinal().rangeRoundBands([0, width], 0.1);
y = d3.scale.linear().range([height, 0]);

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

yAxis = d3.svg.axis().scale(y).orient("left").tickSize(-width, 3, 0).tickFormat(d3.format(".2s"));

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 + ")");

x.domain(data.map(function(d) {
  return d.label;
}));
//y.domain([0, d3.max(data, function(d){return d.value;})]);

var yDomain = d3.extent(data, function(d){return d.value;});
y.domain([yDomain[0] - (yDomain[0]/100), yDomain[1]]);

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

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

svg.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar").attr("x", function(d) {
  return x(d.label);
}).attr("width", x.rangeBand()).attr("y", function(d) {
  return y(d.value);
}).attr("height", function(d) {
  return height - y(d.value);
});

style.css

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

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}