TypeScript Data Visualization

Open-source TypeScript projects categorized as Data Visualization

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: Docker Log Observability: Analyzing Container Logs in HashiCorp Nomad with Vector, Loki, and Grafana | dev.to | 2024-04-19

    Monitoring application logs is a crucial aspect of the software development and deployment lifecycle. In this post, we'll delve into the process of observing logs generated by Docker container applications operating within HashiCorp Nomad. With the aid of Grafana, Vector, and Loki, we'll explore effective strategies for log analysis and visualization, enhancing visibility and troubleshooting capabilities within your Nomad environment.

  • 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-12

    import 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.

    SurveyJS logo
  • superset

    Apache Superset is a Data Visualization and Data Exploration Platform

  • Project mention: Apache Superset | news.ycombinator.com | 2024-02-26

    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.

  • Project mention: Release Radar • March 2024 Edition | dev.to | 2024-04-07

    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.

  • Project mention: Headless CMS: Directus vs Payload vs Strapi in 2024 | dev.to | 2024-04-05

    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: Show HN: My wife and I made a maze game | news.ycombinator.com | 2024-04-12
  • recharts

    Redefined chart library built with React and D3

  • Project mention: recharts VS MUI X - a user suggested alternative | libhunt.com/r/recharts | 2024-01-20
  • 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.

    InfluxDB logo
  • visx

    🐯 visx | visualization components

  • Project mention: React Component Libraries | dev.to | 2024-03-13

    Official Website: https://airbnb.io/visx/

  • G2

    📊 The concise and progressive visualization grammar.

  • Highcharts JS

    Highcharts JS, the JavaScript charting framework

  • Project mention: JavaScript Libraries for Implementing Trendy Technologies in Web Apps in 2024 | dev.to | 2024-04-09


  • sigma.js

    A JavaScript library aimed at visualizing graphs of thousands of nodes and edges

  • Project mention: Exploring Network Graph Visualization: Graphology and Sigma.js | dev.to | 2023-08-15

    Sigma.js Sigma.js on Github Graphology on Github

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

  • G6

    ♾ A Graph Visualization Framework in JavaScript.

  • kepler.gl

    Kepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.

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

  • react-map-gl

    React friendly API wrapper around MapboxGL JS

  • Project mention: Library recommendations for an interactive world map | /r/reactjs | 2023-05-02

    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.

  • metrics-graphics

    A library optimized for concise and principled data graphics and layouts.

  • react-chartjs-2

    React components for Chart.js, the most popular charting library

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

  • SandDance

    Visually explore, understand, and present your data.

  • BizCharts

    Powerful data visualization library based on G2 and React.

  • dtale

    Visualizer for pandas data structures

  • 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! 🙏

  • Rath

    Next generation of automated data exploratory analysis and visualization platform.

  • Project mention: FLaNK Stack for 15 May 2023 | dev.to | 2023-05-15
  • bqplot

    Plotting library for IPython/Jupyter notebooks

  • 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

  • L7

    🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.

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

    WorkOS logo
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-19.

TypeScript Data Visualization related posts


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

Project Stars
1 Grafana 60,279
2 echarts 58,883
3 superset 58,737
4 PixiJS 42,420
5 Directus 25,279
6 BabylonJS 22,428
7 recharts 22,349
8 visx 18,712
9 G2 11,956
10 Highcharts JS 11,810
11 sigma.js 11,001
12 victory 10,767
13 G6 10,703
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,539
21 Rath 3,957
22 bqplot 3,550
23 L7 3,473

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.