Plotting for the web



Browser graphics but for graphing data. Especially popular for data dashboard.

Observable

A large friendly ecosystem built on top of D3

Observable Plot is a free, open-source JavaScript library to help you quickly visualize tabular data. It has a concise and (hopefully) memorable API to foster fluency — and plenty of examples to learn from and copy-paste.

Plotly

Plotly’s native python support (source) is supposed to be quite good and quite general these days, but AFAIK it was originally a JS library. It support high-resolution print-quality graphics, vector rendering and so on. Includes a large Latex subset.

echarts

Apache 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 realtime.
  • Professional Data Analysis: Manage data through datasets, which support data transforms like filtering, clustering, and regression to help analyze 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 customize.
  • 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.

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!

RAWgraphs live demo.

Sounds like a useful part of the svg toolchain. It is open source.

Fig b

Muze

chartshq/muze: Composable data visualisation library for web with a data-first approach now powered by WebAssembly:

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 over-ride any behavior 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 creating 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 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.

Stardust

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.

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.

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.

Fig a

Misc

  • 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

No comments yet. Why not leave one?

GitHub-flavored Markdown & a sane subset of HTML is supported.