📊 경기도 인증 지역서점 데이터 시각화 — 지역별 분포 Bar Chart 구현기

https://bookstore-search-wneg.vercel.app/

Vite + React + TS

 

 

경기도 데이터 OpenAPI 연동 글 보러가기:

https://tuesday04.tistory.com/91

경기데이터드림- 경기도 지역서점 데이터 OpenAPI 연동기

 

1. 왜 Bar Chart인가?

경기도 인증 지역서점 데이터를 보면 각 서점에 SIGUN_NM(시·군 이름) 필드가 있습니다.
이를 이용해 지역별 서점 개수를 집계하면, “우리 동네엔 몇 개나 있지?”라는 질문을 한눈에 확인할 수 있습니다.

그래서 시각화 방식으로는 Bar Chart가 가장 적합했습니다.

• X축: 지역명
• Y축: 해당 지역의 인증 서점 수

2. 데이터 집계

React의 useMemo를 사용해 전체 데이터(allData)에서 지역별 서점 수를 집계했습니다.

const regionStats = useMemo(() => {
  const counts: Record<string, number> = {};
  allData.forEach((item) => {
    if (item.SIGUN_NM) {
      counts[item.SIGUN_NM] = (counts[item.SIGUN_NM] || 0) + 1;
    }
  });
  return Object.entries(counts).map(([region, count]) => ({
    region,
    count,
  }));
}, [allData]);

 

👉 이렇게 하면 [ { region: "수원시", count: 42 }, { region: "용인시", count: 30 }, ... ] 형태의 데이터가 생성됩니다.

---

3. Bar Chart 구현 (Recharts)

라이브러리는 Recharts를 사용했습니다.
ResponsiveContainer를 감싸주면 화면 크기에 맞춰 자동으로 크기가 조정됩니다.

import {
  BarChart, Bar, XAxis, YAxis,
  CartesianGrid, Tooltip, ResponsiveContainer
} from "recharts";

<ResponsiveContainer width="100%" height={400}>
  <BarChart data={regionStats}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="region" />
    <YAxis />
    <Tooltip />
    <Bar dataKey="count" fill="#3b82f6" />
  </BarChart>
</ResponsiveContainer>

4. 결과

이제 단순 리스트가 아니라,

• 어떤 지역에 서점이 몰려 있는지
• 어떤 지역은 상대적으로 적은지

한눈에 파악할 수 있는 분포 그래프가 완성됐습니다.