Open Source Plotting Libraries (primarily for React)
This article is mainly just for my personal use in keeping track of all the plotting/graphing/charting/visualization libraries I come across. There are so many it is hard to keep track of them all and I honestly forget about some of them (or at least my assessment of them).
Caveats: Don’t take my “impressions” below very seriously. For many libraries, I just glanced at them and my impressions are primarily based on the examples. It is entirely possible, if not likely, that I’ve misjudged many libraries. Of course, all the library developers should be applauded for their contributions. Also note that I’m highly biased toward open source libraries that can be used for React. There are probably lots of great libraries I just skipped because they didn’t hit that sweet spot.
Updates: Since I wrote this I came across another worth checking out: Viser.
TL;DR
For those who don’t want to read about each individual library below (including my future lazy self), my totally subjective assessments of the libraries listed below:
Most comprehensive library: ECharts (runner-up: Nivo)
Best Line Plots: react-timeseries-charts, Dygraphs (runner-up: jqPlot)
Best Sankey Diagram: ECharts (runner-up: Semiotic)
Best Tree: vx (runner-up: vis.js)
Best Graph: ECharts (runner-up: vis.js)
Best Treemap: ECharts (runner-up: Nivo)
Best Contour: React-vis
Best Gauge: ECharts, (runner-up, but possibly buggy: jqPlot)
Best Sunburst: Nivo (runner-up: react-vis)
Best 3D Surface Viewer: vis.js and Deck.gl (tie)
Best Timeline: vis.js
Note that these choices may change over time.
Listing of Libraries (in no particular order)
react-timeseries-charts: “This charts library was built using React from the ground up, specifically to visualize TimeSeries data and network traffic data in particular.”
Rendering: React
Speciality: Time series data and network traffic visualization
Highlights: Multiple axes, Panning and Zooming, Baselines
Website: http://software.es.net/
Impression: Seems like they do a really nice job in their focus area of time-series data plots. The panning and zooming doesn’t employ the gestures I’d prefer, but it looks like it could be customized.
Semiotic: “charts that carry the conversation”
Rendering: React
Specialty: Striking visualizations and interactivity
Highlights: Lines (with annotations), Sankey, Network
Website: https://emeeks.github.io/semiotic/#/
Impression: Nice visualizations in general. Lots of exotic stuff I’m not sure I’d use. Network models have some nice options but they could be “prettier”.
Recharts: “A composable charting library built on React components”
Rendering: React
Speciality: Composability (build charts from React primitives)
Highlights: Synchronized Line Charts (also support non-contiguous and annotations), Mixing Chart Types, Treemaps
Website: http://recharts.org/
Impression: Nice. Lives up to the “composable” name. Had some issues with the “responsive” containers not actually doing anything.
vx: “REACT + D3 = VX”
Rendering: React
Speciality: Integration of d3
Highlights: Trees, Dendograms (also trees?), Voronoi
Website: https://vx-demo.now.sh/
Impression: I’m not a d3 expert, so I’m not sure how to extend these. They look good, but some are a bit spartan.
Nivo: “a rich set of dataviz components”
Rendering: React
Speciality: Integration of d3 + support for Canvas, SVG and HTML
Highlights: Sankey, Treemap, Sunburts, and interactive Storybook (nice!).
Website: http://nivo.rocks/#/
Impression: Very nice looking. Nice gallery and storybook.
Victory: “components for
modular charting and data visualization”
Rendering: React
Speciality: Composable
Highlights: Polar Plots
Website: http://formidable.com/open-source/victory/
Impression: Things have improved since the first time I looked at this. But I still find the appearance too spartan.
React-Vis: “A composable charting library”
Rendering: React
Speciality: Composability and customizability
Highlights: Contour Plots, Sunburts
Website: https://uber.github.io/react-vis
Impressions: Noticed lots of issues with layout and obstruction of labels.
Deck.gl: “a WebGL-powered framework for visual exploratory data analysis of large datasets”
Rendering: React and WebGL
Speciality: 3D rendering of large datasets
Highlights: 3D Paths, 3D Surface Explorer
Website: http://uber.github.io/deck.gl
Impressions: Quite polished. Seems to legitimately deal with lots of data.
React-Vis-Force: “d3-force graphs as React Components”
Rendering: React
Speciality: Rendering graphs (with force directed layout)
Highlights: Storybook, Animated Layout with Hover Effects
Website: https://github.com/uber/react-vis-force
Impressions: Focus is graphs. Seems like a typical force directed layout scheme, hover effects seemed a little slow with the Les Miserables data set.
Chart.js: “Simple yet flexible JavaScript charting for designers & developers”
Rendering: DOM (or React using react-chartjs-2)
Speciality: DOM based rendering using JSON for options and data
Highlights: Interpolated Lines
Website: http://www.chartjs.org/
Impressions: Seems to do the core things well. None of the examples seemed to use large amounts of data, so not sure how it would handle that.
jqPlot: “A Versatile and Expandable jQuery Plotting Plugin”
Rendering: DOM and JQuery
Speciality: Pure Javascript (no rendering framework)
Highlights: Animated charts, Lines with Fill, Hidden Plots, Meter Gauge (broken in demo), Zooming
Website: https://github.com/jqPlot/jqPlot/
Impressions: Impressive. A lot of care has gone into the look and feel of these components. Don’t let the fact that this is jQuery based fool you into thinking it doesn’t look great and work well.
Chartist: “Simple Responsive Charts”
Rendering: DOM and SVG using JSON for data (with React wrapper)
Speciality: Responsiveness and size (10kb)
Highlights: Animations
Website: http://gionkunz.github.io/chartist-js/
Impressions: While it really only handles line, bar and pie charts, it renders them nicely and the use of SVG gives lots of styling options.
ECharts 3.0: “A powerful, interactive charting and visualization library for browser”
Rendering: DOM (several options for React)
Speciality: Nice looking visuals
Highlights: Graphs, Treemaps, Parallels (overlaying vectors, e.g. design vectors), Sankey, Gauge,
Website: https://ecomfe.github.io/echarts-doc/public/en/index.html
Impressions: Quite polished. The fact that the developers are Chinese could be a small barrier, but seems like good support for English. Only thing it seems to be lacking is good zooming (has mouse wheel zooming, but not bounding box zooming)
Protovis: “A Graphical Toolkit for Visualization”
Rendering: D3
Speciality: D3 Visualizations
Highlights: Bubble Chart
Website: http://mbostock.github.io/protovis
Impressions: Not sure the distinction to D3 exactly.
Dygraphs: “a fast, flexible open source JavaScript charting library.”
Rendering: DOM (React wrapper available)
Speciality: Dynamic line graphs
Highlights: Synchronized Lines, Resizing, Series Highlight, Annotations
Website: http://dygraphs.com/
Impressions: For doing line graphs, it is really nice. Lots of support for interactivity.
Sigma.js: “a JavaScript library dedicated to graph drawing”
Rendering: DOM (React wrapper available)
Speciality: Graphs
Highlights: No interactive examples (!?!)
Website: http://sigmajs.org/
Impressions: Looks interesting. But the lack of interactive examples on the Sigma.js home page makes it pretty difficult to get a sense of the capabilities.
Taucharts: “Flexible javascript charting library
for data exploration”
Rendering: DOM (React wrapper available)
Speciality: Interactive exploration of data, mainly scatter plots
Highlights: Nice tooltips on data (can’t link directly to examples :-().
Website: https://www.taucharts.com/
Impressions: Nice tooltip options and looks pretty good for scatter plots.
Vis.js: “A dynamic, browser based visualization library”
Rendering: DOM (React wrapper available)
Speciality: Networks and Timelines
Highlights: Tree Layout, Edge Styling, Neighbor Highlighting, Customized Timelines, Grouping, Interactive 3D Surface Plots
Website: http://visjs.org/
Impressions: Really shines in networks and timelines
Highlights: Lines, Sankey
Website: https://emeeks.github.io/semiotic/#/
