[데이터 시각화] 서울의 일별 평균 대기오염도

[데이터 시각화] 서울의 일별 평균 대기오염도

서울의 일별 평균 대기오염도를 각 구별로 지도위에 색상으로 표현해주는 프로그램을 만들어 봤습니다.

[서울의 일별 평균 대기오염도 보기]

데이터는 서울 열린 데이터 광장에서 제공해주는 오픈API를 사용하였고 지도 라이브러리는 Leaflet을 사용하였습니다. Leaflet에 있는 예제 중 Interactive Choropleth Map을 보고 만들었습니다.

서울 열린 데이터 광장에서 제공해주는 API는 날짜를 파라미터로 넘겨주면 해당 날짜의 대기오염 정보를 이산화질소, 오존, 일산화탄소, 아황산가스, 미세먼지로 구분해서 보여줍니다. 그래서 지도 상단에 버튼을 둬서 오염물질을 바꿔가면서 볼 수 있도록 했습니다. 그리고 슬라이더 형태로 날짜를 이동해서 볼 수 있게 했습니다. 슬라이더를 마우스로 드래그 하면 시간에 따른 오염물질 농도의 변화를 볼 수 있습니다.

그런데 데이터를 미리 받아놓은 것이 아니라 슬라이드를 해서 해당 날짜를 지나갈 때마다 API로 데이터를 요청하는 것이라서 통신환경이 느린 곳에서는 지도 색상의 변화가 좀 느릴 수 도 있을 것 같습니다. 버튼과 슬라이더는 jQuery UI를 사용해서 만들었습니다.

[참고1] 지도 위에 서울의 각 구 영역을 표시하기 위해서 각 구의 좌표정보를 담은 GeoJSON 파일이 필요했습니다. 그런데 구하기가 여러워서 SGIS 통계지리정보서비스에서 행정구역경계 SHP 파일을 구한 다음 이 SHP 파일을 http://blog.naver.com/mikan86/30085955260의 내용을 보고 좌표체계를 위경도 좌표체계로 바꾼 다음 http://vallandingham.me/shapefile_to_geojson.html에 있는 내용을 보고 SHP 파일을 GeoJSON으로 변환해서 사용했습니다.

[참고2] script.js 안에서 Ajax 요청하는 부부을 보시면 IE6,7,8버전과 이외 브라우저가 다른 형태로 구현되어 있습니다. IE에서 서울 열린 데이터 광장 API로 crossdomain 요청이 잘 안되서 PHP 파일을 하나 만들어서 대신 요청하고 있습니다. 그냥 다 PHP 파일을 통해서 요청하는 것으로 수정하였습니다.

  • yhw

    안녕하세요!
    이것과 비슷하게 만들어 보고싶은게 하나 있는데요..
    알려주신 예제는 GeoJSON에 데이터가
    만드신 사이트는 오픈API를 이용하시는 걸로 알고있는데요
    제가 가진 csv 파일들로, 클릭할 때마다 다른 데이터들을 불러와
    색깔이 다르게 표시될 수도 있을까요?
    간단한 아이디어라도 주시면 정말 감사하겠습니다ㅠ

    • codefactory

      안녕하세요
      네, 제 생각에 말씀하신대로 가지고 계신 CSV 파일들로 클릭할 때마다 다른 데이터들을 불러와 색상이 다르게 표시되도록 만드는 것이 충분히 가능하실텐데
      이런 형태의 인터랙티브한 데이터 시각화 프로그램을 개발하는 방법이 다방면의 지식과 경험이 필요할 것으로 생각됩니다.
      그런데 지금 어느 정도를 만드셨는데 어떤 부분이 필요하신지, 또 JavaScript 개발 및 웹 UI 개발 경험이 어느 정도 이신지 알기 어려워서 어떤 형태로 도움 말씀을 드려야 할지 알기가 조금 어렵습니다.

      • yhw

        답변 감사합니다!
        알려주신 예제 사이트와 d3로 인구밀도 시각화를 참고하여 섞어서 만들고 있습니다.
        http://leafletjs.com/examples/choropleth.html
        https://gist.github.com/e9t/55699e9fa8c3eb7fe40c
        위 두 사이트입니다.
        정말 죄송하지만 모르는 부분을 여쭤보자면..
        예제에서는 지도를 만들어, 지도위에 json 데이터를 뿌려주는 것 같은데.. 제가 가진 json 데이터와는 호환이 안돼서 불가능하며 json 파일 자체에 데이터가 포함되어 csv파일을 불러올 수 없다는 것이고,
        아래 사이트에서는 svg를 그려 json을 그려주는 것은 호환이 돼서 그려지고 한개의 csv파일을 불러올 수 있지만… 오버 시 데이터 보여주기, 지도확대 등 표현성이 부족합니다ㅠ
        제가 시각화 하고자 하는 것은..
        지도 위에 topoJSON을 불러와 그린 후, 기본적인 표현은 알려주신 예제와 똑같으며, 추가적으로 옵션을 바꿔줄 때 마다 각각 다른 csv파일 들을 불러와 지도를 바꿔서 보여주는 것을 구현하고자 합니다..
        책이나 인터넷 상에 예제가 혼자 공부하기엔 부족하여 여쭤보게 되었습니다.. 제가 만들고자 하는 것이 만드신 “서울 대기오염도 보기”와 csv/오픈api 를 제외하고는 아예 똑같았지만 만드신 코드를 보니 앵규라js 등 더 많은 것을 배워야해서요….(전공생도 아니고 정규교육을 받지 않은 대학생입니다..)
        실력도 설명도 많이 부족하지만 이것저것 구글링하면서 만들어보고자 하는 것이 커서 댓글 달게되었습니다ㅠㅠ
        혹시 가능하시다면 지도위에 topoJSON 파일을 csv파일과 함께 불러와 표현하는 간단한 소스나 설명만 해주시면 정말 감사하겠습니다ㅠㅠ 열심히 공부하겠습니다

        • yhw

          에고 정성스럽게 달았는데ㅠㅠ 너무 무리고 막무가내 질문을 드렸네요ㅠㅠ 일단 이것저것 해보고 이후에 다시 여쭤봐도될까요?ㅠㅠ 감사합니다

  • yhw

    안녕하세요!
    혹시 올려주신 예제 파일은, 해당 주의 값이 JSON파일에 입력되어 있는데,
    이것만 csv 파일로 불러와서 나타내게 할 수 있는 방법은 없을까요?

    • codefactory

      안녕하세요
      오늘 제가 계속 외근 등 일이 있어서 어제 올려주신 댓글 중 내용 긴 댓글에 있는 내용에 대하여 정확하게 못살펴봐서 답글을 못달았습니다. 죄송합니다.
      그리고 지금 주신 말씀에 대해서 말씀드리면
      일단 그렇게 하는 것이 가능한데, 그러면 기존 소스코드를 좀 고쳐야 하는 부분이 있으니, 기존 소스코드에서 JSON 을 사용하는 것을 그대로 유지했으면 합니다.
      그러면서 지금 말씀하신 것처럼 CSV 파일을 사용하시면 어떨까 하는데요, 어떤 말씀인가 하면 일단 CSV 를 읽어들이신 다음에 JSON 으로 직접 바꾸셔서 사용하시는 방법이 있을 수 있을 것 같습니다.
      CSV 는 텍스트 파일이므로 읽어들인 다음 자유롭게 원하는 형태로 변경해서 변수화 할 수 있으니 JSON 형태로 바꾸는 것도 가능할 것입니다.
      저는 이런 아이디어를 드리고 싶은데요, 더 좋은 방법도 있을 것 같으니, 좀더 연구해보셔도 좋으실 것 같습니다.
      감사합니다.

      • yhw

        답변 감사합니다!
        이것저것 제가 아는 방법으로 이것저것 생각해보니
        Json파일을 parse하여 배열로 바꾼 후,
        csv 파일을 불러와 배열에 추가한 후,
        배열을 다시 Json으로 바꾸는 방법이 있는것 같은데요..
        너무 복잡하고 코드가 길어지는게 아닐까 싶어서요!
        혹시 csv파일을 불러와서 Json파일의 내용을 바꾸는 그런 방법은 없을까요?
        너무 감사합니다!

        • codefactory

          답변이 너무 늦어서 죄송합니다.
          제가 해도 말씀해주신 방법으로 했을 것 같습니다. 저는 더 좋은 생각이 나지는 않는데요
          혹시 코드가 복잡하고 길다고 느껴지신다면, 좀더 연구하시면 더 좋은 방법을 찾으실 수 있을 것이라 생각합니다.
          감사합니다.