workbars

_.md

[ Launch: workbars ] 8423329 by davidshinn

config.json

{"description":"workbars","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/S9CmZdz.png"}

inlet.js

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

/*
 * Change colors here to tinker with colors
 */
var data_age = [
  {name: "youngest", color: "#A63603"},
  {name: "young", color: "#D94801"},
  {name: "old", color: "#fd8d3c"},
  {name: "oldest", color: "#FDD0A2"}
];

var data_change = [
  {name: "los", color: "#e31a1c"},
  {name: "dis", color: "#FB9A99"},
  {name: "won", color: "#CCEBC5"},
  {name: "adj", color: "#fec44f"},
  {name: "unc", color: "#CBD5E8"},
  {name: "new", color: "#1b9e77"}

];

var data_risk = [
  {name: "c", color: "#756bb1"},
  {name: "u", color: "#bcbddc"},
  {name: "p", color: "#efedf5"}
]

var data_qtr = [
  {name: "pq", color: "#006837"},
  {name: "cq", color: "#31a354"},
  {name: "q+1", color: "#78c679"},
  {name: "q+2", color: "#c2e699"},
  {name: "q+3", color: "#D9F0A3"},
  {name: "q+4", color: "#E7F3CB"} 
];

/*
 * Deslected color is combination of color and opacity (opacity between 0 and 1)
 */
var data_deselected = [
  {name: "deselected", color: "#ccc"}
];
deselected_opacity = 0.50;

/*
 * Do not edit below
 */

var y_offset = 113;
var left_margin = 30;
var top_margin = 30;

var g_age = svg.append("g")
    .attr("transform", "translate(" + left_margin + "," + (y_offset*0 + top_margin) + ")");

var g_change = svg.append("g")
    .attr("transform", "translate(" + left_margin + "," + (y_offset*1 + top_margin) + ")");

var g_risk = svg.append("g")
    .attr("transform", "translate(" + left_margin + "," + (y_offset*2 + top_margin) + ")");

var g_qtr = svg.append("g")
    .attr("transform", "translate(" + left_margin + "," + (y_offset*3 + top_margin) + ")");

var g_deselected = svg.append("g")
    .attr("transform", "translate(" + left_margin + "," + (y_offset*4 + top_margin) + ")");


var chart = barChart()
	.data(data_age);
chart(g_age);

chart.data(data_change);
chart(g_change);

chart.data(data_risk);
chart(g_risk);

chart.data(data_qtr);
chart(g_qtr);

chart.data(data_deselected).opacity(deselected_opacity);
chart(g_deselected);


function barChart() {

    var _svgWidth = 747,
        _svgHeight = 146,
        _margin = {top: 30, left: 30, right: 30, bottom: 30},
        _mainLabel = "Label",
        _x = d3.scale.ordinal(),
        _y = d3.scale.linear(),
        _data = [],
        _opacity = null,
        _bodyG;

    chart = function (g) {
        _width = _svgWidth - _margin.left - _margin.right;
        _height = _svgHeight - _margin.top - _margin.bottom;

        _x.domain(_data.map(function(d) { return d.name; })).rangeRoundBands([0, _width]);
        _y.domain([0, _height]).range([_height, 0]);
      
        g.selectAll('rect')
            .data(_data)
            .enter()
          .append('rect')
            .attr("x", function(d) { return _x(d.name); })
            .attr("y", 0)
            .attr("height", _height)
            .attr("width", _x.rangeBand())
            .style("fill", function(d) { return d.color; })
            .style("fill-opacity", _opacity)
        g.selectAll('text')
            .data(_data)
            .enter()
          .append('text')
            .attr("x", function(d) { return _x(d.name) + _x.rangeBand() / 2; })
            .attr("y", _height / 2)
            .text(function(d) { return d.name; })
            .style("fill", "black")
            .style("font-size", "10px")
            .style("text-anchor", "middle")
            .style("font-family", '"Helvetica Neue",Helvetica,Arial,sans-serif');
    };
  
    chart.data = function(_) {
        if (!arguments.length) return _data;
        _data = _;
        return chart;
    };

    chart.margin = function(_) {
        if (!arguments.length) return _margin;
        _margin = _;
        return chart;
    };

      chart.opacity = function(_) {
        if (!arguments.length) return _opacity;
        _opacity = _;
        return chart;
    };

  
    return chart;
}