지난 시간에 이어서 이번에도 주어진 csv 파일 속 데이터를 필터링 및 매핑하여 원하는 그래프(Stack Bar Chart)로 시각화해 보자. 주어진 데이터는 나라별/날짜별 인구수, 코로나 19 백신 접종자 수(부분 및 전체 포함), 코로나 19 백신 완전 접종자 수를 Key로 가지고 있다. 해당 데이터로 각 나라별 최신 정보 중 접종률이 가장 높은 국가 15개국을 부분/전체/인구수를 스택으로 담는 스택 바 차트로 표현해보려 한다. 주어진 조건은 다음과 같다. 1. 나라별 최신 데이터만을 사용(국가별 최신 정보가 달라도 좋다.) 2. 모든 인구가 접종한 경우는 제거(접종률이 100% 이상인 경우) 3. 접종률을 내림차순으로 정렬, 상위 15개 국가만을 필터링 이를 통해 표현하고자 하는 그래프는 다음과 같..

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(..