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. Learn more →
Top 23 TypeScript Data Visualization Projects
-
Grafana
The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
Project mention: Golang: out-of-box backpressure handling with gRPC, proven by a Grafana dashboard | dev.to | 2024-04-03To help us visualize these scenarios, we'll build a Grafana Dashboard so we can follow along.
-
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.
-
Superset is absolutely phenomenal. I really hope Microsoft eventually releases all of their customizations they made to it internally to the OS community someday.
-
PixiJS
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
If you're into video game dev, then PixiJS is something you need to know about. It's a HTML5 game engine that provides a lightweight 2D library across all devices. This latest update has a new package structure, custom builds, graphics API overhaul, and lots more. You can read about all these changes in the PixiJS Migration Guide. Also big congrats to PixiJS for being part of the open source community for ten years now! 😮.
-
Directus
The Modern Data Stack 🐰 — Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
As of April 2024, Directus' GitHub repository has accumulated 25.2k stars and 3.5k forks, showcasing its active community. The project has secured $8+ million in funding, further fueling its growth and development.
-
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
-
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.
-
Official Website: https://airbnb.io/visx/
-
-
Project mention: JavaScript Libraries for Implementing Trendy Technologies in Web Apps in 2024 | dev.to | 2024-04-09
Highcharts.js
-
Project mention: Exploring Network Graph Visualization: Graphology and Sigma.js | dev.to | 2023-08-15
Sigma.js Sigma.js on Github Graphology on Github
-
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.
-
-
Project mention: Noob here: Please tell me how can I integrate this type of map in my site? any js library? | /r/developersIndia | 2023-07-02
This might help: https://kepler.gl/
-
I use this heavily https://visgl.github.io/react-map-gl/ and it's amazing for building complex maps with rich overlays, but you won't get a search box for countries out of the box.
-
-
Project mention: How To Create a Chart From a Dynamic Dataset in Next JS Using Chart.js | dev.to | 2024-01-05
Chart JS is a great choice for creating charts as it has multiple visualizations. There are different integrations for the JS frameworks, and we shall use react-chart-js-2 library for Next JS.
-
-
-
Project mention: The free pandas visualizer, D-Tale, has now been integrated with ArcticDB which will allow users to load huge datasets and easily navigate their databases | /r/algotrading | 2023-07-06
[D-Tale](https://github.com/man-group/dtale) has recently released version 3.2.0 on pypi & conda-forge: ``` pip install -U dtale conda install dtale -c conda-forge ``` But if you want to take it one step further you can now integrate it with [ArcticDB](https://github.com/man-group/ArcticDB): ``` pip install -U dtale[arcticdb] ``` This allows you the ability to navigate your libraries of datasets saved to your ArcticDB database! But the best part is that all the reads are occuring directly against ArcticDB so some of the memory constraints you may have been hit with before are now a thing of the past. Here's a full write up how to use this functionality along with a quick demo: https://github.com/man-group/dtale/blob/master/docs/arcticdb/ARCTICDB\_INTEGRATION.md Hope this helps & please support open-source by throwing your star on the [repo](https://github.com/man-group/dtale). Thanks! 🙏
-
-
Project mention: What python library you are using for interactive visualisation?(other than plotly) | /r/datascience | 2023-06-01
didn't see anyone mention bqplot https://github.com/bqplot/bqplot
-
-
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 Data Visualization related posts
- A web crawler program for crawling Echarts official website examples implemented by Puppeter
- Achivments for Git
- Release Radar • March 2024 Edition
- Why Are Older Americans Drinking So Much?
- Malloy: A language for describing data relationships and transformations
- Renumics/spotlight: Interactively explore unstructured datasets from dataframes
- Malloy: Open-source language for analyzing, transforming, and modeling data
-
A note from our sponsor - SurveyJS
surveyjs.io | 18 Apr 2024
Index
What are some of the best open-source Data Visualization projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | Grafana | 60,196 |
| 2 | echarts | 58,801 |
| 3 | superset | 58,576 |
| 4 | PixiJS | 42,420 |
| 5 | Directus | 25,279 |
| 6 | BabylonJS | 22,428 |
| 7 | recharts | 22,349 |
| 8 | visx | 18,685 |
| 9 | G2 | 11,956 |
| 10 | Highcharts JS | 11,798 |
| 11 | sigma.js | 11,001 |
| 12 | victory | 10,759 |
| 13 | G6 | 10,691 |
| 14 | kepler.gl | 9,987 |
| 15 | react-map-gl | 7,550 |
| 16 | metrics-graphics | 7,475 |
| 17 | react-chartjs-2 | 6,381 |
| 18 | SandDance | 6,214 |
| 19 | BizCharts | 6,140 |
| 20 | dtale | 4,527 |
| 21 | Rath | 3,957 |
| 22 | bqplot | 3,550 |
| 23 | L7 | 3,467 |
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