Plotting for the web
November 20, 2015 — April 5, 2022
Browser graphics but for graphing data. Especially popular for data dashboards, when the user-interaction affordances of web browsers make up for the lack of decent statistical affordances in JavaScript.
1 Plotly
Plotly backends many languages now but IIRC it was originally a JS library and does great at off-the-shelf browser plots. It supports high-resolution print-quality graphics, vector rendering and so on, and maybe the best documentation out of everything here. See plotly.
2 echarts
- Flexible Chart Types: Apache ECharts provides more than 20 chart types available out of the box, along with a dozen components, and each of them can be arbitrarily combined to use.
- Powerful Rendering Engine: Easily switch between Canvas and SVG rendering. Progressive rendering and stream loading make it possible to render 10 million data in real time.
- Professional Data Analysis: Manage data through datasets, which support data transforms like filtering, clustering, and regression to help analyse multi-dimensional analysis of the same data.
- Elegant Visual Design: The default design follows visualization principles, supports responsive design. Flexible configurations make it easy to customise.
- A Healthy Community: The active open-source community ensures the healthy development of the project and contributes a wealth of third-party extensions.
- Accessibility-Friendly: Automatically generated chart descriptions and decal patterns help users with disabilities understand the content and the stories behind the charts.
3 d3.js
The classic, d3.js. If you just have some data and some basic JavaScript skills, use this.
- Extensions for common graph needs, plottable.js
- For people using react.js, Victory is an alternative.
In practice, it requires quite a lot of work to do stuff in D3, and I have gotten nowhere with it.
4 RAWgraphs
RAWGraphs is an open web tool to create custom vector-based visualizations on top of the amazing d3.js library. It has been developed by DensityDesign Research Lab (Politecnico di Milano), Calibro and INMAGIK.
Primarily conceived as a tool for designers and vis geeks, RAWGraphs aims at providing a missing link between spreadsheet applications (e.g., LibreOffice Calc, Microsoft Excel, Apple Numbers, Google Docs) and vector graphics editors (e.g., Inkscape, Adobe Illustrator).
RAWGraphs works with tabular data (e.g., spreadsheets and comma-separated values) as well as with copied-and-pasted texts from other applications. Based on the SVG format, visualizations can be easily edited with vector graphics applications for further refinements or directly embedded into web pages.
Knowing the need to work with sensitive information, the data injected into RAWGraphs is processed only by the web browser: no server-side operations or storages are performed. No one will see, touch or copy your data!
See the RAWgraphs live demo.
Sounds like a useful part of the svg toolchain. It is open source.
5 Observable
There is a system called observablejs which combines some exploratory data analysis, some visualization and UI. It specialises in interactive visualization. Notably integrates into quarto. By the team behind D3.
6 Muze
Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It uses a layered Grammar of Graphics (GoG) to create composable and interactive data visualization for web. It is ideal for use in visual analytics dashboards & applications to create highly performant, interactive, multi-dimensional, and composable visualizations.
It uses a data-first approach to define the constructs and layers of the chart, automatically generates cross-chart interactivity, and allows you to override any behaviour or interaction on the chart.
Muze uses an in-browser DataModel to store and transform data, and control the behaviour of every component in the visualization, thereby enabling the creation of complex and cross-connected charts.
Features:
- 🍗 Build complex and interactive visualizations by using composable layer constructs.
- 🔨 Use rich data operators to transform, visualize and interact with data.
- 👯 Define custom interactions by configuring physical behavioural model and side effect.
- ✂️ Use css to change the look and feel of the charts.
- ☀️ Have a single source of truth for all your visualization and interaction controlled from data.
- 🔩 Integrate easily with your existing application by dispatching actions on demand.
- 🚀 Uses WebAssembly for handling huge datasets and for better performance.
7 Stardust
is a library for rendering information visualizations with GPU (WebGL). Stardust provides an easy-to-use and familiar API for defining marks and binding data to them. With Stardust, you can render tens of thousands of markers and animate them in real time without the hassle of managing WebGL shaders and buffers.
Looks a little D3-like but without the mysterious DOM stuff.
8 Vega
vega …
is a declarative format for creating, saving, and sharing visualization designs. With Vega, visualizations are described in JSON, and generate interactive views using either HTML5 Canvas or SVG.
vega-lite claims to be a ggplot-like layer atop it.
9 Text
9.1 Rough notation
A small JavaScript library to create and animate annotations on a web page
Rough Notation uses RoughJS to create a hand-drawn look and feel. Elements can be annotated in a number of different styles. Animation duration and delay can be configured, or just turned off.
9.2 Nutshell.js
10 Incoming
- Animation using velocity.js.
- lightning hip new node.js server-based thing
- flot is also statistics-oriented charting.
- waveform graphs audio files for you
- jsxgraph attempts to do lots of ‘graphical’ things at once, e.g. Euclidean Geometry, parametric curves, polar curves, data plots, Bezier curves, Differential equations, Turtle graphics, Lindenmayer systems, tangents, normals…
- graphviz (as seen in diagrams) also runs in JavaScript as viz.js.
- Sigma.js is a JavaScript flowchart/network diagram framework