개요📝

전국에 설치된 수 천개의 센서의 정보를 서버로부터 가져와 지도, 그래프, 표로 표현했습니다.

경북대학교 시스템 소프트웨어 연구실에서 6개월 동안 진행한 프로젝트입니다.

기술스택⚙️

• React
• React-Router-DOM
• Axios
• Deck.gl
• D3.js
• Chart.js

• Deck.gl을 이용한 센서 위치를 데이터 시각화 했습니다.
• Deck.gl 내부 설정을 통해 클러스터링 범위를 지정했습니다.
• API통신으로 axios 라이브러리를 사용했고, GET 요청을 통해 센서의 정보를 불러왔습니다.
• map에 표시된 막대를 클릭하면 오른쪽에 클러스터링된 센서들의 상세정보를 보여주는 창을 띄웠습니다.

• 센서가 기록한 값을 D3.js 라이브러리를 활용해 line graph로 표현했습니다.
• line graph에 hovering하면 상세 값을 tooltip으로 표시해주었습니다.