The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. Learn more →
Top 23 TypeScript D3 Projects
-
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
Project mention: A web crawler program for crawling Echarts official website examples implemented by Puppeter | dev.to | 2024-04-12import puppeteer from "puppeteer"; import fs from "node:fs"; import { storiesTpl, storiesArgs, generOptions, generOptionsWithFn, } from "./template.mjs"; const ECHARTS_BASE_URL = "https://echarts.apache.org/examples/en/index.html"; function capitalizeFirstLetter(str) { if (!str || str.length === 0) { return ""; } str = str.toLowerCase(); return str.charAt(0).toUpperCase() + str.slice(1); } (async function () { const browser = await puppeteer.launch(); const page = await browser.newPage(); // Navigate the page to a URL await page.goto(ECHARTS_BASE_URL); // Set screen size await page.setViewport({ width: 1080, height: 1024 }); // Type into search box // const examples = await page.type([".example-list-panel"]); const searchResultSelector = ".example-list-panel > div"; const results = await page.$$(searchResultSelector); for (const element of results) { // gener namespace const ele = await element.$(".chart-type-head"); const title = await ele.evaluate((el) => el.textContent); let namespace = title.split(" ").filter(Boolean); namespace = namespace.slice(0, namespace.length - 1); namespace = namespace .map((item) => item.replace("\n", "").replace("/", "")) .filter(Boolean) .join(""); console.log(`${namespace} start`); const instances = await element.$$(".row .example-list-item"); const components = []; for (const instance of instances) { // title const titleElement = await instance.$(".example-title"); const subTitle = await titleElement.evaluate((el) => el.textContent); const titles = subTitle .split(" ") .filter(Boolean) .map((item) => item .replace(/\+/g, "") .replace(/\(/g, "") .replace(/\)/g, "") .replace(/-/g, "") ); const title = titles.map((item) => capitalizeFirstLetter(item)).join(""); const link = await instance.$(".example-link"); const newPagePromise = new Promise((resolve) => { browser.on("targetcreated", async (target) => { if (target.type() === "page") { const targetPage = await target.page(); const url = await targetPage.url(); if (url.includes("editor")) { resolve(targetPage); } } }); }); await link.click(); const newPage = await newPagePromise; await newPage.setViewport({ width: 40000, height: 20000 }); await newPage.waitForSelector(".ace_text-layer"); await new Promise((resolve) => { setTimeout(() => { resolve(); }, 3000); }); let content = await newPage.evaluate( () => document.querySelector(".ace_text-layer").innerText ); content = content .replace(/\[\]/g, "[] as any") .replace(//g, "") .replace(/var/g, "let"); let options; if (content.includes("myChart")) { options = generOptionsWithFn({ options: content }); } else { options = generOptions({ options: content }); } components.push({ options, title }); await newPage.close(); } const args = components .filter(({ options }) => { if (options.includes("$")) return false; return true; }) .map(({ options, title }) => storiesArgs({ options: options, name: title }) ) .join("\r\n"); const scripts = storiesTpl({ namespace: `Charts/${namespace}`, components: args, }); fs.writeFileSync(`./bots/assests/${namespace}.stories.ts`, scripts); console.log(`${namespace} end`); } })();
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
-
Project mention: recharts VS MUI X - a user suggested alternative | libhunt.com/r/recharts | 2024-01-20
-
Official Website: https://airbnb.io/visx/
-
-
Project mention: Exploring Network Graph Visualization: Graphology and Sigma.js | dev.to | 2023-08-15
Sigma.js Sigma.js on Github Graphology on Github
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
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.
-
-
-
Is anyone willing to help out and provide some advice and knowledge on how to build custom charts with ngxcharts (https://github.com/swimlane/ngx-charts)?
-
-
-
Project mention: Personal Knowledge Management Graph Visualization Tools for Neovim | /r/neovim | 2023-06-17
I recently came across this software called org-roam-ui, a tool to visualize Org Roam's Zettelkasten in a graphical way. is there something like that for neovim? I use vimwiki as my PKM and was wondering if any of you know of any tool similar to org-roam-ui that works well with neovim, specifically with Markdown files, for visualizing one's PKM system.
-
-
Website: react-financial-charts GitHub page
-
Project mention: 🚀 reaviz ( data viz framework for ReactJS ) 14.9 drops with funnel charts and glows! | /r/reactjs | 2023-07-05
-
carbon-charts
:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
-
-
-
-
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
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 2024-04-12.
TypeScript D3 related posts
- A web crawler program for crawling Echarts official website examples implemented by Puppeter
- Build Responsive, Animated Charts in Minutes with EazyChart for React and Vue
-
recharts VS MUI X - a user suggested alternative
2 projects | 20 Jan 2024
- New AI startup from the co-authors of the Original Transformers Paper
- Show HN: Matrices – explore, visualize, and share large datasets
- Using AI to Generate Database Query Is Cool. But What About Access Control?
- 3D Knowledge Graph in Obsidian
-
A note from our sponsor - WorkOS
workos.com | 18 Apr 2024
Index
What are some of the best open-source D3 projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | freeCodeCamp | 387,222 |
| 2 | echarts | 58,883 |
| 3 | BabylonJS | 22,428 |
| 4 | recharts | 22,349 |
| 5 | visx | 18,685 |
| 6 | G2 | 11,956 |
| 7 | sigma.js | 11,001 |
| 8 | victory | 10,759 |
| 9 | metrics-graphics | 7,475 |
| 10 | billboard.js | 5,741 |
| 11 | ngx-charts | 4,265 |
| 12 | plottable | 2,949 |
| 13 | G2Plot | 2,508 |
| 14 | org-roam-ui | 1,867 |
| 15 | d3-dag | 1,416 |
| 16 | react-financial-charts | 1,113 |
| 17 | reaviz | 904 |
| 18 | carbon-charts | 855 |
| 19 | rumble-charts | 345 |
| 20 | orb | 304 |
| 21 | obsidian-3d-graph | 251 |
| 22 | topola | 85 |
| 23 | cvpr-buzz | 48 |
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com