Tributary inlet

_.md

[ Launch: Tributary inlet ] 5036930 by poezn

config.json

{"description":"Tributary inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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 data = [
  {"race": "Asian",             "data": [22,17,20,20,26,26,25,21,29] },
  {"race": "Black",             "data": [34,28,31,34,37,34,32,39,38] },
  {"race": "Hispanic / Latin",  "data": [22,19,24,19,23,26,26,21,30] },
  {"race": "Indian",            "data": [18,21,25,18,24,27,21,33,30] },
  {"race": "Middle Eastern",    "data": [27,21,25,23,23,32,23,32,28] },
  {"race": "Native American",   "data": [31,27,29,27,36,35,34,32,34] },
  {"race": "Other",             "data": [30,24,27,28,29,32,32,35,33] },
  {"race": "Pacific Islander",  "data": [23,25,24,24,28,29,22,30,29] },
  {"race": "White",             "data": [21,21,22,20,25,27,26,23,29] }
];

var domain = _.flatten(_.pluck(data, 'data')),
    min = d3.min(domain),
    max = d3.max(domain),
    median = (min + max) / 2;

var sq_width = 45;

var color = d3.scale.linear().domain([min, median, max]).range(['#f8696b', '#fcea84', '#8dca7e']);

var replies = g.selectAll('g.replies')
    .data(data)
    .enter().append('g')
        .attr('height', function(d, i) {
            return d.data.length * sq_width;
        })
        .attr('width', sq_width)
        .attr('transform', function(d, i) {
            return "translate(" + [50 + i * sq_width, 50] + ")";
        });
    
replies.selectAll("rect")
    .data(function(d, i) {
        return d.data;
    })
    .enter().append("rect")
        .attr('class', 'reply')
        .attr('width', sq_width)
        .attr('height', sq_width)
        .attr('fill', function(d, i) {
            return color(d);
        })
        .attr('y', function(d, i) {
            return i * sq_width;
        });

        var svg_legend = g.selectAll('g.legend')
        	.data([0])
        	.enter().append('g')
        	.attr('class', 'legend')
        	.attr('transform', 'translate(50, 500)');


// ==== LEGEND ====

var w = 500,
    legend_domain = d3.range(min, max);

// We wanna have a group element for all square-text combinations
var legend = svg_legend.selectAll('g')
    .data(legend_domain)
    .enter().append('g');

// add the squares
legend.append('rect')
        .attr('class', 'legendblock')
        .attr('x', function(d, i) {
            return w / legend_domain.length * i;
        })
        .attr('width', w / legend_domain.length)
        .attr('height', w / legend_domain.length)
        .attr('fill', function(d, i) { // the fill uses the same color function as the graph!
            return color(d);
        });

// add the texts
legend.append('text')
    .text(function(d, i) {
        return d;
    })
    .attr('x', function(d, i) {
        return w / legend_domain.length * i + 3;
    })
    .attr('width', w / legend_domain.length)
    .attr('height', w / legend_domain.length)
    .attr('y', 37)
    .attr('text-anchor', 'start')
    .attr('font-family', 'Helvetica')
    .attr('font-size', 14);