D3 从大 csv 创建条形图

Question

我想从 csv 文件创建一个条形图。 CSV 文件很大而且有点混乱，因为关键列大多是两三个词。我能够读取 csv 并获取数据，例如 YEAR OF ARREST。现在我需要一个函数来计算每年的被捕人数。所以我认为，我需要不同的数组。使用这些数组，我想创建一个条形图，在 x 轴上是年份，在 y 轴上是今年的被捕人数。 有人可以帮我弄这个吗。我对 JavaScript 很陌生，这有点令人困惑。 这是我目前所拥有的：

var arrestdate = [];

console.log(arrestdate);
d3.csv("urbana_crimes.csv", function(error, data) {
  data.map(function(m){
    arrestdate.push(m["YEAR OF ARREST"]);
  })
    //console.log(arrestdate);

    
});

console.log(arrestdate);
count(arrestdate);


function count(data) {
  data.sort();

  var current = null;
  var cnt = 0;
  for (var i = 0; i < data.length; i++) {
      if (data[i] != current) {
          if (cnt > 0) {
              document.write(current + ' comes --> ' + cnt + ' times<br>');
          }
          current = data[i];
          cnt = 1;
      } else {
          cnt++;
      }
  }
  if (cnt > 0) {
      document.write(current + ' comes --> ' + cnt + ' times');
  }

};

可以在此处找到 csv：https://www.dropbox.com/s/sg4lj2nlv5xgga7/urbana_crimes.csv?dl=0

提前致谢 伯恩哈德

编辑： 更新代码：

var arrestdate = [];

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



console.log(arrestdate);
d3.csv("urbana_crimes.csv", function(error, data) {
  data.map(function(m){
    arrestdate.push(m["YEAR OF ARREST"]);
  })
  var nested = d3.nest()
    .key(function (d) { return d['YEAR OF ARREST'] })
    .entries(data);
    //console.log(nested[0].key);
    //console.log(nested[0].values);
    // Set X to all your 19 keys, which are your years
    x.domain(nested.map(function(d) { 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 })])

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "%"))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Frequency");

  g.selectAll(".bar")
    .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("width", x.bandwidth())
      .attr("x", function(d) { return x(nested[0].values.length); }) //What to put here?
      .attr("y", function(d) { return y(+nested[0].key); }) // What to put here?
      .attr("height", function(d) { return height - y(+nested[0].key); });
});

Answer 1

我会先按年份对这个庞大的数据集进行分组，如下所示：

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

这为您提供了一个包含所有 19 年的数组（通过 nested[0].key 访问）及其各自的元素（通过 nested[0].values 访问）。例如，2016 年迄今已有 4374 人被捕。

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

从这里开始，您可以学习任何条形图教程，例如 Mike Bostock's example。

像这样设置你的秤的域：

// Set X to all your 19 keys, which are your years
x.domain(nested.map(function(d) { 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 })])

祝你好运！

编辑：

我还建议您在将 csv 文件加载到浏览器 (49 MB) 之前从 csv 文件中删除一些您不需要的信息，或者使用map 仅提取您需要的信息（就像您一样）已经在你的代码中完成了）。