Top 23 JavaScript Data Visualization Projects

• d3

  93 98,858 7.0 JavaScript

  Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

  

  Project mention: does anyone know with what software I can make data driven graphics like this? | reddit.com/r/StockMarket | 2021-10-10

• three.js

  106 74,907 9.9 JavaScript

  JavaScript 3D Library.

  Project mention: How to create a slick website like this? | reddit.com/r/webdev | 2021-10-12

  the 3D models in the background are mostly handled via a 3D JS framework such as threejs

• Syncfusion

  syncfusion.com

  sponsored

  Build stunning web applications quickly using Syncfusion JavaScript UI controls.. The Syncfusion JavaScript suite offers more than 65 cross-platform, responsive, and lightweight JS/HTML5 UI controls for building modern web applications.

  

• Chart.js

  62 55,054 9.7 JavaScript

  Simple HTML5 Charts using the <canvas> tag

  

  Project mention: Week 2 of the journey: Settling on the frameworks | reddit.com/r/EntrepreneurRideAlong | 2021-10-07

  I used this guide to add a sidebar for navigation and Chartjs library to chart out the data for illustration.

• fabric.js

  18 20,045 8.4 JavaScript

  Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

  

  Project mention: Build a facebook story creator using ReactJS and FabricJS | dev.to | 2021-10-10

  I use ReactJS to develop this feature, with text story it's enough, but with image story, we need to find a library that helps us deal with add/remove text blocks, change direction, size,... and I came up with Fabric Fabric provides interactive object model on top of the canvas element, that's exactly what we want to do here. I think you'd better go to the Fabric website and read about it before continue reading.

• p5.js

  82 16,179 9.4 JavaScript

  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: Performance discrepancies between devices and browsers | reddit.com/r/webgl | 2021-10-14

  Working on a p5 project which uses a WEBGL canvas and I've been encountering some frustrating variance in performance with a p5.js sketch which uses WEBGL. It runs great on my machine with Chrome but very slow on Firefox. For other people who have tried it it runs slow on all their browsers despite having a new computer...

• Frappe Charts

  0 14,051 5.8 JavaScript

  Simple, responsive, modern SVG Charts with zero dependencies (by frappe)

  

• plotly.js

  13 14,032 9.9 JavaScript

  Open-source JavaScript charting library behind Plotly and Dash

  

  Project mention: Using Plotly in React to build dynamic charts and graphs | dev.to | 2021-10-08

  This article taught you how to build charts, graphs, and dynamic plots with Plotly. You can learn more about Plotly in their official documentation here. If you have any questions, don't hesitate to contact me on Twitter at @LordChuks3.

• Nanos

  github.com/nanovms

  sponsored

  Run Linux Software Faster and Safer than Linux with Unikernels.

  

• Snap.svg

  5 13,289 0.0 JavaScript

  The JavaScript library for modern SVG graphics.

  

  Project mention: Opinion on how to approach this web app.....SVG or CANVAS | reddit.com/r/webdev | 2021-08-17

  Building the SVG by hand is an option, but I suggest you look at dedicated SVG JS libraries to make the graphic easier to build and maintain. Try SVG.js or Snap.svg - both have good reputations.

• paper.js

  12 12,750 6.1 JavaScript

  The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

  

  Project mention: Help with sketch.js bug | reddit.com/r/creativecoding | 2021-10-13

  Here is a link to the issue I submitted: https://github.com/paperjs/paper.js/issues/1939

• chartist-js

  8 12,681 0.0 JavaScript

  Simple responsive charts

  Project mention: Widely Used Data Display and Analysis Libraries | dev.to | 2021-10-07

  Chartist.js is a very modern, SVG-based library. Its most prominent feature is the SVG animations in the charts produced with this library.

• raphael

  2 10,971 0.0 JavaScript

  JavaScript Vector Library

  Project mention: Smooth Bezier on Canvas | dev.to | 2021-09-19

  It would be very cool if html5 canvas implemented the Catmull Rom Spline but it unfortunately does not. The wonderful Raphael library used to have support for it.

• apexcharts.js

  4 10,778 9.0 JavaScript

  📊 Interactive JavaScript Charts built on SVG

  

  Project mention: Looking for recommendations on libraries/frameworks to visualize data | reddit.com/r/webdev | 2021-07-20

  ApexCharts: works like a charm for ~100 datapoints, but not usable at 10,000 or more, since it is SVG-based and floods the DOM with elements.

• trianglify

  2 9,768 0.6 JavaScript

  Algorithmically generated triangle art

  Project mention: Code-Generated [3840x2160] | reddit.com/r/wallpaper | 2021-07-10

  This might be what you are looking for: https://github.com/qrohlf/trianglify

• vega

  4 9,438 8.2 JavaScript

  A visualization grammar.

  

  Project mention: What Next? | reddit.com/r/PowerBI | 2021-09-27

  D3.js and Vega are extremely useful to know from a visualisation perspective.

• svg.js

  1 9,195 6.7 JavaScript

  The lightweight library for manipulating and animating SVG

  

  Project mention: Web Effect | dev.to | 2021-03-01

  Svg.js - The lightweight library for manipulating and animating SVG.

• c3

  11 9,138 3.6 JavaScript

  :bar_chart: A D3-based reusable chart library

  

  Project mention: Widely Used Data Display and Analysis Libraries | dev.to | 2021-10-07

  C3 is a very efficient D3 based chart visualization library. C3 library is fast to render, has good compatibility across browsers, and is very simple to integrate. If you're looking for no-frills, C3 is a decent choice.

• victory

  7 9,126 9.5 JavaScript

  A collection of composable React components for building interactive data visualizations

  

  Project mention: Top 5 React chart libraries | dev.to | 2021-09-24

  Like many other React chart libraries on the list, Victory was built with React and D3. It comes with a wide variety of charts out of the box that are fully customizable.

• kepler.gl

  14 8,073 8.7 JavaScript

  Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.

  

  Project mention: [Help] What is a good visualiser for a 3D graph with known positions, with node and edge weights? | reddit.com/r/visualization | 2021-10-12

  Or if it’s spatial data with coordinates maybe: https://kepler.gl/

• react-vis

  9 8,017 0.0 JavaScript

  Data Visualization Components

  

  Project mention: ✨Top React Charts Libraries [2021] | dev.to | 2021-09-27

  react-vis

• Cytoscape.js

  10 7,910 8.6 JavaScript

  Graph theory (network) library for visualisation and analysis

  

  Project mention: I built an interactive map for self-teaching online. It's like a skill tree for learning. The first map is ML, but want to add CS next | reddit.com/r/compsci | 2021-09-08

  So the library I'm using to visualise the network is cytoscape.js. It's easy to use and well documented!

• two.js

  4 7,294 9.0 JavaScript

  A renderer agnostic two-dimensional drawing api for the web.

  Project mention: [AskJS] What is the best canvas library to make an app like figma or integromat? | reddit.com/r/javascript | 2021-08-29

• dc.js

  0 7,254 6.1 JavaScript

  Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js

  

• nvd3

  2 7,124 0.0 JavaScript

  A reusable charting library written in d3.js

  

  Project mention: Widely Used Data Display and Analysis Libraries | dev.to | 2021-10-07

  NVD3 is also on the list of the most popular libraries. Built upon D3.js like the others above, it does have a solid technical base.

Index

Sponsored

Scout APM: A developer's best friend. Try free for 14-days

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.

scoutapm.com