Petit Jury Reporting Rates

d3.legend.js

// d3.legend.js 
// (C) 2012 [email protected]
// MIT licence

(function() {
d3.legend = function(g) {
  g.each(function() {
    var g= d3.select(this),
        items = {},
        svg = d3.select(g.property("nearestViewportElement")),
        legendPadding = g.attr("data-style-padding") || 5,
        lb = g.selectAll(".legend-box").data([true]),
        li = g.selectAll(".legend-items").data([true])

    lb.enter().append("rect").classed("legend-box",true)
    li.enter().append("g").classed("legend-items",true)

    svg.selectAll("[data-legend]").each(function() {
        var self = d3.select(this)
        items[self.attr("data-legend")] = {
          pos : self.attr("data-legend-pos") || this.getBBox().y,
          color : self.attr("data-legend-color") != undefined ? self.attr("data-legend-color") : self.style("fill") != 'none' ? self.style("fill") : self.style("stroke") 
        }
      })

    items = d3.entries(items).sort(function(a,b) { return a.value.pos-b.value.pos})

    
    li.selectAll("text")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("text")})
        .call(function(d) { d.exit().remove()})
        .attr("y",function(d,i) { return i+"em"})
        .attr("x","1em")
        .text(function(d) { ;return d.key})
    
    li.selectAll("circle")
        .data(items,function(d) { return d.key})
        .call(function(d) { d.enter().append("circle")})
        .call(function(d) { d.exit().remove()})
        .attr("cy",function(d,i) { return i-0.25+"em"})
        .attr("cx",0)
        .attr("r","0.4em")
        .style("fill",function(d) { console.log(d.value.color);return d.value.color})  
    
    // Reposition and resize the box
    var lbbox = li[0][0].getBBox()  
    lb.attr("x",(lbbox.x-legendPadding))
        .attr("y",(lbbox.y-legendPadding))
        .attr("height",(lbbox.height+2*legendPadding))
        .attr("width",(lbbox.width+2*legendPadding))
  })
  return g
}
})()

data.csv

index.html

<style>
.legend rect {
  fill:white;
  stroke:black;
  opacity:0.8;}
</style>
<div id="chartContainer"></div>
  <script src="https://d3js.org/d3.v3.js"></script>
  <script src="d3.legend.js"></script>
  <script type="text/javascript">
var margin = {top: 80, right: 180, bottom: 80, left: 180},
    width = 960
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, .3)

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(8, "%");

// Create the canvas
var chart = d3.select("#chartContainer")
    .append("svg")
    .attr("width", width)
    .attr("height", height + margin.top + margin.bottom);
    // .append("g")
    // .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv",clean, function (data) {

  y.domain([0, d3.max(data, function(d) { return d.reporting; })]);
  var barWidth = width / data.length;

  var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + "," + margin.top + ")"; });

  bar.append('g')
    .attr("transform", function(d,i) { return "translate(" + i * barWidth + "," + height + ")"})
    .call(xAxis);

  bar.append("rect").style({"fill":"red"})
      .attr("y", function(d) { return y(d.reporting); })
      .attr("height", function(d) { return height - y(d.reporting); })
      .attr("width", barWidth - 1)
      .attr("data-legend","Reporting");

  bar.append("rect").style({"fill":"blue"})
      .attr("y", function(d) { return y(d.sent); })
      .attr("height", function(d) { return height - y(d.sent); })
      .attr("width", barWidth - 1)
      .attr("data-legend","Sent to jury selection (voir dire)");

  bar.append("rect").style({"fill":"green"})
      .attr("y", function(d) { return y(d.selected); })
      .attr("height", function(d) { return height - y(d.selected); })
      .attr("width", barWidth - 1)
      .attr("data-legend","Selected");

  bar.append("text")
      .style({"fill": "white", "font": "10px sans-serif","text-anchor": "middle"})
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.reporting) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.reporting; });

  bar.append("text")
      .style({"fill": "white", "font": "10px sans-serif","text-anchor": "middle"})
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.sent) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.sent; });

  bar.append("text")
      .style({"fill": "white", "font": "10px sans-serif","text-anchor": "middle"})
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.selected) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.selected; });

  bar.append("text")
      .style({"fill": "white", "font": "10px sans-serif","text-anchor": "middle"})
      .attr("x", barWidth / 2)
      .attr("y", function(d) { return y(d.selected) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.selected; });

  bar.append("text")
      .style({"font": "10px sans-serif","text-anchor": "middle"})
      .attr("x", barWidth / 2)
      .attr("y", height + 10)
      .attr("dy", ".75em")
      .text(function(d) { return d.year; });

  chart.append("text")
      .style({"font": "14x sans-serif","text-anchor": "middle"})
      .attr("x", width / 2)
      .attr("y", height + margin.top + 30)
      .attr("dy", ".75em")
      .text("Petit Jury Rates for the D.C. Superior Court");

  legend = chart.append("g")
    .attr("class","legend")
    .attr("transform","translate(70,50)")
    .style("font-size","12px")
    .call(d3.legend)

  (function() { 
    legend
      .style("font-size","20px")
      .attr("data-style-padding",10)
      .call(d3.legend)
  })
})

function clean(data) {
  var row = {}
  row["year"] = data["Year"]
  row["sent"] = +(data["Petit Jury Sent to Voir Dire"].replace(",",""))
  row["reporting"] = +data["Petit Jury Reporting"].replace(",","")
  row["selected"] = +data["Jurors Selected"].replace(",","")
  return row
}
  </script>