Question

我想从csv文件创建一个条形图。 CSV文件很大，有点令人困惑，因为键列大多是两三个字。我能够读取csv并获取数据，例如YEAR OF ARREST。现在我需要一个函数来计算被捕者每年的数量。所以我想，我需要不同的阵列。有了这些阵列，我想创建一个条形图，在x轴上创建年份，并在y轴上创建今年的被捕者数量。有人可以帮我弄这个吗。我是JavaScript的新手，有点令人困惑。这就是我到目前为止所做的：

＆＃13;

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');
  }

};

＆＃13;

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

提前致谢哈德

编辑：更新的代码：

＆＃13;

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); });
});

＆＃13;

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文件加载到浏览器中之前从csv文件中删除一些不需要的信息（49 MB），或者使用map仅提取您需要的信息（如你已经完成了你的代码。

D3从大csv创建条形图

1 个答案: