D3 큰 CSV에서 막 대형 차트 만들기

Question

CSV 파일에서 막 대형 차트를 만들고 싶습니다. 키 열은 대부분 두세 단어이므로 CSV 파일은 매우 복잡하고 다소 혼란 스럽습니다. 나는 csv를 읽고 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

감사를 사전 베른하르트

편집에 : 업데이트 코드 :

이것은 내가 지금까지 무엇을 가지고

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

그룹이 같은 첫 해에 의해 설정이 거대한 데이터 것 I :

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

이렇게하면 각각의 요소 (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 })]) 

행운을 빕니다!

편집 : 나는 또한 당신은 단지 정보를 추출 브라우저 (49메가바이트)에로드하기 전에 CSV 파일에서 필요하지 않는 일부 정보를 삭제하거나 또는에 map를 사용하는

를 추천 할 것입니다 당신 필요 (이미 코드에서 완료 한 것처럼).