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! Learn more →
Top 23 JavaScript Data Visualization Projects
-
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.
-
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!
-
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
-
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-29You're welcome, frameworks like nannou are called **Creative coding frameworks**, processing I think is the most popular one out there, also P5js.
-
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.
-
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 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-17Ooh, 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...
-
1. Apex Charts
-
-
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.
-
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).
-
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?
-
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-...
-
Looking here: https://github.com/c3js/c3/issues/2831
-
Project mention: Introducing scope42 - Improve your software architecture with precision! 🎯✨ | dev.to | 2022-10-25
Relationship graphs are created using Cytoscape.js
-
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
-
Project mention: Small and fast 2D canvas chart for time series, lines, areas and bars | news.ycombinator.com | 2023-01-26
-
-
-
-
-
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.
JavaScript Data Visualization related posts
- Getting Started With Three.js
- Code only runs when browser tab is focused
- [Showoff Saturday] I made a thing that shows you your valorant match stats
- Where would you get this data ? - not ultra high spatial resolution - PM 2,5 (pollution) -spans north india and Pakistan - set to a specific date (not a yearly average)... I really can't find anything. The closest I got was Landsat 8 but for many reasons it doesnt work well. Thanks !
- CubeRenderTarget showing pixelated reflection
- What tools do I need to create a web based application that shows detailed graphs based on user input?
- England and Ireland on a rare clear day
-
A note from our sponsor - Appwrite
appwrite.io | 1 Feb 2023
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 |