DEV Community

loading...
Cover image for What are some interesting visualization libraries?

What are some interesting visualization libraries?

ben profile image Ben Halpern ・1 min read

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!

Discussion (25)

pic
Editor guide
Collapse
bernardbaker profile image
Bernard Baker

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.

Collapse
itsasine profile image
ItsASine (Kayla)

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

Collapse
bernardbaker profile image
Bernard Baker

Overkill. I agree to some extent. But it's extremely capable too. Smart things monitored sounds like an interesting project.

Collapse
jmau111 profile image
Julien Maury

efficient library, great choice

Collapse
bernardbaker profile image
Bernard Baker

I looked at some of the other suggestions. The visualisation techniques and libraries get better and better.

Collapse
antogarand profile image
Antony Garand

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

Collapse
imthedeveloper profile image
ImTheDeveloper

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

Collapse
bernardbaker profile image
Bernard Baker

Great example. Any tutorial links?

Collapse
fayaz profile image
Fayaz Ahmed

Building something on similar lines. Explored these so far

  1. Konva.js
  2. D3
  3. Pixi
  4. Feather.js
  5. Interact.js if we plan om using plain html

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/

Collapse
bernardbaker profile image
Bernard Baker

I've used Pixi. Quick to get started.

Collapse
webbureaucrat profile image
webbureaucrat

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.

Collapse
greenroommate profile image
Haris Secic

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.

Collapse
greenroommate profile image
Haris Secic

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

Collapse
nightwolfdev profile image
nightwolfdev

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.

Collapse
leob profile image
leob

D3 is probably the most powerful lib but complex, has a steep learning curve ... depending on their goals it might be overkill (or not)

Collapse
nightwolfdev profile image
nightwolfdev

Agreed. Depends on what's needed.

Collapse
hatemhosny profile image
Hatem Hosny

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.

Collapse
fasani profile image
Michael Fasani

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.

Collapse
alexandrudanpop profile image
Alexandru-Dan Pop

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...

Collapse
sheikh_ishaan profile image
Ishaan

I discovered this yesterday and it looks super cool.

GitHub logo jwilber / roughViz

Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

Collapse
uminer profile image
Collapse
jessicagarson profile image
Jessica Garson

For making live visualizations for concerts and other activities I like Hydra a lot github.com/ojack/hydra

Collapse
tam360 profile image
Mirza

I use Apache Echarts on daily basis. It's really easy to use and provides flexible API for building awesome visualizations.

Collapse
kunde21 profile image
Chad Kunde

If you're like me and prefer TUI, I'd recommend github.com/gizak/termui

github.com/rivo/tview at a slightly lower (more powerful/flexible) level

Collapse
ozenero profile image
Info Comment marked as low quality/non-constructive by the community. View code of conduct
ozenero.com

So good! love the tutorial! I also have a tutorial to share with you! Thanks

loizenai.com/node-js-postgresql-cr...