TIL wecode 30. Recharts

현재 하는 프로젝트에서 서울시의 생활인구 데이터를 시각화하는 역할을 맡고 있다. D3, recharts 등과 같은 툴을 이용하여 해당 지역의 시간에 따른 성별 및 연령대에 따른 생활인구의 변화를 나타내는 중이고, 이번 포스팅은 recharts를 이용한 결과물이다.

recharts 사용하기

import React, { useEffect, useState } from "react";
import styled from "styled-components";
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from "recharts";

function Population() {
  const [data, setData] = useState({});
  const [filteredInput, setFilteredInput] = useState({});
  const [filteredPlace, setFilteredPlace] = useState("");
  const [filteredTime, setFilteredTime] = useState("");
  const [filteredTotal, setFilteredTotal] = useState("");

  useEffect(() => {
    fetch("/data/population/Population.json")
      .then((res) => res.json())
      .then((res) => setData(res));
  }, []);

  const handleSearch = (e) => {
    const filteredInput = data.date.filter(
      (item) => item.ADSTRD_CODE_SE === e.target.value
    );
    setFilteredInput(filteredInput);
  };

  const handleData = () => {
    const selectedData = filteredInput[0];
    setFilteredPlace(selectedData.ADSTRD_CODE_SE);
    setFilteredTime(selectedData.TMZON_PD_SE);
    setFilteredTotal(selectedData.TOT_LVPOP_CO);

    return setFilteredInput([
      {
        name: 10,
        여성:
          Number(selectedData.FEMALE_F10T14_LVPOP_CO) +
          Number(selectedData.FEMALE_F15T19_LVPOP_CO),
        남성:
          Number(selectedData.MALE_F10T14_LVPOP_CO) +
          Number(selectedData.MALE_F15T19_LVPOP_CO),
      }
    ]);
  };

  return (
    <>
      <TestBtn onClick={handleData}>Population</TestBtn>
      <TestSearch onChange={handleSearch} placeholder="지역코드를 검색하세요" />
      <TestSummaryBox>
        <TestBox>PLACE: {filteredPlace}</TestBox>
        <TestBox>TIME: {filteredTime}</TestBox>
        <TestBox>TOTAL: {filteredTotal}</TestBox>
      </TestSummaryBox>
      <LineChart
        width={500}
        height={300}
        data={filteredInput}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis type="number" domain={[0, "auto"]} />
        <Tooltip />
        <Legend />
        <Line
          type="natural"
          dataKey="남성"
          stroke="#1DA1F2"
          activeDot={{ r: 4 }}
        />
        <Line
          type="natural"
          dataKey="여성"
          stroke="#CB504A"
          activeDot={{ r: 4 }}
        />
      </LineChart>
      <svg ref={svgRef} />
    </>
  );
}

같은 데이터, 다른 결과물

서울시 생활인구 데이터는 서울시에서 공개하고 있기 때문에 쉽게 얻을 수 있다. 생활 인구는 주민등록에 등록된 거주자가 아니라 특정 시간, 특정 지역에 실제 생활하는 인구이다.

원자료는 날짜, 시간, 지역(행정동), 연령, 성별 각각 인구수로 구성되어 있고 상상하기에도 엄청나게 빽빽한 데이터로 이루어져 있을 것 같다.

나는 현재 연령, 성별로 나누어 그래프를 나타냈는데 조만간 시간대에 따른 필터링을 추가할 예정이다. 동일한 데이터로 이렇게나 다른 결과물을 낼 수 있다는 것을 보여주는 사이트이다. 틈 날 때마다 방문하여 배우도록 하자.
서울시 생활 인구 코로플레스맵