DEV Community

Dan Englishby
Dan Englishby

Posted on

A Water Filling d3.js Visualization

I stumbled across a really oddball JavaScript visualization that probably doesn't have a whole range of uses. But in the world we live in nowadays, AI technology and home-smart devices, I thought of a perfect use-case.

Let's imagine your house combi-boiler (this is what they're called in the UK) is linked to your home internet. Then, you actually had access to its data, namely, how much water is currently being pumped through due to the load-request from the taps!

With this single value of data, you could build the following JavaScript visualization on your own personal Home-Dashboard.

Water Load Gauge

Hit the switch to turn on the water!

By using a little d3.js and an additional community plugin, this brilliant little visualization can be achieved.

For reference, the JS used to produce this visualization are found in the following links -

d3.js
brattonc liquidFillGauge.js

And credit to prakash27dec for the toggle switch snippet which can be found here -
prakash27dec toggle switch

Enjoy

Top comments (0)