DataVisualization OpenSource List | 数据可视化开源工具索引

Graphic | 绘图接口

  • PixiJS #Project#: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

  • Babylon.js #Project# : Babylon.js is an open source framework that allows you to create stunning 3D experiences in your browser. Built with simplicity and performance in mind, it is the engine that fuels the Remix3D site or the Xbox Design Lab.

  • sketch.js #Project#: Cross-Platform JavaScript Creative Coding Framework

  • Zero #Project#: A graphics pipeline implemented in JavaScript and rendered to the terminal. No GPU required.



  • 2014-Fabric.js #Project#: Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser.

  • dom-to-image #Project#: Generates an image from a DOM node using HTML5 canvas

  • html2canvas #Project#: The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.

  • e2d #Project#: An es5 declarative canvas renderer.

  • react-konva #Project#:JavaScript library for drawing complex canvas graphics using React.


  • TWGL #Project#: This library's sole purpose is to make using the WebGL API less verbose.

  • glTF #Project#: glTF™ (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications.

  • Zdog #Project#: Round, flat, designer-friendly pseudo-3D engine



Diagram Library | 数据可视化库

  • 2018-GoJS #Project#: JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.


  • Echarts #Project#: A powerful, interactive charting and visualization library for browser.

  • AntV #Project#: AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单 方便、专业可靠、无限可能的数据可视化最佳实践。

  • d4 #Project#: Data-Driven Declarative Documents

  • ChartJS #Project#: 简单灵活响应式的 HTML 图表库

  • Reacharts #Project#: Redefined chart library built with React

  • Frappé Charts #Project#: GitHub-inspired simple and modern SVG charts for the web with zero dependencies.

  • 2015-react-vis #Project#: A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.

  • roughViz.js #Project#: Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.





  • SandDance #Project#: By using easy-to-understand views, SandDance helps you find insights about your data, which in turn help you tell stories supported by data, build cases based on evidence, test hypotheses, dig deeper into surface explanations, support decisions for purchases, or relate data into a wider, real world context.

Graph & Network

  • 2018-Cytoscape.js #Project#: Graph theory / network library for analysis and visualisation.

  • react-network-diagrams #Project#: Contains ESnet network mapping and circuit rendering code, as used in the ESnet portal.

  • mxGraph #Project#: mxGraph is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor.

MindMap | 思维脑图

Graph Editor | 图编辑器

  • 2014-mxGraph #Project#: mxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.

  • 2014-bpmn-js #Project#: A BPMN 2.0 rendering toolkit and web modeler.

  • 2014-jsPlumb #Project#: jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG and runs on all browsers from IE9 and later.

  • 2014-jsWorkFlow #Project#: jsWorkflow, a jsPlumb based workfow API, helps to create JavaScript based workflow diagrams for various applications. It abstracts all the complexities involved in designing and managing workflows.

  • 2017-diagram-js #Project#: A toolbox for displaying and modifying diagrams on the web.

  • 2018-GGEditor #Project#: A visual graph editor based on G6 and React.

  • 2018-rete #Project#: JavaScript framework for visual programming and creating node editor.

  • drawio #Project#: is an online diagramming web site that delivers the source in this project.

  • floweditor #Project#: Standalone flow editing tool designed for use within the RapidPro suite of messaging tools.

Map | 地图

  • 2017-maptalks.js: An open-source javascript library for map applications.

  • #Project#: is a WebGL-powered framework for visual exploratory data analysis of large datasets.


Handwriting & Signature

  • Signature Pad #Project#: Signature Pad is a JavaScript library for drawing smooth signatures. It's HTML5 canvas based and uses variable width Bézier curve interpolation based on Smoother Signatures post by Square.

  • Rough.js #Project#: Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

  • atrament.js #Project#: Tiny JS library for beautiful drawing and handwriting on the HTML Canvas



  • Datashader #Project#: Datashader is a data rasterization pipeline for automating the process of creating meaningful representations of large amounts of data.