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} />
</>
);
}
같은 데이터, 다른 결과물
서울시 생활인구 데이터는 서울시에서 공개하고 있기 때문에 쉽게 얻을 수 있다. 생활 인구는 주민등록에 등록된 거주자가 아니라 특정 시간, 특정 지역에 실제 생활하는 인구이다.
원자료는 날짜, 시간, 지역(행정동), 연령, 성별 각각 인구수로 구성되어 있고 상상하기에도 엄청나게 빽빽한 데이터로 이루어져 있을 것 같다.
나는 현재 연령, 성별로 나누어 그래프를 나타냈는데 조만간 시간대에 따른 필터링을 추가할 예정이다. 동일한 데이터로 이렇게나 다른 결과물을 낼 수 있다는 것을 보여주는 사이트이다. 틈 날 때마다 방문하여 배우도록 하자.
서울시 생활 인구 코로플레스맵
Author And Source
이 문제에 관하여(TIL wecode 30. Recharts), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jjo-niixx/TIL-wecode-30.-Recharts저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)