CONFER line display

A line display of consensus state

by bje

HTML

<div id="chart"></div>

JavaScript

function chart() {
    "use strict";
    var width = 500,
        height = 50,
        speed = 5000,
        easing = "elastic-in",
        value = function (d) { return d[1]; },
        label = function (d) { return d[0]; },
        color = d3.scale.ordinal().range(['#d7191c', '#fdae61', '#e5e5ab', '#a6d96a', '#1a9641']),
        margins = [180, 30],
        sort = null;

    function my(selection) {
        selection.each(function (data) {
            var pie = d3.layout.pie().sort(sort).value(function (d) { return d[0]; });
            
            // Fix the values and labels into greedily evaluated arrays
            // This allows precomputation of sizes and values
            data = data.map(function (d, i) {
                return [Math.abs(value.call(data, d, i)), label.call(data, d, i)];
            });
            
            var total = d3.sum(data, function(d) { return d[0]; });
            total -= data[data.length - 1][0];
            var offset = 0;            
            var stops = data.map(function(d, i) {
                
                var out = {offset: offset, color: color(i), value: d[0]};
                offset += d[0] * 1.0 / total;
                return out;
            });
            console.log(pie(data), stops);
            
            stops = [];
            var nom = pie(data);
            for (var i = 0; i < nom.length; i++) {
                var slice = nom[i];
                var fuzz = 7.5;
                var fuzz1 = i > 0 && slice.value > 0 ? fuzz : 0;
                var fuzz2 = i < nom.length - 1  && slice.value > 0  ? fuzz : 0;
                stops.push(
                    { offset: slice.startAngle * 50 / Math.PI + fuzz1,
                     color: color(i),
                     value: slice.value
                    },
                    { offset: slice.endAngle * 50 / Math.PI - fuzz2,
                     color: color(i),
                     value: slice.value
                    }
                );  
      ...