D3.js로 자살률 분석하기
다음은 dataset 에 대한 링크입니다.
훨씬 더 쉬운 도구를 사용할 수 있는데 왜 그런 간단한 차트를 만들기 위해 D3.js를 사용하는지 물어볼 수 있습니다. 당신이 맞습니다. D3.js는 그러한 간단한 차트에 대한 과잉입니다. 그러나 D3.js를 사용하는 이유는 제가 처음부터 코드로 차트를 만드는 것을 좋아하기 때문입니다. D3.js는 작업할 수 있는 기성품 템플릿을 제공하는 상용 도구와 달리 차트 작성의 복잡성을 배우는 데 도움이 됩니다.
여기서 내 목표는 D3.js에서 차트를 만들기 위해 각 조각이 어떻게 조합되는지 이해하는 것입니다.
이제 누적 막대 차트 작성을 시작해 보겠습니다. 그건 그렇고, 당신은 당면한 질문에 맞는 다른 차트를 선택할 수 있습니다. 하나의 차트에서 지역별, 성별별 자살을 분석할 수 있기 때문에 누적 막대 차트를 선택했습니다. 또한 막대 차트는 범주형 데이터를 분석하는 데 유용합니다. 다른 관련 차트 유형을 자유롭게 실험해 보십시오.
참고로 저는 Visual Studio 코드(코드 편집기)를 사용할 것입니다. 원하는 코드 편집기를 편안하게 사용하십시오.
Github project link
첫 번째 단계는 빈 HTML 파일을 만들고 D3.js 라이브러리를 로드하는 것입니다. 이 파일의 이름을 index.html로 지정하겠습니다.
HTML 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Stacked bar chart</title>
<!-- Load D3.js library -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="tooltip" class="hidden">
<p>Region: <span id="region"></span></p>
<p>Gender: <span id="gender"></span></p>
<p>Suicides: <span id="suicides"></span></p>
</div>
<script src="stackedbar.js"></script>
</body>
</html>
자, 계속 진행하기 전에 이 파일의 세부 사항을 이해합시다.
이제 개발하려는 데이터 시각화를 생성하기 위한 코드를 호스팅할 JavaScript 파일을 생성해 보겠습니다. 이 파일의 이름을 stackedbar.js로 지정하겠습니다.
자바스크립트 파일
// set svg width and height
const width = 900,
height = 600;
const margin = { top: 100, right: 100, bottom: 100, left: 100 };
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
//Load data
d3.csv("https://raw.githubusercontent.com/learning-monk/DataVisualizationProjects_JS/master/DataViz_with_D3js/Stacked%20bar%20chart%20-%20suicides%20by%20region/suicide_rates_1985-2016.csv")
.then((finalData) => {
finalData.forEach((d) => {
d.Region = d.Region;
d.female = parseFloat(d.female);
d.male = parseFloat(d.male);
});
// set up stack method
const stack = d3.stack().keys(["female", "male"]);
// Data, stacked
const series = stack(finalData);
// set-up scales
const xScale = d3
.scaleBand()
.domain(finalData.map((d) => d.Region))
.range([0, innerWidth])
.padding(0.1);
const xAxis = d3.axisBottom().scale(xScale);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(series, (d) => d3.max(d, (d) => d[1]))])
.rangeRound([innerHeight, 0]);
const yAxis = d3.axisLeft().scale(yScale);
//Easy colors accessible via a 10-step ordinal scale
const colors = d3
.scaleOrdinal()
.domain(series.map((d) => d.key))
.range(
d3
.quantize((t) => d3.interpolateSpectral(t * 0.8 + 0.1), series.length)
.reverse()
)
.unknown("#ccc");
//Create SVG element
const svg = d3
.select("body")
.append("svg")
.attr("viewBox", [0, 0, width, height]);
const mainG = svg
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Add a group for each row of data
const g = mainG
.selectAll("g")
.data(series)
.enter()
.append("g")
.style("fill", (d) => colors(d.key))
.attr("transform", `translate(0,0)`);
// Add a rect for each data value
g.selectAll("rect")
.data((d) => d)
.enter()
.append("rect")
.attr("x", function (d, i) {
return xScale(d.data.Region);
})
.attr("y", function (d) {
return yScale(d[1]);
})
.attr("height", function (d) {
return yScale(d[0]) - yScale(d[1]);
})
.attr("width", xScale.bandwidth())
.on("mouseover", function (d) {
//Get this bar's x/y values, then augment for the tooltip
let xPosition =
parseFloat(d3.select(this).attr("x")) + xScale.bandwidth() * 2;
let yPosition = parseFloat(d3.select(this).attr("y")) + innerHeight / 2;
// Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#region")
.text(d.data.Region);
d3.select("#tooltip")
.select("#gender")
.text(d[0] === 0 ? "Female" : "Male");
d3.select("#tooltip")
.select("#suicides")
.text(d[1] - d[0]);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function () {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
});
// draw legend
const legend = mainG
.append("g")
.attr("class", "legend")
.attr("transform", "translate(" + (innerWidth - 110) + "," + 20 + ")")
.selectAll("g")
.data(series)
.enter()
.append("g");
// draw legend colored rectangles
legend
.append("rect")
.attr("y", (d, i) => i * 30)
.attr("height", 10)
.attr("width", 10)
.attr("fill", (d) => colors(d.key));
// draw legend text
legend
.append("text")
.attr("y", (d, i) => i * 30 + 9)
.attr("x", 5 * 3)
.text((d) => d.key);
mainG
.append("g")
.call(xAxis)
.attr("transform", `translate(0,${innerHeight})`);
mainG.append("g").call(yAxis);
mainG
.append("text")
.attr("class", "chart-title")
.attr("y", -40)
.attr("x", innerHeight / 2)
.text("Suicides by Region and Gender (1985-2016)")
.attr("font-family", "arial")
.attr("font-size", 24);
})
.catch((error) => {
console.log(error);
});
이 기사의 각 코드 행에 대한 자세한 설명을 제공할 계획은 없습니다. 주석은 따라야 할 올바른 위치에 제공되기 때문입니다. D3.js 관련 주제를 다루는 별도의 튜토리얼 시리즈를 시작할 계획입니다. 여기에서 차트 요소를 만드는 방법에 대해 자세히 논의할 수 있습니다.
제공된 코드를 실험하고 자신만의 시각화 버전을 만들어 보세요. 제 생각에는 좋은 학습 방법입니다.
코드를 훨씬 쉽게 이해하는 데 도움이 되는 몇 가지 중요한 요점만 안내하겠습니다.
이 시각화는 4개 부분으로 나뉩니다.
SVG는 모든 데이터 시각화 요소를 포함하는 캔버스 역할을 합니다. 메인 차트는 각 성별에 대한 막대로 구성되어 서로 겹쳐져 있습니다. x축에는 지역이 있고 Y축에는 개수가 표시됩니다.
이 SVG 요소에 차트 요소를 추가하고 있습니다. 또한 공통 요소(예: x 및 y 축)를 그룹화하고 이러한 그룹을 SVG 요소에 추가합니다. 그룹 생성의 장점은 이러한 차트 요소를 유지 관리하고 스타일을 지정하는 것이 더 쉽다는 것입니다.
도구 설명: 차트에 대한 간단한 기본 제공 도구 설명을 사용할 수 있습니다. 그러나 이 차트의 경우 div 요소가 있는 사용자 지정 도구 설명을 만들었습니다. 또한 우리는 툴팁을 우리가 선택한 위치에 배치하고 있습니다.
차트 요소의 스타일을 지정할 CSS 파일(style.css)을 만들어 보겠습니다. 이 파일은 현재 스타일링 툴팁일 뿐입니다.
CSS 파일
#tooltip {
position: absolute;
width: 200px;
height: auto;
padding: 10px;
background-color: lightblue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
}
분석
이 차트는 우리가 시작한 질문에 답하는 데이터, 자살률이 가장 높은 지역 및 성별에 따라 이 데이터가 어떻게 분포되어 있는지에 대한 예비 보기만 제공합니다.
더 많은 분석의 여지가 있습니다. 이 데이터 세트에 연결된 다른 많은 데이터 포인트를 이 file 에서 찾을 수 있습니다.
자유롭게 자신의 분석을 수행하고 작업을 공유하십시오.
Reference
이 문제에 관하여(D3.js로 자살률 분석하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/learningmonk/analyzing-suicide-rates-with-d3-js-57k8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
