search

IT2901-SINTEF01 / frontend

Frontend for our open data visualisation platform.
https://sintef01.netlify.app/
Apache License 2.0
13 stars 1 forks source link

Find javascript libraries for visualisation #4

Closed blauks closed 3 years ago

blauks commented 3 years ago

Examples could be P5js and threejs, try to experiment with them a bit aswell too see what we could do with them.

Post your findings here!

emilom commented 3 years ago

If we only need graphs we can use more general frameworks, this includes:

Chart.Js

Very popular open-source library for building responsive bar, pie, and line charts. 50k stars on gitHub. Well documented. There are several npm packages that allow charts to be created in React; react-chartjs-2 is one of the packages which makes the creation of charts and graphs ​very easy. Some features may be more challenging to implement. Chart.js renders its charts using the Canvas element which results in good performance compared with SVG, espcially when rendering a large amount of data. The other advantage of Canvas rendering is that it’s relatively easy to download the chart as an image file.

Rechart

A composable charting library built on React components. Super simple for React-based projects, because you can use it natively as a component. Good documentation with many examples. Uses SVG, provides better performance with a larger surface or a smaller number of objects.

React-Vis

React-vis components are designed to work just like other React components. They have properties, children and callbacks. They can be composed. You can create complex charts with a minimum amount of code and sensible defaults, however, you can also customize every aspect of your chart. Industry-strong: React-vis was built to support the many internal tools at Uber.

If none of the simple charts can be used to visualize our data data, or we need more advanced interactivity on your elements we should use a Low-level and complex dataviz tool.

D3.js

Probably the most popular low-level data visualization library on the internet (95k stars github). We have to create everything ourselves, but there are a massive amount of guides and examples online. May be a bit tricky to implement with react, but there are guides:

13 hours crash course in dataviz. Theory and tutorials for D3. https://www.youtube.com/watch?v=_8V5o2UHG0E&ab_channel=freeCodeCamp.org

emilom commented 3 years ago

Will try to set up a quick example with each alternative 😏

FredrikAugust commented 3 years ago

If you want to combine the power of three.js with charting libraries it might also be interesting to take a look at

visx

By AirBnB

It gives you a lot of power over the visualisation while erasing a lot of the boilerplate code required to create responsive visualisations.

It's seen pretty good adoption, and should be mature enough to start using seriously with 92k/downloads per month and 14k stars on GH.

They have a lot of demos, examples and guides in their github repo, such as this one showing off animation.

It's a lot harder to use than say chart.js or rechart as it's a visualisation framework and not a charting library, but consequentially grant you a lot of power to create cool visusalisations!

If you'd like to try this one out as well, @emilom, you could check out their "Getting started" guide.

I further suppose it's an idea to hear what ideas @IT2901-SINTEF01/ux-design has. If they'd like to create custom visualisations, three.js is necessary (and thus visx might be a good supplement), but if they'd like to use premade charts, then chart.js (or a competitor) will suffice.

FredrikAugust commented 3 years ago

For examples, I can recommend CodePen for creating quick prototypes. This removed the need for installing anything when evaluating the different libraries.

emilom commented 3 years ago

Yes, I should have done that... I have a simple prototype for Rechart, React-Vis and D3 locally now. I struggled to find learning resources for visx, as it is relatively new.

FredrikAugust commented 3 years ago

Conclusion: