D3로 데이터를 조작하다 보면, 이게 마치 SQL을 다루는 듯한 느낌이 든다. 그도 그럴 것이, 주어진 데이터를 가공하여 원하는 데이터만을 뽑아내는 과정도 비슷하고, select 같은 문법도 주로 쓰이기 때문이다.이번 시간에는 주어진 csv파일을 가공하여 2차원 그래프에 나타내 위와 같은 최종본을 완성시킬 것이다. 해당 그림은 예시이고, 필터링하는 부분에서 요구하는 조건이 살짝 다르다. csv파일은 country_code, country_name, year, value의 키 값으로 이루어진 딕셔너리를 요소로 가진 배열을 담고 있다. 학습 목표1. 국가별로 모아서(group) value의 최댓값과 최솟값을 차이를 구한다. 2. 최댓값과 최솟값의 차이가 큰 상위 다섯 국가를 고른다. 3. 년도별로 이들의 v..

HTML에서의 속성과 CSS의 스타일 D3에서 가장 중요한 특징 중 하나는 HTML에서의 attr와 CSS의 style을 동시에 사용할 수 있다는 점이다. 사용 문법은 다음과 같다. .attr("속성의 이름", "값"); .style("프로퍼티", "값"); 지난 시간 예제를 attr와 style을 이용해 꾸며보자. const provinces = ['AB', 'BC', 'MB', 'NB', 'NL', 'NT', 'NS', 'NU', 'ON', 'PE', 'QC', 'SK', 'YT']; // Append paragraphs and highlight one element let p = d3.select('body').selectAll('p') .data(provinces) .enter() .append(..