Top 23 JavaScript Data Visualization Projects
-
d3
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
Project mention: [OC] What are the most popular operating systems across all devices? [Jan 09 - Jan 21] | reddit.com/r/dataisbeautiful | 2021-02-28Tools used: d3js.org
-
three.js
JavaScript 3D library.
A starfield was one of the first things I built when learning to program. It's been quite some time now, and I've started learning shader programming with GLSL and three.js, so I decided why not go back to where it all started!
-
Scout
Get performance insights in less than 4 minutes. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
-
Chart.js
Simple HTML5 Charts using the <canvas> tag
Highcharts is great. I actually first tried using chartjs, but the performance was really bad with multiple threads. I should've just gone with the trusty highcharts from the get go :)
-
fabric.js
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser
-
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
Project mention: GPS data of all of my bike tours visualized (05-2020 - today) | reddit.com/r/bicycling | 2021-02-24Tools: Python, p5.js
-
Frappe Charts
Simple, responsive, modern SVG Charts with zero dependencies (by frappe)
-
Snap.svg
The JavaScript library for modern SVG graphics.
-
chartist-js
Simple responsive charts
Project mention: Understanding front-end data visualization tools ecosystem in 2021 📊📈 | dev.to | 2021-02-18Chartist.js
-
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
Project mention: Get Waves – Create SVG waves for your next design | reddit.com/r/webdev | 2021-02-25Check out http://paperjs.org/
-
raphael
JavaScript Vector Library
-
Highcharts JS
Highcharts JS, the JavaScript charting framework
Web-site: https://www.highcharts.com/products/highmaps/ GitHub stars: 9.5k, https://github.com/highcharts/highcharts Pricing: Free and paid (From $722) Map Data Source: Highcharts Dependencies: jQuery License: Highcharts copyright Category: Library Examples: https://www.highcharts.com/maps/demo
-
trianglify
Algorithmically generated triangle art
-
sigma.js
A JavaScript library dedicated to graph drawing
-
vega
A visualization grammar.
For Vega, I would just use the pre-built minified ES5 version: https://github.com/vega/vega#es5-support
Access it via a global variable.
-
c3
:bar_chart: A D3-based reusable chart library
-
victory
A collection of composable React components for building interactive data visualizations
Project mention: Understanding front-end data visualization tools ecosystem in 2021 📊📈 | dev.to | 2021-02-18Victory
-
svg.js
The lightweight library for manipulating and animating SVG
-
react-vis
Data Visualization Components
Project mention: Understanding front-end data visualization tools ecosystem in 2021 📊📈 | dev.to | 2021-02-18React-vis
-
dc.js
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js
-
nvd3
A reusable charting library written in d3.js
-
two.js
A renderer agnostic two-dimensional drawing api for the web.
-
rickshaw
JavaScript toolkit for creating interactive real-time graphs
-
uPlot
📈 A small, fast chart for time series, lines, areas, ohlc & bars
Project mention: Is It Possible For React Native To Render A Line | reddit.com/r/reactnative | 2021-02-07I was recently looking for a convenient solution to do the same, and found the performance of all SVG-based libraries to be very low. Having had great results with canvas-based libraries on the web, I made a small wrapper around React Native's WebView to allow Chart.js and uPlot to be used in React Native: react-native-canvas-charts.
Index
What are some of the best open-source Data Visualization projects in JavaScript? This list will help you:
Project | Stars | |
---|---|---|
1 | d3 | 95,812 |
2 | three.js | 67,797 |
3 | Chart.js | 52,236 |
4 | fabric.js | 18,122 |
5 | p5.js | 14,977 |
6 | Frappe Charts | 13,780 |
7 | Snap.svg | 13,055 |
8 | chartist-js | 12,464 |
9 | paper.js | 12,240 |
10 | raphael | 10,835 |
11 | Highcharts JS | 9,914 |
12 | trianglify | 9,631 |
13 | sigma.js | 9,321 |
14 | vega | 9,036 |
15 | c3 | 9,003 |
16 | victory | 8,689 |
17 | svg.js | 8,630 |
18 | react-vis | 7,687 |
19 | dc.js | 7,197 |
20 | nvd3 | 7,083 |
21 | two.js | 7,013 |
22 | rickshaw | 6,484 |
23 | uPlot | 5,943 |