JavaScript Data Visualization

Open-source JavaScript projects categorized as Data Visualization
Edit details
Topics: #D3 #JavaScript #Visualization #React #Chart
Build time-series-based applications quickly and at scale.
InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
www.influxdata.com
Sponsored

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: [E] I'd like to learn how to make high-quality interactive visualizations to explain statistical topics. (See example in post) | reddit.com/r/statistics | 2023-01-18

    This is the source code for the distill pub you linked to: https://github.com/distillpub/post--visual-exploration-gaussian-processes. I dug through the code a little and believe most of the interactive visuals were created with d3.js. That's certainly 1 of the options you can use to recreate the same type of visuals. d3 is incredibly powerful (it's the tool professional news organisations use for their visualisations) but also rather complex. If you are new to Javascript in general, it might not be the most practical choice.

  • three.js

    JavaScript 3D Library.

    Project mention: Getting Started With Three.js | dev.to | 2023-01-31

    In case you’re not happy with the existing geometries or need to create your own geometry classes, it is very possible. You can see some examples provided by three.js here.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • Chart.js

    Simple HTML5 Charts using the <canvas> tag

    Project mention: What tools do I need to create a web based application that shows detailed graphs based on user input? | reddit.com/r/webdev | 2023-01-24

    ChartJS libraryLink

  • fabric.js

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

    Project mention: Image Manipulation with Fabric.js and Canvas | dev.to | 2022-11-29

    body{ display:flex; flex-direction:column; align-items:center; }

    Learning Fabric

  • 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: [Media] Genetic algorithm simulation - Smart rockets (code link in comments) | reddit.com/r/rust | 2023-01-29

    You're welcome, frameworks like nannou are called **Creative coding frameworks**, processing I think is the most popular one out there, also P5js.

  • plotly.js

    Open-source JavaScript charting library behind Plotly and Dash

    Project mention: California's Current Snowpack Water Content vs Historical Levels [OC] | reddit.com/r/dataisbeautiful | 2023-01-09

    Sources and Tools Data is downloaded from the California Data Exchange Center website of the California Department of Water Resources using a python script. The data is processed in javascript and visualized here using HTML, CSS and javascript and the open source Plotly javascript graphing library.

  • Frappe Charts

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

    Project mention: [Showoff Saturday] I made a thing that shows you your valorant match stats | reddit.com/r/webdev | 2023-01-28

    charts: https://frappe.io/charts

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • Snap.svg

    The JavaScript library for modern SVG graphics.

    Project mention: Best Websites For Coders | dev.to | 2023-01-25

    Snap SVG : The JavaScript SVG library for the modern web

  • 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: The Continuity of Splines – Video Essay by Freya Holmér | news.ycombinator.com | 2022-12-17

    Ooh, the Chebyshev basis is neat. I hadn't seen exactly that before. It reminds me a lot of the "shape control" technique[1] which is also similar to a basis function approach but has a bit of linear solving. Essentially, you get one point (usually at t = 0.5), and also the direction but not magnitudes of the tangents at the endpoints (G1, not C1). This is one of the better-performing existing techniques for offset curve, though does have stability problems (in particular, nasty behavior for a symmetric "S" curve).

    Regarding collaboration with Freya, if she is open to it, please get in touch. I do have some ideas.

    [1]: A New Shape Control and Classification for Cubic Bézier Curves, Yang and Huang, 1993, PDF cache: https://github.com/paperjs/paper.js/files/752955/A.New.Shape...

  • apexcharts.js

    📊 Interactive JavaScript Charts built on SVG

    Project mention: Top 5+ useful ReactJS Plugins for 2023 | dev.to | 2023-01-09

    1. Apex Charts

  • raphael

    JavaScript Vector Library

  • vega

    A visualization grammar.

    Project mention: Launched my ADHD productivity app on product hunt - would love your support | reddit.com/r/ADHD_Programmers | 2022-11-12

    Eh, I have no reason to, and not much interest in PHP anymore. Things like Vega seem really cool.

  • victory

    A collection of composable React components for building interactive data visualizations

    Project mention: How to create such chart in React Native? | reddit.com/r/reactnative | 2023-01-24

    For convenience of others, here’s a link to Victory Native’s project site (it’s a react.js library with a native version, so be sure to find the native docs).

  • svg.js

    The lightweight library for manipulating and animating SVG

    Project mention: [AskJS] Is there any javascript library that can perform boolean operations on svg paths (union, subtract, intersect, difference)? | reddit.com/r/javascript | 2022-07-28

    Thanks for the link to this great and useful library. It's really awesome, and I didn't know there was a node.js version. But it seems that it doesn't support boolean operations, or at least I haven't found it in the documentation. There is only the following github issue with no answer: https://github.com/svgdotjs/svg.js/issues/339 And a request for an intersection function that doesn't seem to be implemented: https://github.com/svgdotjs/svg.js/issues/1200 Maybe I'm missing something?

  • trianglify

    Algorithmically generated triangle art

    Project mention: Trianglify.io – Low Poly Pattern Generator | news.ycombinator.com | 2022-09-18

    Author here - interesting to see this pop up on HN again!

    Since there are a lot of questions in the comments that might be answered by prior writing/discussions, here are a couple relevant links:

    0. Trianglify.io is a GUI for my GPL-licensed node library of the same name, which is available for use in OSS projects for free: https://qrohlf.com/trianglify/

    1. Trianglify (the library) first became popular because of an HN post eight years ago. Discussion here: https://news.ycombinator.com/item?id=7578002

    2. I've written a short Medium article on why Trianglify.io exists and how I arrived at the current freemium/micropayments model for monetizing it: https://medium.com/@qrohlf/i-sell-triangles-on-the-internet-...

  • c3

    :bar_chart: A D3-based reusable chart library

    Project mention: Is c3 js deprecated? and general thoughts of c3? | reddit.com/r/d3js | 2022-11-22

    Looking here: https://github.com/c3js/c3/issues/2831

  • Cytoscape.js

    Graph theory (network) library for visualisation and analysis

    Project mention: Introducing scope42 - Improve your software architecture with precision! 🎯✨ | dev.to | 2022-10-25

    Relationship graphs are created using Cytoscape.js

  • two.js

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

    Project mention: Trying to build a front end interactive browser or app experience where touch to screen simulates a visual heat map. | reddit.com/r/webdev | 2022-11-25

    Javascript touch events paired with WebGL would be the route I’d go. There are some really great libraries for WebGL (twojs) or working with SVG (mojs) if you want to keep it simple

  • uPlot

    📈 A small, fast chart for time series, lines, areas, ohlc & bars

    Project mention: Small and fast 2D canvas chart for time series, lines, areas and bars | news.ycombinator.com | 2023-01-26

  • dc.js

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

    Project mention: 25 the Best Javascript Data Visualization Libraries in 2022 | dev.to | 2022-03-09

  • nvd3

    A reusable charting library written in d3.js

  • rickshaw

    JavaScript toolkit for creating interactive real-time graphs

  • roughViz

    Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

    Project mention: New to Github | reddit.com/r/github | 2022-10-14

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2023-01-31.

JavaScript Data Visualization related posts

Index

What are some of the best open-source Data Visualization projects in JavaScript? This list will help you:

Project Stars
1 d3 104,244
2 three.js 88,432
3 Chart.js 59,677
4 fabric.js 23,798
5 p5.js 18,786
6 plotly.js 15,364
7 Frappe Charts 14,620
8 Snap.svg 13,648
9 paper.js 13,525
10 apexcharts.js 12,193
11 raphael 11,145
12 vega 10,198
13 victory 10,143
14 svg.js 10,063
15 trianglify 10,019
16 c3 9,239
17 Cytoscape.js 8,902
18 two.js 7,929
19 uPlot 7,557
20 dc.js 7,381
21 nvd3 7,186
22 rickshaw 6,534
23 roughViz 6,431

Sponsored
Write Clean JavaScript Code. Always.
Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
www.sonarsource.com