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