-
Notifications
You must be signed in to change notification settings - Fork 23
Charts libraries for inspiration
Since we base our implementation on existing packages like rechart and limited to the browser implementation, I thought it would be a good idea to elaborate on these limitations, as well as add some example for inspiration for future designs.
The browser support for SVG, animation, and graphics is vast (more on note #2), But some implementations are easier than others. Any web application today would include external packages, meant to reused existing code created by others. For example - we use leaflet as a map engine, instead of creating one. While it is very much possible to create a map engine specifically design to our needs, this would be a long time - probably years, of coding.
For this reason, it is very much preferable to use external packages for things like pie charts, graphs, histograms, etc. As mentioned, All of our charts today based on rechart. While the official docs seem somewhat plain (as it should be), the library itself is pretty flexible. see some more complex examples here
We could include more libraries if required, and if needed - we can use D3 - an extremely flexible library that may be used for almost any web design, but these options should be our last resort. That is since using D3 requires much, much more coding and planning time, and mixing multiple charts library is not as good practice, and may result in inconsistent view (as the 2 libraries might differ in some stylish aspects) and code which is hard to maintain.
Generally, we can pretty much do anything on the web. see three.js for example. however, some things are harder to create and mantain. Creating a pie chart might seem simple, but doing it without using a library is a tedious task that requires much skill (This is the time to point out, most of our devs are juniors).
Regarding web development complexity - I find it easier to explain this by reminding what was the original usage of the web - displaying text and images, like new paper.
It is relatively easy to create text will image assembled in different colors, data, and locations in the card. Think about our accident_count_by_severity card. while data, colors, and image display do require some logic, this card is relatively easy to implement, and require no external dependencies (e.g. other libraries)
On the other hand, Accident by the hour original design may be a massive task for even a senior development, as each part of this chart should change dynamically, and since it is not a common pattern - it is very likely that we would not find any library which can help use building such chart
Well,