10. chatGPT에게 vue3 + d3.js + topojson 예제 코드를 물어보자

vue3 + d3.js 에서 날씨 지도를 만들기위해 chatGPT에게  다음과 같이 질문을 하였다.

 

정말 자세한 코드와 설명을 응답해주었다.

<template>
  <div ref="map"></div>
</template>

<script>
import * as d3 from 'd3'
import * as topojson from 'topojson-client'

export default {
  name: 'Map',
  mounted () {
    this.drawMap()
  },
  methods: {
    async drawMap () {
      const data = await d3.json('/path/to/topojson/file.json')
      const features = topojson.feature(data, data.objects.layerName).features

      const svg = d3.select(this.$refs.map)
                  .append('svg')
                  .attr('width', 600)
                  .attr('height', 400)

      const projection = d3.geoMercator()
                           .fitSize([600, 400], {type: 'FeatureCollection', features})
      const path = d3.geoPath().projection(projection)

      svg.selectAll('path')
         .data(features)
         .enter()
         .append('path')
         .attr('d', path)
         .attr('fill', 'gray')
         .attr('stroke', 'white')
         .attr('stroke-width', 0.5)
    }
  }
}
</script>

하지만 돌아가지 않는 코드 ㅜㅜ

 

bing에 물어봤더니...

자세한 정보에 필자의 블로그 주소가 나왔다.

어리둥절한 순간!

이런 코드를 작성한 적이 없는데 자세한 정보에 왜 필자의 블로그가 나오는 걸까?

 

위 코드는 data 가 없어서 제대로 실행되지 않는다. 

눈으로 봐도 실행될 것 같이 않아 테스트를 하지 않았다.

 

어쩔수 없이 검색의 노동을 동원하여 날 코딩으로 지도 만들기를 구현하였다.

<template>
    <div id="map-wrapper" class="map-wrapper">

    </div>
</template>

<script>
    import * as d3 from 'd3'
    import korea from '../../assets/mapjson/koreaarea.json';
    import * as topojson from "https://cdn.skypack.dev/topojson@3.0.2";


    export default {
        name: "KoreaMap",

        mounted() {
            this.drawMap();

        },

        methods: {
            drawMap() {
                const divWidth = document
                    .getElementById("map-wrapper")
                    .clientWidth;
                const width = (divWidth < 1000)
                    ? divWidth * 1
                    : 800;
                const height = width * 1;

                const geojson = topojson.feature(korea, korea.objects.poparea);
                const center = d3.geoCentroid(geojson);

                console.log(this.searchModalOpen, center)

                let projection = d3.geoMercator()
                        .scale(1)
                        .center(center)
                        .translate([0, 0]); 

                var path = d3
                    .geoPath()
                    .projection(projection) 

                const bounds = path.bounds(geojson);
                const widthScale = (bounds[1][0] - bounds[0][0]) / width;
                const heightScale = (bounds[1][1] - bounds[0][1]) / height;
                const scale = 1 / Math.max(widthScale, heightScale);
                const xoffset = width / 2 - scale * (bounds[1][0] + bounds[0][0]) / 2 + 0;
                const yoffset = height / 2 - scale * (bounds[1][1] + bounds[0][1]) / 2 + 0;
                const offset = [xoffset, yoffset];
                projection
                    .scale(scale)
                    .translate(offset); 
 

                var svg = d3
                    .select('.map-wrapper')
                    .append('svg')
                    .attr('height', height)
                    .attr('width', width);

                const g = svg.append("g");
                

                 const states = g.append("g")
                    .attr("cursor", "pointer")
                    .selectAll("path")
                    .data(topojson.feature(korea, korea.objects.poparea).features)
                    .join("path")
                    .attr("d", path); 
                
                g.append("path")
                    .attr("fill", "none")
                    .attr("stroke", "white")
                    .attr("stroke-linejoin", "round")
                    .attr("d", path(topojson.mesh(korea, korea.objects.poparea, (a, b) => a !== b)));
                
            }
        }
    }
</script>

<style scope>
.map-wrapper {
    position: relative;
    padding-left: 20%;
    text-align: center;
}
</style>

위 코드에서 

 

    import korea from '../../assets/mapjson/koreaarea.json';
    import * as topojson from "https://cdn.skypack.dev/topojson@3.0.2";

 

이 두 라인은 각자의 파일위치에 맞게 수정해서 사용하면 된다.

 

시도 지도파일은 앞서 이야기 한 방법으로 shp 파일을 받아 변환 툴을 사용하여 topojson 파일을 만들어 사용했다.

 

코드 실행 결과는 다음과 같다.

지도 색을 설정하지 않아 검은색으로 지도가 그려졌고, 시도 경계선은 뚜렷하게 구분되었다.

 

다음은 외부 데이터를 가지고와 지도위에 표현하는 내용을 소개하고자 한다.

 

정리하면 chatgpt와 bing의 응답 코드로는 정상적으로 동작하지 않았다.

그 코드를 수정하려 하였지만, 더 시간이 걸렸다.

 

ai에게 너무 많은 것을 기대하는 것은 아직 이르다고 생각이 된다.

물론 간단한 코드는 편하게 가져다 쓸 수 있지만, 난이도가 있는 것은 아직 만족스럽지는 않다.

 

모든 내용은 개인적 견해로 작성되었기 때문에 이 글이 정답이 아닐 수도 있다.

질문을 잘 못했거나, 사용법 잘 몰라서 그런 것일 수도 있기 때문에...