728x90
D3.js와 TopoJSON을 활용하여 세계 지도 데이터를 시각화할 수 있다.
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
</head>
<body>
<script>
var width = window.innerWidth,
height = window.innerHeight,
centered,
clicked_point;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "map");
var projection = d3.geoMercator()
.translate([width / 2.2, height / 1.5]);
var path = d3.geoPath()
.projection(projection);
var g = svg.append("g");
queue()
.defer(d3.json, "https://unpkg.com/world-atlas@1/world/110m.json" )
.await(ready);
function ready(error, data){
var features = topojson.feature(data, data.objects.countries).features;
svg.selectAll("path")
.data(features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "#b8b8b8");
}
</script>
</body>
</html>728x90
'데이터 사이언스' 카테고리의 다른 글
| [데이터 사이언스] 데이터 분석 및 시각화 프로젝트 아이디어 (0) | 2020.05.22 |
|---|---|
| [데이터 시각화] D3.js로 세계 지도에 국가별 Corona19 코로나 확진자 수 실시간으로 나타내기 (0) | 2020.05.19 |
| [데이터 시각화] D3.js로 날짜별 Corona19 코로나 확진자 수 상위 10개국 실시간으로 나타내기 (0) | 2020.05.17 |
| [데이터 시각화] GeoJSON과 TopoJSON (0) | 2020.05.12 |
| [데이터 분석] 서울에서 면적 대비 카페가 가장 많은 동은? (0) | 2020.05.05 |