Create a Custom Interactive Dashboard Using Svg

Posted3 months agoActive3 months ago

pkt0x53

86 points

23 comments

0xmm.inTechstory

supportivepositive

Debate

20/100

SvgDashboardInteractive Visualization

Key topics

Svg

Dashboard

Interactive Visualization

The post showcases creating a custom interactive dashboard using SVG, sparking discussion on its potential to replace overengineered tools and its scalability.

Snapshot generated from the HN discussion

Discussion Activity

Active discussion

First comment

N/A

Peak period

96-108h

Avg / period

4.6

Comment distribution23 data points

Loading chart...

Based on 23 loaded comments

Key moments

01Story posted
Oct 13, 2025 at 4:10 AM EDT
3 months ago
Step 01
02First comment
Oct 13, 2025 at 4:10 AM EDT
0s after posting
Step 02
03Peak activity
14 comments in 96-108h
Hottest window of the conversation
Step 03
04Latest activity
Oct 20, 2025 at 11:47 AM EDT
3 months ago
Step 04

Generating AI Summary...

Analyzing up to 500 comments to identify key contributors and discussion patterns

Discussion (23 comments)

Showing 23 comments

Evidlo

3 months ago

2 replies

Would be nice to have a demo on the page that lets you change the SVG interactively with radio buttons

melson

3 months ago

Thanks for the suggestions I will modify the demo

Joel_Mckay

3 months ago

One may attach JavaScript onClick action Listeners to any SVG named object (see attributes menu in inkscape.) For security reasons, this trick only works on live web server pages, and can't be run off the local file systems in most browsers.

While I would never allow uploading SVG formats to a public server... a vector format is great for line art style interface. =3

ludicrousdispla

3 months ago

1 reply

The flicker is problematic from a UX standpoint, it makes it harder to notice any changes. I like the approach but think that you are better off using CSS and changing the class of the port in order to change its fill color, which would also allow you to animate the transition between state changes.

vincnetas

3 months ago

1 reply

would animation libraries also work on SVG properties? Including colours.

andrewshadura

3 months ago

You don’t even need a library, CSS has animation inbuilt.

concrete_head

3 months ago

4 replies

I did this for an entire cities water supply network. SCADA systems UIs are a decade or more behind the modern web, not to mention slow loading and expensive. I took a reticulation diagram and marked all the flow meters, pressure transducers, pumps, reservoir level sensors and even river flow meters just like you said using ids for each element. The data is essentially pulled from a sql query every minute and pushed out through json including any active alarms.

This lets as many users view it as necessary and loads instantly. Has pan and zoom so yiu can capture everything on a page. Fully customisable, used draw.io for the diagram. Professional automation guys jaws dropped when i told them it took a few days to build and didnt require some ridiculous software license

phkahler

3 months ago

1 reply

How do you validate that each elements status is working? That there are no typos or copy/paste errors lurking in there? I guess you can inject test data after the sql query and verify the right elements change.

concrete_head

3 months ago

1 reply

You can use the browser console to inject any value to any element to verify expected behaviour.

There are also patterns in the water network so issues reveal themselves pretty quick then easy to fix. E.g. pumps on=green, off=grey, fault=red. Easy to spot an element that is misconfigured especially when you look at it all day.

You can also hover over an element and it reveals its tagname in a tooltip which helps. And the script has an error log for things such as if there are any tagnames in the query it can't find a drawing element for or if it failed to set some value

phkahler

3 months ago

>> You can use the browser console to inject any value to any element to verify expected behaviour.

Thanks! I'm not a web dev, so I'm not familiar with what that console can do or how easy that is. Sounds like fun.

s1110

3 months ago

1 reply

I'd like to learn more about this system! Also, what's on the backend side? How do you collect data from the sensors? Check out my river meteo-station: https://imgur.com/a/agk-RRovIkg

concrete_head

3 months ago

Its a typical utilities SCADA system most cities operate.

Much like your setup their are sensors fitted to various infrastructure connected to PLC's connected to licensed uhf radio modems back to a base station (with a few hops through repeaters or microwave backhaul) into a PC running some kind of IO server which handles all the polling and collects the data into a database and SCADA software (Aveva).

Its a weird mashup of hardware and protocols (dnp3, modbus, serial) plus some data coming in through IoT devices over http and all sorts of bits.

All i built was a python script that runs the query (we are talking 200 bits of data) every minite and dumps it into a JSON file. Then there is a caddy server which serves the json, SVG (1.5mb uncompressed) and a vanilla html/javascript (300 ish lines of code, AI helped get started) page that displays it.

Its not open to public, nor is it a replacement for SCADA (SCADA has many many more objects plus the ability to control and send out alarms). There are many more people wanting 'view only' access than the city has pricey SCADA licenses for, so if fills this gap for free. Sorry i can't share more, i moved on from that job.

noman-land

3 months ago

I love hearing stories like this. Hard not to love all the open web tech we can all use for free. Good reminder just how revolutionary it can be.

andrewrn

3 months ago

This vaguely reminds me of when I briefly worked at an oil company as a drafter. All their P&ID's are drawn in AutoCAD .dwg files, which isn't searchable at all or intelligible to the computer. AutoCAD sucks and has a stranglehold on these older "systems" drawings (as opposed to individual mechanical parts). Also, each company has its own different drawing spec and you need to have a lot of domain knowledge to understand a drawing. I had this grand idea that I didn't follow through with of JSON-defined "drawings" that could then be rendered to svg. Maybe a graph data structure would be better to represent the data. This would make them searchable, and LLM-ready so you could ask natural language questions of an entire refinery or pipeline or water treatment plant or chemical plant.

Not quite the same as its not real-time SCADA, but still interesting. It seems like there is big opportunity here for someone who can crack it.

a-ungurianu

3 months ago

1 reply

In interesting implementation of this is the Grafana Flow plugin: https://grafana.com/grafana/plugins/andrewbmchugh-flow-panel...

This lets you do pretty much the same thing in the post above, but have the colors tied to Grafana metrics. It's been great to make very intuitive dashboards, especially building dependency graphs and annotating them with live data.

CaptainOfCoit

3 months ago

> In interesting implementation of this is the Grafana Flow plugin: https://grafana.com/grafana/plugins/andrewbmchugh-flow-panel...

Woah, been using Grafana for a long time, always wished for something like that, wasn't aware of that plugin! Thanks a lot for sharing.

That 3rd example looks really useful for debugging purposes!

simquat

3 months ago

1 reply

That's cool! This resonates a lot with what I'm up to. I'm using SVGs as UI pieces and wiring them to composable logic blocks so to make things interactive without having to write code.

/!\ Self-promo I'm working on Breadboard[0]. Here an interactive demo[1] – no signup required –.

[0] https://breadboards.io/ [1] https://app.breadboards.io/demo

simquat

3 months ago

here's a quick demo video showing this in action: https://www.youtube.com/watch?v=tg_W86tk_EM

florians

3 months ago

This is quite genius. Instead of wasting time with responsive design, grid and flex layout complexities, this solutions gets the job done.

That’s how I would have approached it in Flash back in the days when 800x600 was all you had to worry about.

pdyc

3 months ago

:-) i was expecting charts/tables etc. from dashboard but was pleasantly surprised to see the box. I recently created tool for creating dashboard and i never thought anyone would want dashboard like that :-) (my tool doesn't support this kind of dashboard either)

mrasong

3 months ago

The real win here is ditching overengineered tools like Grafana for a use case-specific solution—though I wonder how they’ll handle more complex state logic (like nested device dependencies) as the dashboard scales.

sspaeti

3 months ago

oh this is amazing. I'm using https://boxy-svg.com/ for SVGs generated by Claude, and then edit and update it myself. SVG is very powerful.

pkt0x53Author

3 months ago

Create a Custom Interactive Infrastructure Dashboards using SVG

View full discussion on Hacker News

ID: 45565977Type: storyLast synced: 11/20/2025, 8:37:21 PM

Want the full context?