D3 Examples - Crime by Race Dataset (Normalized)

Crime by Race Dataset (Normalized)

This is a dataset on crime in 2014, subdivided by race and offense. Originally found in table 43 in the FBI Web Site "2014 Crime in the United States". This is the same data as in a previous block, but normalized such that "Race" is now a single column rather than a collection of different columns. This allows the data to be easily used with d3.nest and other utilities/

This example page provides the basic code required to load the data and display it on the page (as JSON) using D3.js.

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js"></script>
  <script src="//curran.github.io/dsv-dataset/dsv-dataset-v0.2.1.js"></script>
</head>
​
<body>
  <script>
    
    function render(data){
      
      // This computes totals for each offense.
      // Could be a bar chart.
      var offenses = d3.nest()
        .key(function (d){ return d["Offense charged"];})
        .rollup(function(leaves) {
          return d3.sum(leaves, function(d) { return d.count; });
        })
        .entries(data);
      d3.select("body")
        .append("pre")
        .text(JSON.stringify(offenses));
      
      // This computes totals for each race.
      // Could be a bar chart.
      var offenses = d3.nest()
        .key(function (d){ return d["Race"];})
        .rollup(function(leaves) {
          return d3.sum(leaves, function(d) { return d.count; });
        })
        .entries(data);
      d3.select("body")
        .append("pre")
        .text(JSON.stringify(offenses));
      
      // This shows the full data.
      // Could be a stacked or grouped bar chart.
      d3.select("body")
        .append("pre")
        .text(JSON.stringify(data, null, 2));
    }
​
    d3.csv("data.csv", function(data){
      d3.json("data.json", function(metadata){
        
        var dataset = dsvDataset.parse({
          data: data,
          metadata: metadata
        });
        
        // Transform the table so "Race" is a single column.
        data = normalize(dataset.data, "Race", "count", [
          "White",
          "Black or African American",
          "American Indian or Alaska Native",
          "Asian",
          "Native Hawaiian or Other Pacific Islander"
        ]);
        
        // Remove the "TOTAL" values.
        data = data.filter(function (d){
          return d["Offense charged"] !== "TOTAL";
        });
        
        data.forEach(function (d){
          delete d["Total"];
        });
        
        render(data);
      });
    });
    
    function normalize(dataIn, dimension, measure, values){
      
      var data = []; 
      
      // All the columns not in "values".
      var columns = Object.keys(dataIn[0]).filter(function (column){
        return !values.some(function (value){
          return column === value;
        });
      });
      
      dataIn.forEach(function (d){
        values.forEach(function (value){
          var row = {};
          
          // Pivot the given value columns into rows.
          row[dimension] = value;
          row[measure] = d[value];
          
          // Copy over values from other columns.
          columns.forEach(function (column){
            row[column] = d[column];
          });
          
          data.push(row);
        });
      });
      
      return data;
    }
    
  </script>
</body>
    