[데이터 시각화] D3.js로 World map 세계 지도 데이터 시각화하기

데이터 사이언스

[데이터 시각화] D3.js로 World map 세계 지도 데이터 시각화하기

판다의 삶 2020. 5. 14. 11:16

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