D3大きなcsvから棒グラフを作成

Question

私はcsvファイルから棒グラフを作成したいと思います。 CSVファイルは巨大で、ちょっと混乱します。なぜなら、主要な列はほとんど2〜3語ですから。私はcsvを読んで、YEAR OF ARRESTのようなデータを入手することができます。今、私は毎年arresteesを数える関数が必要です。だから私は別の配列が必要だと思う。これらの配列を使って、私は年にx軸上にbarchartを作成したいと思いますし、yには今年のarresteesの数を作成したいと思います。 これを手伝ってくれる人がいますか？私は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

おかげベルンハルト

EDIT： 更新コード：

を

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) 

これはあなたに、それぞれの要素（と（nested[0].keyを介してアクセス）、すべての19年の配列を与えます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 })]) 

幸運を！

は編集：私はまた、あなただけの情報を抽出し、ブラウザ（49メガバイト）でそれをロードする前に、CSVファイルから必要のない情報を削除するか、またはにmapを使用する

をお勧めしますあなたのコードですでにやっているように、必要なものです。