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 Data Visualization Open-Source Projects
-
-
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.
-
-
-
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.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser
-
-
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.
-
PixiJS
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
-
Metabase
The simplest, fastest way to get business intelligence and analytics to everyone in your company :yum:
-
-
-
-
-
Directus
The Modern Data Stack 🐰 — Directus is an instant REST+GraphQL API and intuitive no-code data collaboration app for any SQL database.
-
awesome-datascience
:memo: An awesome Data Science repository to learn and apply for real world problems.
-
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
-
-
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 —
-
-
-
-
-
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: A visual guide to Vision Transformer – A scroll story | news.ycombinator.com | 2024-04-16Yes this was done with a combination of GSAP Scrolltrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/ and https://d3js.org/
Regarding the optimization of the effect, I found an issue on the three.js GitHub repository: https://github.com/mrdoob/three.js/issues/14104 The alpha channel issue seems to be a difficult problem, which has been present since 2018. At the end of the discussion, a solution proposed by a contributor is not to modify the UnrealBloomPass but to blend the source texture and target texture in the shader.
Project mention: A list of SaaS, PaaS and IaaS offerings that have free tiers of interest to devops and infradev | dev.to | 2024-02-05netdata.cloud — Netdata is an open-source tool to collect real-time metrics. It's a growing product and can also be found on GitHub!
ChartsJS for inspiring me with the pie chart.
Project mention: Docker Log Observability: Analyzing Container Logs in HashiCorp Nomad with Vector, Loki, and Grafana | dev.to | 2024-04-19Monitoring 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.
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`); } })();
Superset is absolutely phenomenal. I really hope Microsoft eventually releases all of their customizations they made to it internally to the OS community someday.
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! 😮.
Remote Code Execution via H2
Project mention: Creating a Sales Analysis Application with Streamlit: A Practical Approach to Business Intelligence | dev.to | 2024-04-192.-Go to https://streamlit.io, log in, and create a new app from your GitHub repository.
Project mention: Show HN: Dropbase – Build internal web apps with just Python | news.ycombinator.com | 2023-12-05There's also that library all the AI models started using that gives you a public URL to share. After researching it: https://www.gradio.app/ is the link.
It's used specifically for making simple UIs for machine learning apps. But I guess technically you could use it for anything.
Project mention: Fun, Beautiful, Printable 'Story Cards' for Kids with Cloudflare AI | dev.to | 2024-04-12This AI-powered Story Card Maker is built as a SvelteKit application with Typescript. Using Flowbite Svelte component library, the whole application was laid out. The layout for the Story Card (emulating the size of a postcard - 4" x 3") is created as an HTML Canvas using Fabric.js.
Get started with Data Science in the Data Science for Beginners curricula.
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.
Project mention: About Data analyst, data scientist and data engineer, resources and experiences | dev.to | 2024-03-26Awesome Data Science by Academic
Project mention: recharts VS MUI X - a user suggested alternative | libhunt.com/r/recharts | 2024-01-20
Project mention: How and where is matplotlib package making use of PySide? | /r/learnpython | 2023-12-07
Bokeh - Interactive Web Plotting for Python.
Official Website: https://airbnb.io/visx/
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.
Data Visualization related posts
- Creating a Sales Analysis Application with Streamlit: A Practical Approach to Business Intelligence
- Chinchilla Scaling: A Replication Attempt
- Show HN: Minard – Generate beautiful charts with natural language
- A visual guide to Vision Transformer – A scroll story
- Yes, Python and Matplotlib can make pretty charts
- Orange Data Mining
- Show HN: My wife and I made a maze game
-
A note from our sponsor - SurveyJS
surveyjs.io | 19 Apr 2024
Index
What are some of the best open-source Data Visualization projects? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | d3 | 107,600 |
| 2 | three.js | 98,752 |
| 3 | Netdata | 68,064 |
| 4 | Chart.js | 63,370 |
| 5 | Grafana | 60,196 |
| 6 | echarts | 58,883 |
| 7 | superset | 58,576 |
| 8 | PixiJS | 42,420 |
| 9 | Metabase | 36,417 |
| 10 | diagrams | 34,794 |
| 11 | streamlit | 31,361 |
| 12 | gradio | 28,556 |
| 13 | fabric.js | 27,419 |
| 14 | Data-Science-For-Beginners | 26,290 |
| 15 | Directus | 25,279 |
| 16 | awesome-datascience | 22,991 |
| 17 | BabylonJS | 22,428 |
| 18 | recharts | 22,349 |
| 19 | p5.js | 20,835 |
| 20 | dash | 20,434 |
| 21 | matplotlib | 19,223 |
| 22 | bokeh | 18,812 |
| 23 | visx | 18,685 |
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.com