Custom-built SVG graphics that respond to streaming data in real time

 

I built custom SVG graphics to represent a well/tank, pump, and filter to render dynamically and change their shape and size in real-time in response to data streaming in from sensors.

You can watch the well level lower and raise during and after irrigation. The well-water turns yellow when in the danger zone and red in the critical zone.

The pump toggles and the water turns blue when the pump is on, white when it is off.

The filter drops scale with the amount of pre- and post-filter pressure and change to a warning color when the filter needs to be changed.

The chem tank fills and empties periodically when it is in use.

  • Project Type: Data visualization for a web application.
  • Goals and Constraints: Boil down the essence of a vineyard's infrastructure so that its status can been seen at a glance.
  • Solution: Create dynamic SVG graphics with dynamic size and color to indicate status and when action needs to be taken.
  • Skills Used: D3.js, React, nio
  • Learn more about nio in agriculture here: https://niolabs.com/case-studies/agriculture