I would group this huge data set by year first, like this:

var nested = d3.nest()
  .key(function (d) { return d['YEAR OF ARREST'] })

This gives you an array of all 19 years (accessed via nested[0].key) with their respective elements (accessed via nested[0].values). For example, 2016 has 4374 arrests so far.

Here's a link to the d3 documentation for d3.nest

From here on you can follow any bar chart tutorial, like Mike Bostock's example.

Set the domain of your scales like this:

// Set X to all your 19 keys, which are your years
x.domain( { return d.key }))
// Set Y between 0 and the maximum length of values, which are your arrests
y.domain([0, d3.max(data, function(d) { return d.values.length })])

Good luck!


I would also recommend you to either delete some information you don't need from the csv file before you load it in the browser (49 MB) or to use map to only extract the information you need (like you've done in your code already).

Related Query

More Query from same tag