yolantele / sizzling-data-viz

sizzling data visualisations - react

Sizzling Steam Graphs Data Visualisation

This App Aims to Sketch out possible data visualisations for time-based periodic data to reveal new meaning in the large and otherwise difficult to digest data sets.

using the test Data provided within the project you can launch the app:

• install dependencies run yarn or npm -i
• run yarn start to see the app on http://localhost:3000/

On the test Data Set

• the test data came in as 3 large data sets: meters, buildings and half hourly readings (the last one being RAM intensive)
• A lot of parsing and looping is achieved on the FE with the useData React custom hook - where all of data manipulation is handled in isolation away from components - making it easier to test logics.
• The graphs visualize each buildings use of water, gas and electricity values combined into one aggregate number, to draw broad overviews of time dependand consumption volumes agnostic of energy type.
• The parsing of data volume/size does cause some friction with the FE graphs sketches using svg paths - with delay in reloads. Further development would focus on resolving such issue by looking into the modules library settings.

I am diving deeper into d3 and learing more and more on Data Science + Visualizations. Please see my other attempts at d3 visualizations as an exported npm module for circular sankey visualizations, or read more on my blog.

Sizzling Steam graphs UI