JavaScript D3

Open-source JavaScript projects categorized as D3

Top 23 JavaScript D3 Projects

  • three.js

    JavaScript 3D Library.

    Project mention: 3D Card with Embedded Links Using Three.js and Blender | dev.to | 2023-09-12

    three

  • Chart.js

    Simple HTML5 Charts using the <canvas> tag

    Project mention: Live Image editor w/ JavaScript: Canvas API and Tesseract.js(OCR) | dev.to | 2023-08-26

    One of my favorite charting libraries, chart.js is built around the canvas,

  • SurveyJS

    A Non-Cloud Alternative to Google Forms that has it all.. SurveyJS JavaScript libraries allow you to easily set up a robust form management system fully integrated into your IT infrastructure where users can create and edit multiple dynamic JSON-based forms in a no-code form builder. Learn more now.

  • 30-Days-Of-JavaScript

    30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw

    Project mention: Where to Learn Javascript | /r/PinoyProgrammer | 2023-07-01
  • fabric.js

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

    Project mention: How I choose Fabric.js again | dev.to | 2023-09-03

    Based on this, I found that some of the libraries are dead and no longer have any support. Only two libraries are still alive and have significant amount of stars on GitHub and downloads on NPM. They are Fabric.js and Konva.js.

  • 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: Repetition can make you loopy!: Intro to JavaScript Loops | dev.to | 2023-08-14

    In this last section, I'll be creating some visual examples to show how helpful loops can be. I'll be using p5js, a JavaScript library with functionality for creative coding. That being said, I'll try to give a condensed version of the functions being utilized in the following examples.

  • plotly.js

    Open-source JavaScript charting library behind Plotly and Dash

    Project mention: Ask HN: What packages can be used to create interactive mathematics simulations? | news.ycombinator.com | 2023-07-05

    Well, MathML[1] support is (nearly) everywhere now, and as the docs say:

    MathML Core is a subset with increased implementation details based on rules from LaTeX and the Open Font Format. It is tailored for browsers and designed specifically to work well with other web standards including HTML, CSS, DOM, JavaScript.

    I don't have a lot of experience working with this stuff (yet) but if you can script your MathML objects with Javascript, you should be able to make whatever interactive "stuff" you want in terms of math notation. Now drawing objects and plots and stuff is a different question.

    There's stuff like Plotly[2], D3[3], Sigma[4], etc. that might be useful depending on exactly what effects you're going for.

    [1]: https://developer.mozilla.org/en-US/docs/Web/MathML

    [2]: https://github.com/plotly/plotly.js

    [3]: https://d3js.org/

    [4]: https://www.sigmajs.org/

  • 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 | /r/webdev | 2023-01-28

    charts: https://frappe.io/charts

  • Amplication

    Amplication: open-source Node.js backend code generator. An open-source platform that helps developers build backends without spending time on boilerplate & repetitive coding. Including production-ready GraphQL & REST APIs, DB schema, DTOs, filtering, pagination, RBAC, & more.

  • 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: How Framer/Figma is built? | /r/webdev | 2023-05-29

    I started with angular and paper.js: http://paperjs.org/

  • raphael

    JavaScript Vector Library

  • vega

    A visualization grammar.

    Project mention: [OC] Most In-Demand Programming Languages from Jan-2022 to Jun-2023 | /r/dataisbeautiful | 2023-06-26

    The Data Source is from devjobsscanner (I am basically the owner, so I have the data) an the tool used to make the chart is Vega

  • svg.js

    The lightweight library for manipulating and animating SVG

  • victory

    A collection of composable React components for building interactive data visualizations

    Project mention: Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries | dev.to | 2023-07-31

    Victory is a set of modular charting components for React and React Native. Victory makes it easy to get started without sacrificing flexibility. Create one of a kind data visualizations with fully customizable styles and behaviors. Victory uses the same API for web and React Native applications for easy cross-platform charting.

  • trianglify

    Algorithmically generated triangle art

  • c3

    :bar_chart: A D3-based reusable chart library

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

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

  • 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. | /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

  • dc.js

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

  • nvd3

    A reusable charting library written in d3.js

  • rickshaw

    JavaScript toolkit for creating interactive real-time graphs

  • heatmap.js

    🔥 JavaScript Library for HTML5 canvas based heatmaps

  • flot

    Attractive JavaScript charts for jQuery

    Project mention: Attractive JavaScript Charts for jQuery | news.ycombinator.com | 2022-11-22
  • cubism

    Cubism.js: A JavaScript library for time series visualization.

  • NN-SVG

    Publication-ready NN-architecture schematics.

    Project mention: NN-SVG is a tool for creating Neural Network architecture drawings parametrically rather than manually! It also provides the ability to export those drawings to Scalable Vector Graphics (SVG) files, suitable for inclusion in academic papers or web pages | /r/aipromptprogramming | 2023-04-14
  • Frappe Gantt

    Open Source Javascript Gantt

    Project mention: Gantt chart component | /r/react | 2023-08-07

    Frappe Gantt https://github.com/frappe/gantt

  • Appwrite

    Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!

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-09-12.

JavaScript D3 related posts

Index

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

Project Stars
1 three.js 94,577
2 Chart.js 61,803
3 30-Days-Of-JavaScript 38,459
4 fabric.js 25,801
5 p5.js 19,890
6 plotly.js 15,969
7 Frappe Charts 14,796
8 paper.js 13,918
9 raphael 11,211
10 vega 10,573
11 svg.js 10,518
12 victory 10,513
13 trianglify 10,043
14 c3 9,290
15 two.js 8,055
16 dc.js 7,393
17 nvd3 7,194
18 rickshaw 6,535
19 heatmap.js 6,041
20 flot 5,950
21 cubism 4,929
22 NN-SVG 4,135
23 Frappe Gantt 3,945
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