'따릉이' 사용 이력의 가시화 Project - 04. 대여소 위치 표시하기

이제 대여서 위치를 표시 해 보도록 하겠습니다. 

이것은 기존에 참고했던 맛집 위치 표시 코드를 그대로 사용하면 됩니다.

 

그런데, 코드 분석을 너무 안해서 D3를 써서 어떻게 그리고 있는지 거의 모르고 있네요. 그리는 부분만 좀 확인 해 보도록 하겠습니다. 

 

우선 색상은 class별로 색상을 지정하는 style을 써서 적용했기 때문에, javascript code에는 나타나지 않습니다. style을 회색에서 녹색으로 수정해 보겠습니다.

요렇게 지정한 색상이 적용 됩니다. 나중에 구별로 다른 색상을 표시하려면 fill 속성값을 로직으로 직접 계산해서 출력해야겠네요.

출력 된 HTML 코드를 보면, 색상과 관련 된 속성은 없는 것을 볼 수 있습니다. class id를 보면 style이 적용 된 속성인 것을 알 수 있습니다.

다음으로 따릉이 대여소 정보는 데이터 광장에서 얻을 수 있습니다. 좌표 컬럼명이 한글인 것 보다는 영어가 좀 더 안정적일 것 같아서 일단 컬럼 헤더들을 다 영어로 변경했습니다.

CSV로 저장하고 VSCode에서 확인하니 글자가 깨져있어요. 인코딩 문제인 것 같으니, CSV export 옵션으로 UTF-8을 인코딩으로 설정합니다. CSV저장 인코딩 지정을 처음 해 봤는데, 한번도 써보지 않았던 옵션을 써 보게 되네요. 저장 대화상자의 '저장' 버튼 옆의 '도구'를 눌러 웹 관련 옵션에서 인코딩을 지정 할 수 있습니다.

 .... 이렇게 하면 된다는데, 안되는 경우도 있다고 하고, 저도 안되네요. 

메모장에서 열어보면 ANSI로 열리네요. 메모장에서 다시 UTF-8로 저장하면 잘 됩니다.

아래와 같이 위치가 잘 표시가 됩니다. 맛집 표시 코드에서 반지름을 10에서 2로 줄였습니다.

 

 

코드는.... 사실 분석하고 말고 할 것도 없이 간단해요. 뭔가 커스터마이징 할 때 자세한 속성을 확인 해 보도록 하고, 우선은 코드를 글 읽듯이 주욱~~ 읽어가도 이해가 될 것 같네요. 초기화 하는 부분과 투영 설정하는 부분, 그리고 json/csv를 사용하는 방법 등이 이 코드에 있고, 간단히 구현 할 수 있다는 정도만 염두에 두면 될 것 같아요.

<script>
    var width = 800,
        height = 600;

    var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height);

    var map = svg.append("g").attr("id", "map"),
        places = svg.append("g").attr("id", "places");

    var projection = d3.geo.mercator()
        .center([126.9895, 37.5651])
        .scale(100000)
        .translate([width/2, height/2]);

    var path = d3.geo.path().projection(projection);

    d3.json("seoulmap.json", function(error, data) {
      var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
      map.selectAll('path')
          .data(features)
        .enter().append('path')
          .attr('class', function(d) { console.log(); return 'municipality c' + d.properties.code })
          .attr('d', path);

      map.selectAll('text')
          .data(features)
        .enter().append("text")
          .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
          .attr("dy", ".35em")
          .attr("class", "municipality-label")
          .text(function(d) { return d.properties.name; });
    });

    d3.csv("spot_list.csv", function(data) {
        places.selectAll("circle")
            .data(data)
          .enter().append("circle")
            .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
            .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
            .attr("r", 2);

    });

    </script>

 

중단했던 이 주제의 구현을 다시 시작하게 된 이유는, 최근에 code for korea에서 교통정보의 공개와 관련 된 논의를 하고 있는데, 데이터 상태로는 직관적 이해가 어려운 부분도 있고, 뭔가 insight를 얻기 위해서는 시각화가 도움이 될 경우가 있을 것 같다는 생각이 들었습니다. 그래서, 논의 중 필요성이 생길 수도 있겠다 싶어 미리 준비 해 두려고 합니다. 이 논의 과정에 참여 해 보고 싶으신 분들은 Codefor.kr의 Slack으로~!!