Drug users vs prisoners.

_.md

[ Launch Inlet ]

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.5356826611076466,"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 r = 175,
    shift_left = 250,
    x_spacing = 425,
    shift_top = 250,
    label_pad = 30,
    slice_color = ["#f1b792", "#372118", "#8a8a8a"],
    text_color = ["black", "white", "white"];

var data = [
  {
    title: "Drug users",
    groups: [
      { group: "white", percentage: 72 },
      { group: "black", percentage: 13 },
      { group: "other", percentage: 15 }
    ]
  },
  {
    title: "Drug prisoners",
    groups: [
      { group: "white", percentage: 25 },
      { group: "black", percentage: 60 },
      { group: "other", percentage: 15 }
    ]
  }
];

var groups = d3.select("svg").selectAll("g.group")
    .data(data)
  .enter()
    .append("g")
    .classed("group", true)
    .attr("transform", function(d, i) {
      return "translate(" + [shift_left + x_spacing * i, shift_top] + ")";
    });

groups.append("text")
  .classed("mainLabel", true)
  .text(function (d) { return d.title; })
  .attr("transform", "translate(" + [0, -r - label_pad] + ")")
  .attr("fill", "white")
  .attr("text-anchor", "middle");


var arc = d3.svg.arc()
    .outerRadius(r);

var pie = d3.layout.pie()
    .value(function(d) { return d.percentage; })
    .sort(null);

var arcs = groups
    .datum(function (d) { return d.groups; })
    .selectAll(g.slice)
    .data(pie)
  .enter()
    .append("g")
    .classed("slice", true);

arcs.append("path")
    .attr("fill", function(d, i) { return slice_color[i]; })
    .attr("d", arc);

var text_groups = arcs.append("g")
  .attr("transform", function(d) {
    d.innerRadius = r / 5;
    d.outerRadius = r * 2;
    return "translate(" + arc.centroid(d) + ")";
  });
text_groups.append("text")
  .attr("text-anchor", "middle")
  .text(function(d) { return d.data.group})
  .attr("fill", function(d, i) { return text_color[i]; });
text_groups.append("text")
  .attr("text-anchor", "middle")
  .text(function(d) { return "(" + d.data.percentage + "%)"})
  .attr("fill", function(d, i) { return text_color[i]; })
  .attr("transform", "translate(" + [0, 25] + ")");

var references = [
  "http://www.publiceye.org/defendingjustice/pdfs/factsheets/10-Fact%20Sheet%20-%20System%20as%20Racist.pdf",
  "http://fcnl.org/resources/newsletter/feb00/drug_trafficking_prejudiced_assumptions/",
  "http://cwsl.edu/content/benner/aaRacialDisparityinNarcoticsSearchWarrants.pdf"
];

style.css

body {
  background: black;
}

.slice text {
  font-size: 18pt;
  font-family: Arial;
  text-transform: uppercase;
}

text.mainLabel {
  font-size: 24pt;
  font-family: Arial;
  text-transform: uppercase;
}