Majority chart

(This chart is a part of the d3-charts collection available here.)

This is a majority chart, my own tweak of a plain symmetry bar chart. It displays a vertical bar chart with each bar anchored around a common origin of 50%. The code was based on Mike Bostock's "Bar Chart with Negative Values" chart, inspired by a post on Junk Charts, and was originaly used for an article I wrote, "Women in Tech by the Numbers", in which I explained the chart like so:

Just in case the chart needs explaining, each bar displays how the men outnumber the women---and vice versa. If a group of software engineers at a company is 90% male, the bars will display the differential of 40% from an even 50%.

Because the point of the chart is to display majorities, there is no point in showing the first 50% of a majority; it is completely redundant, when you can just show the percentage one side is ahead of the other.

Unlike the examples in the two links of inspiration, the x-axis of this implementation has a symmetric x-axis to ensure readers aren't perceptually manipulated by one side taking up a larger, more imposing, share of the space than the other.

The main thing to have in mind when using this particular chart is that the order of your data rows matters; a part of the story this chart tells uses the vertical dimension, so embrace it. Usually, you'll see people use the chart for demographics with people divided by age or income, but there are plenty of other uses you'll realize soon enough.

The placeholder data shows how Americans voted by income brackets in the 2012 election.

Future Features

Value labels.

<!DOCTYPE html>
<meta charset="utf-8">
<title>Majority Chart</title>
<style>
    svg {
        display: block;
        margin: 1em auto;
    }

.bar.positive {
        fill: steelblue;
    }
    .bar.negative {
        fill: brown;
    }

rect.bar:hover {
        fill: orange;
    }

.x.axis text {
        font: 10px sans-serif;
    }
    .y.axis text {
        font: 14px Georgia;
    }
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

.grid .tick {
        stroke: #FFF;
        opacity: 0.7;
        stroke-width: 0.5;
    }
    .grid path {
        stroke-width: 0;
    }
</style>
<body>
    <script src="d3.min.js?v=3.2.8"></script>
<script>
    var margin = {top: 30, right: 15, bottom: 10, left: 125};
        width = 600 - margin.left - margin.right,
        height = 200 - margin.top - margin.bottom;

var dataset = "data.csv",
        header = "Income Bracket",
        leftSideName = "Obama",
        rightSideName = "Romney";

var x = d3.scale.linear()
     // .domain([-50, 50])
        .range([0, width])

var y = d3.scale.ordinal()
        .rangeRoundBands([0, height], .2);

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv(dataset, type, function(error, data) {
        x.domain([
            -d3.max(data, function(d) { return Math.max(d[leftSideName], d[rightSideName]); })+50,
            d3.max(data, function(d) { return Math.max(d[leftSideName], d[rightSideName]); })-50
        ]);
        y.domain(data.map(function(d) { return d[header]; }));

svg.selectAll(".bar")
            .data(data)
        .enter().append("rect")
            .attr("class", function(d) { return d.leftSide > 50 ? "bar negative" : "bar positive"; })
            .attr("x", function(d) { return d.leftSide > 50 ? x(-d.leftSide+50) : x(0); })
            .attr("y", function(d) { return y(d[header]); })
            .attr("width", function(d) { return x(Math.max(d.leftSide-50, d.rightSide-50)) - x(0); })
            .attr("height", y.rangeBand());

svg.append("g")
            .attr("class", "x axis")
            .call(xAxis);

svg.append("g")
            .attr("class", "y axis")
        .append("line")
            .attr("x1", x(0))
            .attr("x2", x(0))
            .attr("y2", height);

svg.append("g")
            .attr({
                "class": "grid",
                "transform": "translate(0," + height + ")"
            })
            .call(xAxis
                .tickSize(height, 0, 0)
                .tickFormat("")
        );

svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
                .attr({
                    "transform": "rotate(-90)",
                    "y": 6,
                    "dy": ".71em"
                })
                .style("text-anchor", "end")
                .text("");
    });

function type(d) {
        d.leftSide = Math.round(parseFloat(d[leftSideName]));
        d.rightSide = Math.round(parseFloat(d[rightSideName]));
        return d;
    }
</script>
</body>