javascript - D3 从大 csv 创建条形图

Question

我想从 csv 文件创建条形图。 CSV 文件很大，而且有点困惑，因为关键列大多是两三个单词。我能够读取 csv 并获取数据，例如逮捕年份。现在我需要一个函数来计算每年被捕者的数量。所以我想，我需要不同的数组。我想用这些数组创建一个条形图，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) 之前从其中删除一些不需要的信息，或者使用 map 仅提取您需要的信息需要(就像您已经在代码中所做的那样)。