오늘은 공공데이터를 이미지 형태로 시각화해보는 시간을 갖도록 하겠습니다. 참고로 공공데이터 포털에 나와있는 공공데이터 시각화 예제들 중 하나인 Pie Chart를 동일한 Chart로 만들어 출력을 해보겠습니다.
보시는 것처럼 공공데이터 시각화 예제들이 많이 나와 있습니다. 그중에 하나를 아래 그림처럼 선택했네요.
한번 클릭해서 확대된 이미지를 볼까요.
위그림과 같이 pie chart를 만들어 보도록 하겠습니다.
상세데이터 보기라는게 방금 전 그림에서 보실 수 있는데 그걸 클릭하시면 다음 그림이 나옵니다.
메타 정보를 크릭하고 링크 주소를 클릭하시면 자동으로 csv 파일 형태의 데이터를 읽어오게 됩니다.
지난 시간에 테이블로 출력해보는 실험을 했죠. 거기에 csv파일명만 수정해서 출력해 볼께요.
중간에 이미지가 짤렸지만 데이터 정보가 아래 그림처럼 다양한 정보를 가지고 있네요.
여기서, 필요한 정보는 휴양림명과 수양림면적이네요. 이 정보를 토대로 pie chart을 만드는 거네요.
최근 post를 기준으로 실험을 하겠습니다.
소스는 사전학습 소스를 보시기 바랍니다. 다시 이곳에 하면 post 글이 너무 길어져서 생략합니다.
var width = 500;
var height = 500;
var arc = d3.arc()
.innerRadius(0)
.outerRadius(240)
.cornerRadius(0)
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.휴양림면적; });
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.style("background-color","yellow");
g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height/ 2 +")")
위 코딩은 svg은 기본 캔버스 배경 세팅이고 g은 pie chart가 그려질 위치입니다. 그리고 나머지는 pie chart에 기본 초기 세팅 부분인데 수정부분을 설명 드리면 다음과 같습니다.
데이터값을 기준으로 그릴때에
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.휴양림면적; });
pie를 세팅할때 우선 value값을 d.휴양림면적으로 잡도록 세팅을 했네요.
var arcs = pie(data);
이렇게 해서 pie안에다 csv 데이터 파일을 던져 주면 자동으로 d.휴양림면적 데이터만 arcs에 세팅하게 됩니다.
그래서 실제 차트를 그릴때 아래와 같이 코딩을 하시면 휴양림면적 데이터값을 기준으로 pie chart 데이터가 넘겨주게 됩니다.
d3.csv("data.csv",type).then(function(data){
var pieChart = g.selectAll("path")
.data(arcs)
.enter();
});
이제 pie chart 그립니다.
pieChart.append("path")
.style("fill", function(d,i){
return d3.color("hsl(100, 100%, " + d.value%100 + "%)");
})
.attr("d", arc);
color는 기존 소스를 그대로 적용 했는데 색이 맘에 들지 않네요.
[결과]
pieChart.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("fill","#ffffff")
.style("text-anchor", "middle")
.style("font-weight", "bold" )
.style("text-shadow","-1px -1px 1px #111, 1px 1px 1px #000")
.text(function(d) {
return d.data.휴양림명;
});
텍스트 스타일을 좀 추가했네요. 3D글자 효과를 추가하려고 text-shadow 속성을 넣었습니다.
핵심은 append()함수로 텍스트 태그를 추가하고 스타일은 attr(), style()로 지정했습니다. 그리고 휴양림명은 text()함수를 이용하여 출력 했네요.
[종합소스]
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var width = 500;
var height = 500;
var arc = d3.arc()
.innerRadius(0)
.outerRadius(240)
.cornerRadius(0)
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.휴양림면적; });
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height)
.style("background-color","yellow");
g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height/ 2 +")")
d3.csv("data.csv",type).then(function(data){
var arcs = pie(data);
var pieChart = g.selectAll("path")
.data(arcs)
.enter();
pieChart.append("path")
.style("fill", function(d,i){
return d3.color("hsl(100, 100%, " + d.value%100 + "%)");
})
.attr("d", arc);
pieChart.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("fill","#ffffff")
.style("text-anchor", "middle")
.style("font-weight", "bold" )
.style("text-shadow","-1px -1px 1px #111, 1px 1px 1px #000")
.text(function(d) {
return d.data.휴양림명;
});
});
function type(d){
d.휴양림면적=+d.휴양림면적;
return d;
}
</script>
</body>
[결과]
Pie Chart의 Color가 맘에 안들지만 그래도 비슷하게 만들었네요.
원래 어제 post를 올려야 하는데 사소한 것 하나를 실수하는 바람에 하루가 늦어 졌네요. pieChart 출력에서 pie chart랑 text랑 분리해서 코딩해야하는데 한번에 묶어서 하다 보니깐 path 태그 안으로 text 태그가 들어가서 글자가 정상적으로 출력되지 못했네요. 한마디로 삽질을 했네요. path 태그 밖으로 위처럼 코딩해서 수정하니깐 글자가 정상적으로 출력 되었네요.