세계 주요 도시 인구 지도

푸른깃발🏳️ 2017. 12. 8. 04:07

2017. 12. 8. 04:07

● 세계주요도시 인구지도

> 자료 준비

1. http://curran.github.io/screencasts/introToD3/examples/viewer/#/94

2. 위 코드는 D3 3.5버전이라 최신 4버전에서 돌아가지 않는다. 메서드 뿐 아니라 많은 것들이 바뀌었다.

3. 그래서 v4로 바꾸고 es6를 적용하며 코드를 익혔다.

4. csv파일을 읽어오기 때문에 서버가 필요하다. 서버는 노드로 띄웠다.

5. csv는 https://github.com/curran/data/tree/gh-pages/geonames 에 있는 cities100000.csv 파일이다.

> 코딩

1. 총 4273개의 도시의 인구를 원의 크기로, 경도(longitude)를 X축, 위도(latitude)를 Y축으로 그린다.

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Population Map</title>
  <script src="d3.js"></script>
  <style>body{background-color: black;}</style>
</head>

const xColumn         = "longitude";
    const yColumn         = "latitude";
    const rColumn         = "population";
    const peoplePerPixel  = 50000;

const innerWidth  = outerWidth - margin.left - margin.right;
    const innerHeight = outerHeight - margin.top - margin.bottom;

const svg = d3.select("body").append("svg")
      .attr("width", outerWidth)
      .attr("height", outerHeight);

const g = svg.append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

const xScale = d3.scaleLinear().range([0, innerWidth]);
    const yScale = d3.scaleLinear().range([innerHeight, 0]);
    const rScale = d3.scaleSqrt();

function render(data) {
      xScale.domain( d3.extent( data, d=> d[xColumn] ));
      yScale.domain( d3.extent( data, d=> d[yColumn] ));
      rScale.domain( [0, d3.max(data, d=> d[rColumn] )]);

// Compute the size of the biggest circle as a function of peoplePerPixel.
      const peopleMax = d3.max(data, d=> d[rColumn]);
      const rMin = 0;
      const rMax = Math.sqrt(peopleMax / (peoplePerPixel * Math.PI));
      rScale.range([rMin, rMax]);

const circles = g.selectAll("circle").data(data);
      circles.enter().append("circle")
        .attr("cx", d => xScale(d[xColumn] ))
        .attr("cy", d => yScale(d[yColumn] ))
        .attr("r",  d => rScale(d[rColumn] ))
        .attr('fill', d => 'rgba(255,255,255,0.2)' );
      circles.exit().remove();
    }

function type(d) {
      d.latitude    =+ d.latitude;
      d.longitude   =+ d.longitude;
      d.population  =+ d.population;
      return d;
    }

d3.csv("./cities.csv", type, render);
  </script>

> 결과

1. 단지 위도, 경도를 range로 잡아 원만 그렸을 뿐인데 세계지도가 나타난다.

2. 모든 인류가 '물'을 중심으로 발전했다는 것을 증빙한다(?)

3. 참고로 서울이 16위고 부산이 67위다. 정확하게 언제적 자료인지는 못 찾았다. github에 올라와 있는 data는 3년전 것이다.

> 반성

1. D3관련 유튜브 강연들을 보고 책도 한권 읽었는데 아직 뭔가 뚜렷하게 잡히지 않는다.

2. 나만의 라이브러리집을 만들어 놓고 추후 필요할 때마다 copy&paste 할 수 있도록 기반을 닦는디.

3. 이미 지진 정보는 d3로 만들 수 있다. 그래도 뭔가 서비스가 될 수 있도록 만들어보자.

> 실행

1. 아래는 위 코드를 조금만 바꿔 실제로 돌린 svg 페이지다. 위 스샷과 비교해 이미지가 얼마나 선명한지 확인할 수 있다.

2. 벡터 기반이라 아무리 확대해도 이미지가 깨지지 않는다. 멋지다!

저작자표시 비영리 변경금지

'Developments > d3로 지진 시각화하기' 카테고리의 다른 글

지진 에너지 그래프 작업 (2)	2018.01.06
지진 연도별 발생 횟수 시각화 작업 1차 완료 (0)	2018.01.02
지진 연도별 발생 횟수 시각화 작업중 2 (0)	2017.12.26
지진 연도별 발생 횟수 시각화 작업중 (0)	2017.12.25
우리동네 장애인 주차구역 불법 주차 통계 (0)	2017.11.06

Wookang makes AI

세계 주요 도시 인구 지도

'Developments > d3로 지진 시각화하기' 카테고리의 다른 글

+ Recent posts

티스토리툴바