I'm building out a home automation suite. I'll be blogging about it on my new Forem Hometechnica in detail if you want to follow me there.
But a question for DEV in general: What are some libraries for visualization... It's a broad question, but right now I'm willing to be very exploratory with my approach to displaying lights being on or off, or showing the state of things in a floor plan, or anything like that.
Literally anything that could be used to create interactive visuals would be great to hear about!
Top comments (25)
I would suggest D3. I've used it from a complete newbie perspective and it's a versatile library with good documentation and examples to get started.
One area and question I threw into the web was how to use my own data. It's pretty straightforward. You simply fetch data which has the same structure as the data used in the examples, and load it in. Here's an example of me using the globe 🌎 from a D3 example.
It does so much! I want to eventually make a dashboard with all my smart things monitored and would love to use it for that. I even used it for my grad school capstone project.
Though I never recommend it at work since it tends to be overkill, but that's what makes it great for tinkering at home haha
Overkill. I agree to some extent. But it's extremely capable too. Smart things monitored sounds like an interesting project.
I looked at some of the other suggestions. The visualisation techniques and libraries get better and better.
Something I would consider depending on the type of visualization you're trying to make is SVG, coupled with a vue layer framework like VueJS or React as needed for the interactivity.
This is valid for D3 and other tools as well!
Here is an example from Sarah Drasner using VueJS and GSAP:
Comment-sized pen might not look good, view the pen on a new tab for the full effect
Totally forgot Sarah drasner until I saw your comment she has done some amazing visualisations! Well worth checking out her work for anyone reading this, really opened my eyes to what is possible with CSS some years ago
Great example. Any tutorial links?
Building something on similar lines. Explored these so far
Konva seems to be the best one for this kinda thing so far (using it with vue btw)
If you find a better alternative, I'd definition check it out.
Also, I have seen people building really cool things with leaflet.js here are some examples
codecanyon.net/item/yourmap-custom...
anthonyblackham.com/floorplans/
I've used Pixi. Quick to get started.
I've used D3. If you're familiar with jQuery, it feels like that. It can be confusing at first with the concept of data binding, but there is good documentation and examples out there. You're basically creating the visualization from scratch.
I've also used Google Charts. Pre-made charts so it's a bit easier.
D3 is probably the most powerful lib but complex, has a steep learning curve ... depending on their goals it might be overkill (or not)
Agreed. Depends on what's needed.
I wrote a three-part series on line charts in Elm. The charts it generates are not themselves inherently interactive, but one could add interactive controls outside the chart to control it.
Real estate industry has a nice kick about these tools. I'm not going to mention paid ones but I guess Three.js is quite out there when doing "indoor view". If you rely only on topographical then I don't know much but using MapBox or such tools can be customised to show 3D objects or images presenting something like in your cover image. You just fix that map viewer to always look from above and place images on certain "clicks". I've been working in such industry and due to NDA am prevented of sharing too much but I can always talk about these opensource tools that I kind of new before starting in industry.
To future explain why Map: Let's say you have apartment and a house and you really dislike scrolling through those text-based items. You open up a map, pick which place, which floor, and click on that light, or the heater or whatever to be on while your getting home. Also if you're real estate manager, and have couple of those people coming over but not sure you will make it in time, you fire up the map, click specific house and turn on front lights or some specific thing. Then customers could find out which house should they wait in front off in case you're late. As for 3D - why not :D
I've used React Diagrams for a dynamic data pipeline configuration editor. Like some kind of workflow editor. Haven't researched any other libraries since then, so I don't know if there are better options, but this proved to be a pretty versatile lib.
github.com/projectstorm/react-diag...
Have a look at ngx-admin
Not a visualization library, but there is a nice IOT dashboard with many components that you may find useful. Multiple themes are available.
Another vote for D3 from me but that is somewhat of a charting library for working with numbers and displaying data visualizations... my personal favourite visualisation library would be three.js as you can be rather unlimited with that and render in 2D or 3D spaces.
I contribute a little bit to github.com/pmndrs/react-three-fiber which is a react renderer for three.js, I prefer the declarative nature and you end up writing less code IMO with better structure and it's just as fast.
We also have a very nice community on discord.
I discovered this yesterday and it looks super cool.
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.