지오스파셜·네트워크·D3 애니메이션으로 맥락을 읽는 데이터 시각화

위치·관계·변화를 한 화면의 맥락으로 다루기

지오스파셜 시각화, 네트워크 그래프, D3.js 애니메이션을 결합하면 위치·관계·시간 축이 분리되지 않은 분석 환경을 만들 수 있다. 지오스파셜 시각화는 지리 좌표계 위에서 패턴을 찾고, 네트워크 그래프는 연결성·전파·중심성을 해석하며, 애니메이션은 변화와 상태 전이를 시간 흐름 속에서 보이게 한다.

지오스파셜 시각화는 좌표계(CRS)와 공간 인덱스를 기반으로 지리 객체를 투영(projection)하고, 이를 맵 타일과 벡터 레이어로 표현하는 방식이다. 공간 조인, 버퍼링, 히트맵 같은 공간 분석과도 연결된다.

네트워크 그래프는 노드와 엣지로 구성된 관계 데이터를 Force-directed, Dagre 등의 레이아웃 알고리즘으로 배치한다. 이 위에서 중심성이나 커뮤니티 같은 지표를 탐색할 수 있다.

D3.js 애니메이션은 스케일·도형·속성의 전환을 selection.transition과 requestAnimationFrame 기반으로 보간한다. 값이 바뀐 결과만 보여 주는 대신, 변화 과정과 입력 변동에 따른 미세한 상호작용 피드백까지 전달한다.

데이터 형태를 렌더링 가능한 상태로 만드는 과정

입력 단계에서는 스키마를 정규화하고 CRS를 통일한다. EPSG:4326에서 프로젝션으로 변환하는 작업, TopoJSON을 이용한 토폴로지 단순화, 중복 노드 병합을 포함한 그래프 정규화가 이 단계에 속한다. 공간 질의에는 R-tree, 그래프 질의에는 Adjacency list를 구성해 지연을 줄인다.

투영과 타일링 전략도 함께 정해야 한다. d3-geo의 지리 투영을 선택하고 타일링(슬러핑) 방식을 결정하며, 벡터 타일과 래스터 타일의 트레이드오프를 검토한다. 베이스맵·벡터·인터랙션 레이어를 분리하면 성능과 스타일을 각각 관리하기 쉽다.

그래프는 Force-directed, Hierarchical, Geo-force(좌표 고정) 레이아웃을 혼합할 수 있다. 쿨링 스케줄, 고정 핀, 서브그래프 단계적 로딩은 시뮬레이션을 안정화하는 방법이다. 줌·팬·피킹, 강조·페이딩, 모핑·트랜지션은 데이터 탐색 경험을 결정한다. 상태 전이를 명확히 전달하려면 Easing·Duration·Delay를 일관된 체계로 다루고, 모션 감도 설정과 애니메이션 건너뛰기 옵션도 제공해야 한다.

⤢✕

요소 규모와 상호작용에 따른 렌더러 선택

SVG·Canvas·WebGL은 서로 대체 관계라기보다 데이터 규모와 상호작용 요구에 따라 나눠 쓰는 렌더링 백엔드다. 오프스크린 캔버스, Web Worker, LOD(Level of Detail), 타일 캐싱, 샤딩은 백엔드 선택과 함께 적용할 수 있다.

백엔드	성능	확장성	일관성	안정성	운영 편의
SVG	소규모(≤5k 요소) 우수	제한적	벡터 선명도 높음	DOM 기반 예측 가능	스타일/접근성/툴팁 편리
Canvas	중간(수만 요소) 적합	높음	픽셀 기반, 반응형 보완 필요	상태 관리 필요	히트맵·점군 효율
WebGL	대규모(수십만+) 최적	매우 높음	셰이더 의존	드라이버/호환성 고려	초기 학습·셋업 비용 큼

공간과 관계 데이터를 탐색하는 장면

물류·배송 분석에서는 주문 포인트를 클러스터링한 뒤 도로망에 매칭하고, 시간대별 트래픽 가중 비용을 계산한다. 경로 애니메이션으로 SLA 리스크 구간을 강조할 수 있으며, 벡터 타일의 도로망·Canvas 점군·SVG 상호작용 레이어를 혼합하는 구성이 가능하다.

보안 이벤트 전파 네트워크는 호스트·프로세스·계정을 노드로 모델링하고, 의심 이벤트 엣지를 스트리밍한다. 중심성·커뮤니티 스코어를 계산한 다음 붉은 경보 엣지에 펄스 애니메이션을 적용한다. 포스 시뮬레이션은 Web Worker로 오프로딩하고, 임계치 이상만 실시간으로 강조할 수 있다.

마케팅 고객 여정에서는 터치포인트 전이 확률을 가중 엣지로 구성하고 어트리뷰션 스코어를 시각화한다. 세그먼트 모듈 강도를 애니메이션으로 강조하며, 계층형 레이아웃과 맥락 툴팁으로 경로 가독성을 확보한다.

스마트시티 IoT 맵 대시보드는 센서 타임시리즈를 다운샘플링한 뒤 공간 히트맵으로 표현하고 이상치 구간을 점멸 애니메이션으로 표시한다. 타일 캐싱과 LOD는 저사양 단말 대응에 사용된다.

SVG 지도에서 줌과 경로 변화를 표현하기

전제조건은 다음과 같다.

브라우저: 최신 Chrome/Firefox/Edge, ES Modules 지원
라이브러리: D3.js v7, TopoJSON v3
정적 서버: python -m http.server 등으로 로컬 호스팅

<!doctype html>
<meta charset="utf-8" />
<body>
  <svg id="map" width="960" height="520"></svg>
  <script type="module">
    import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
    import { feature } from "https://cdn.jsdelivr.net/npm/topojson-client@3/+esm";

    const svg = d3.select("#map");
    const width = +svg.attr("width"),
      height = +svg.attr("height");

    // 투영 및 패스
    const projection = d3
      .geoMercator()
      .fitSize([width, height], { type: "Sphere" });
    const path = d3.geoPath(projection);

    // 베이스
    svg
      .append("path")
      .datum({ type: "Sphere" })
      .attr("d", path)
      .attr("fill", "#f5f7fa")
      .attr("stroke", "#cfd8dc");

    // 데이터 로드
    const topo = await fetch(
      "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json",
    ).then((r) => r.json());
    const countries = feature(topo, topo.objects.countries).features;

    // 국가 경계
    const g = svg.append("g");
    g.selectAll("path")
      .data(countries)
      .join("path")
      .attr("d", path)
      .attr("fill", "#e3f2fd")
      .attr("stroke", "#90a4ae")
      .on("mouseenter", function () {
        d3.select(this).transition().duration(200).attr("fill", "#bbdefb");
      })
      .on("mouseleave", function () {
        d3.select(this).transition().duration(200).attr("fill", "#e3f2fd");
      });

    // 줌/팬
    svg.call(
      d3
        .zoom()
        .scaleExtent([1, 8])
        .on("zoom", (ev) => g.attr("transform", ev.transform)),
    );

    // 경로 애니메이션(예시 라인)
    const route = {
      type: "LineString",
      coordinates: [
        [2.3522, 48.8566],
        [77.1025, 28.7041],
        [139.6917, 35.6895],
      ],
    };
    const routePath = g
      .append("path")
      .datum(route)
      .attr("d", path)
      .attr("fill", "none")
      .attr("stroke", "#ff7043")
      .attr("stroke-width", 2)
      .attr("stroke-dasharray", function () {
        return this.getTotalLength();
      })
      .attr("stroke-dashoffset", function () {
        return this.getTotalLength();
      });

    // 트랜지션
    routePath
      .transition()
      .duration(3000)
      .ease(d3.easeCubic)
      .attr("stroke-dashoffset", 0);
  </script>
</body>

Canvas에서 대규모 그래프를 다루는 방식

<!doctype html>
<meta charset="utf-8" />
<canvas id="cnv" width="900" height="600"></canvas>
<script type="module">
  import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

  // 샘플 그래프 생성
  const N = 1500,
    L = 3000;
  const nodes = d3.range(N).map((i) => ({ id: i }));
  const links = d3.range(L).map(() => ({
    source: (Math.random() * N) | 0,
    target: (Math.random() * N) | 0,
    weight: Math.random(),
  }));

  const canvas = document.getElementById("cnv");
  const ctx = canvas.getContext("2d");
  const width = canvas.width,
    height = canvas.height;

  // 포스 시뮬레이션
  const sim = d3
    .forceSimulation(nodes)
    .force(
      "link",
      d3
        .forceLink(links)
        .id((d) => d.id)
        .strength(0.02),
    )
    .force("charge", d3.forceManyBody().strength(-12))
    .force("center", d3.forceCenter(width / 2, height / 2))
    .alphaDecay(0.03)
    .on("tick", draw);

  function draw() {
    ctx.clearRect(0, 0, width, height);
    ctx.save();
    ctx.translate(0.5, 0.5);

    // 엣지
    ctx.globalAlpha = 0.2;
    ctx.strokeStyle = "#607d8b";
    ctx.beginPath();
    for (const e of links) {
      ctx.moveTo(e.source.x, e.source.y);
      ctx.lineTo(e.target.x, e.target.y);
    }
    ctx.stroke();

    // 노드
    ctx.globalAlpha = 0.9;
    for (const n of nodes) {
      ctx.beginPath();
      ctx.fillStyle = "#42a5f5";
      ctx.arc(n.x, n.y, 2, 0, 2 * Math.PI);
      ctx.fill();
    }
    ctx.restore();
  }

  // 간단한 인터랙션: 클릭 근접 노드 강조
  canvas.addEventListener("click", (ev) => {
    const rect = canvas.getBoundingClientRect();
    const mx = ev.clientX - rect.left,
      my = ev.clientY - rect.top;
    let nearest = null,
      minD2 = 400;
    for (const n of nodes) {
      const d2 = (n.x - mx) ** 2 + (n.y - my) ** 2;
      if (d2 < minD2) {
        minD2 = d2;
        nearest = n;
      }
    }
    if (nearest) {
      // 위치 고정(핀) 및 시각 강조
      nearest.fx = nearest.x;
      nearest.fy = nearest.y;
      ctx.beginPath();
      ctx.strokeStyle = "#ef5350";
      ctx.lineWidth = 3;
      ctx.arc(nearest.x, nearest.y, 8, 0, 2 * Math.PI);
      ctx.stroke();
    }
  });
</script>

오류와 운영 조건을 설계에 포함하기

CRS가 맞지 않으면 EPSG 코드를 명시하고 proj4js로 런타임 재투영한다. 재투영에 실패한 레이어는 비활성화하고 로그를 남긴다. 지오메트리의 self-intersection은 검출 후 스냅·버퍼로 정정하며, TopoJSON 단순화에는 계층별로 다른 tolerance를 적용한다.

대규모 그래프에서는 이전 레이아웃을 활용하는 시뮬레이션 warm-start, 서브그래프 페이징, 상호작용 스로틀링(<=60Hz)을 적용한다. 위치 정보와 PII를 다룰 때는 좌표 노이즈 주입, 타임 윈도우 집계, 서버 측 필터를 우선 적용한다. 이때 프라이버시와 분석 해상도 사이에는 트레이드오프가 있다.

WebGL 가속은 대규모 처리에 유리하지만 드라이버 이슈가 생길 수 있다. 기능 감지로 SVG·Canvas 폴백 경로를 준비한다. 스타일과 상호작용은 선언형 SVG/D3가 유리하고, 성능은 Canvas/WebGL이 우위이므로 하이브리드 레이어링으로 절충할 수 있다. 배포 시에는 CDN 캐시·ETag를 활용하고 타일 서버 SLA를 확인하며, 워커 기반 계산으로 메인 스레드 블로킹을 막는다.

성능 개선이 분석 경험에 남기는 변화

SVG에서 Canvas로 전환한 사례에서는 5k→30k 요소에서 프레임 유지율이 20→55% 향상됐다. 포스 레이아웃에 Web Worker를 도입하면 클릭 지연은 150ms→60ms로 감소할 수 있다. GeoJSON을 TopoJSON으로 변환하면 페이로드를 60~80% 축소할 수 있다.

위치·관계·시간 축을 함께 다루면 원인과 결과의 맥락을 파악하기 쉬워진다. 상태 전이 애니메이션은 변화의 이해를 돕고, 에러 처리와 폴백 경로를 명시하면 실패 안전성을 확보할 수 있다. 초기에는 SVG 기반의 소규모 구성으로 시작하고, 데이터량이 커질수록 Canvas와 WebGL로 단계적으로 확장하는 방식이 적합하다.