All examples By author By category About

ngchwanlii

Full window Github gist

Florida Gun Deaths

This block provides a rough re-creation of the Florida Gun Deaths visualization. Keeping in mind the inspiration and issues discussed, try to redesign this visualization. Focus first on editing the style (colors, thickness of lines, etc.) before changing the encoding.

Original Visualization

The original visualization appeared in the article This Chart Shows An Alarming Rise In Florida Gun Deaths After 'Stand Your Ground' Was Enacted article by Pamela Engel on Business Insider on February 18, 2014.

The chart was created by Christine Chen. She responded to the discussion, and linked to her inspiration for the graphic. This inspiration appeared in the infographic Iraq's bloody toll by Simon Scarr on South China Morning Post on December 17, 2011.

Online Discussion

There was a lot of discussion, especially on Twitter and various blogs, when this visualization came out. Here are some of those posts:

Original Data

You can access the original (and updated) data for this visualization from the Florida Statistical Analysis Center. Specifically, you can download the "Murder: Firearm Type and Rate for Florida" dataset in PDF or Excel format the UCR Offense Data page.

Trifacta Recipe

To generate the data.csv file, the original 1971_fwd_murder_firearms.xlsx file was transformed using the following Trifacta Wrangler recipe:

splitrows col: column1 on: '\n' quote: '\"'
delete row: IN(SOURCEROWNUMBER(), [1,2])
split col: column1 on: ',' limit: 11 quote: '\"'
replace col: * with: '' on: '\"' global: true
header
delete row: SOURCEROWNUMBER() == 4
drop col: Total_Murders, Murder_Rate_per_100_000, Total_Handgun, Total_Other_Firearm, Total_Percent_by_Firearms, Percent_by_Handguns, Percent_by_Other_Firearms, Total_by_Firearm_change, Population_Change
rename col: Total_by_Firearm to: 'Total'
delete row: IN(SOURCEROWNUMBER(), [50, 57, 51, 52, 53, 54, 55, 56])
keep row: (DATE(1989, 1, 1) <= Year) && (Year < DATE(2017, 1, 1))
derive value: Total / (Population / 100000) as: 'Rate'

forked from sjengle's block: Florida Gun Deaths

forked from ngchwanlii's block: Florida Gun Deaths

<!DOCTYPE html>
<meta charset="utf-8">

<g id="header"></g>
  <g id="footer"></g>

<g id="plot">
    <g id="area"></g>   
    <g id="note"></g>   
    <g id="line"></g>   
    <g id="points"></g> 
    <g id="bars"></g>   
    <g id="points_label"></g>
  </g>
  <g id="legend"></g>
</svg>

var offset = 8;
var width = size.width - pad.left - pad.right;
var height = size.height - pad.top - pad.bottom + offset;

var x = d3.scaleLinear()
  .range([0, width]);

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

var xaxis = d3.axisBottom(x)
  .tickSize(20, 0)
  .tickValues([1990, 2000, 2010])
  .tickFormat(function(d) { return "" + d + "s"; });

var yaxis = d3.axisLeft(y)
  .ticks(6)
  .tickPadding(5)
  .tickSizeInner(-width); // drawing the grid line

var line = d3.line()
  .curve(d3.curveLinear)
  .x(function(d) { return x(d.Year); })
  .y(function(d) { return y(d.Total); });

var area = d3.area()
  .curve(d3.curveLinear)
  .x(function(d) { return x(d.Year); })
  .y1(0)
  .y0(function(d) { return y(d.Total); });

function translate(x, y) {
  return "translate(" + x + "," + y + ")";
}

function convert(row) {
  row.Year = +row.Year;
  row.Population = +row.Population;
  row.Total = +row.Total;
  row.Rate = +row.Rate;
  return row;
}

var svg = d3.select("body").select("svg");
var plot = svg.select("g#plot");
var header = svg.select("g#header");
var footer = svg.select("g#footer");

svg.attr("width", size.width);
svg.attr("height", size.height);
plot.attr("transform", translate(pad.left, pad.top));

/*
 * add various text annotation to svg
 */

header.append("text")
  .attr("class", "title")
  .attr("x", 0)
  .attr("y", 0)
  .attr("dx", "5px")
  .attr("dy", "36pt")
  .text("Gun deaths in Florida");

header.append("text")
  .attr("class", "subtitle")
  .attr("x", 0)
  .attr("y", 0)
  .attr("dx", "5px")
  .attr("dy", "58pt")
  .text("Number of murders committed using firearms");

footer.append("text")
  .attr("x", 0)
  .attr("y", size.height + offset)
  .attr("dx", "5px")
  .attr("dy", "-23pt")
  .text("Source: Florida Department of Law Enforcement");

footer.append("text")
  .attr("x", 0)
  .attr("y", size.height )
  .attr("dx", "5px")
  .attr("dy", "-6pt")
  .text("Inspiration: https://tinyurl.com/led8ggk");

/*
 * draw heavy axis lines at y-min and y-max
 */

var bars = plot.select("g#bars");

bars.append("line")
  .attr("x1", 0)
  .attr("y1", 0)
  .attr("x2", width)
  .attr("y2", 0);

bars.append("line")
  .attr("x1", 0)
  .attr("y1", height + offset)
  .attr("x2", width)
  .attr("y2", height + offset);

d3.csv("data.csv", convert, function(error, data) {
  if (error) throw error;

x.domain(d3.extent(data, function(e) {return e.Year; }));
  y.domain([0, 900]).nice();

var min_max = d3.extent(data, function (d){return d.Total});
  var min = min_max[0],
      max = min_max[1];

var minYear, maxYear;

// getting min and max year of number of deaths
  data.map(function(d){
        if(d.Total == min){minYear = d.Year;}
        else if(d.Total == max) {maxYear = d.Year;}
   })

/*
   * draw x- and y-axis
   * should be behind other elements
   */
  svg.select("g#y")
    .attr("transform", translate(pad.left, pad.top))
    .call(yaxis);

// slighltly adjust the header and footer
 svg.select("g#header")
    .attr("transform", translate(pad.left, 0))
svg.select("g#footer")
    .attr("transform", translate(pad.left, 0))

svg.select("g#x")
    .attr("transform", translate(pad.left, pad.top + height + offset))
    .call(xaxis)
    .selectAll(".tick text")
      .style("text-anchor", "start")
      .attr("x", 6)
      .attr("y", 6);

/*
   * plot red area
   */

plot.select("g#area")
      .append("path")
      .datum(data)
      .attr("d", area);

/*
   * draw line on top of area
   */

plot.select("g#line")
      .append("path")
      .datum(data)
      .attr("d", line);

/*
   * draw points on top of line
   */

plot.select("g#points")
    .selectAll("circle")
    .data(data)
    .enter()
      .append("circle")
      .attr("cx", function(d) { return x(d.Year); })
      .attr("cy", function(d) { return y(d.Total); })
      .attr("r", 6);

plot.select("g#points_label")
      .selectAll("text")
      .data(data)
      .enter()
      .filter(function (d) {return d.Total == min || d.Total == max})
      .append("text")
      .attr("x", function(d){return x(d.Year);})
      .attr("y", function(d){return y(d.Total);})
      .attr("dy", "-1.5em")
      .attr("dx", "0.05em")
      .style("font", "0.8em sans-serif")
      .style("fill", "white")
      .text(function(d){
          return d.Total;
      });

/*
   * plot annotation on top of area
   */

var note = plot.select("g#note");

note.selectAll("text")
    // text with manual line breaks
    .data(["2005", "Florida enacted", "its 'Stand Your", "Ground' law"].reverse())
    .enter()
    .append("text")
      .attr("id", function(d, i) { return "note-" + i; })
      .attr("x", x(2005))
      .attr("y", y(450))
      .attr("dx", x(2004) - x(2005))
      .attr("dy", function(d, i) { return (-i * 2) + "ex"; })
      .text(function(d) { return d; });

note.append("line")
    .attr("x1", x(2005))
    .attr("x2", x(2005))
    .attr("y1", y(450) + 5)
    .attr("y2", y(521));

// for min and max note
  note.append("line")
    .attr("x1", x(maxYear)+5)
    .attr("x2", x(maxYear))
    .attr("y1", y(max) - 16)
    .attr("y2", y(max));

note.append("line")
   .attr("x1", x(minYear)+5)
   .attr("x2", x(minYear))
   .attr("y1", y(min) - 16)
   .attr("y2", y(min));

svg.select("g#legend")
       .attr("transform", translate(0, size.height/2))
       .append("text")
       .attr("dx", "-5em")
       .attr("transform", "rotate(90)")
       .text("Number of Gun Deaths");

});

</script>
</body>
</html>

https://d3js.org/d3.v4.min.js