Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/christabor/diagram-tools-js

A list of front-end (javascript/*script) tools for creating diagrams and data visualizations.
https://github.com/christabor/diagram-tools-js

Last synced: 26 days ago
JSON representation

A list of front-end (javascript/*script) tools for creating diagrams and data visualizations.

Awesome Lists containing this project

README 

        
# diagram-tools-js

A list of front-end (javascript/*script) tools for creating diagrams and data visualizations.



## What types of tools are listed?



1. Diagram tools

2. Data visualization tools



Note: there is cross-over for both of these.



*All libraries listed are **free** and **open-source**. See individual libraries for details, of course.*



# Types



## Diagrams



Taken from [Wikipedia](en.wikipedia.org/wiki/Diagram):



#### A

* Activity diagram (used in UML 6/9 and SysML)



#### B

* Bachman diagram

* Booch - used in software engineering

* Block diagram

* Block Definition Diagram (BDD) used in SysML

* Business & IT Diagram (B&IT) - used in business and IT modelling



#### C

* [Carroll diagram](https://github.com/christabor/jquery.cayley/)

* [Cartogram](https://github.com/mbostock/d3/wiki/Gallery)

* [Category theory diagrams](https://github.com/sonoisa/XyJax)

* [Cayley table](https://github.com/christabor/jquery.cayley/)

* [Causal loop](https://github.com/shoetten/biovis.git)

* [Cause-and-effect diagram](http://bl.ocks.org/bollwyvl/9239214)

* [Circuit diagram](https://github.com/tracespace/pcb-stackup)

* [Class diagram - from UML 1/9](http://jumly.tmtk.net/)

* Collaboration diagram - from UML 2.0

* Communication diagram - from UML 2.0

* [Commutative diagram](https://github.com/sonoisa/XyJax)

* Comparison diagram

* Component diagram - from UML 3/9

* Composite structure diagram - from UML 2.0

* [Concept map](https://github.com/mbostock/d3/wiki/Gallery)

* Constellation diagram

* Context diagram

* Control flow diagram

* [Contour diagram](https://github.com/d3/d3-plugins/tree/master/geom/contour)

* Cordier diagram

* Cross functional flowchart

* Cube (3-axes) diagram



#### D

* Data model diagram

* Data flow diagram

* Data structure diagram

* [Dendrogram](https://github.com/mbostock/d3/wiki/Gallery)

* [Dependency diagram](https://github.com/mbostock/d3/wiki/Gallery)

* Deployment diagram - from UML 9/9

* Dot and cross diagram

* Double bubble map - used in education

* Drakon-chart



#### E

* Entity-Relationship diagram (ERD)

* Event-driven process chain

* [Euler diagram](https://github.com/benfred/venn.js/)

* Eye diagram - a diagram of a received telecommunications signal

* Express-G

* Extended Functional Flow Block Diagram (EFFBD)



#### F

* Family tree

* [Feynman diagram](http://photino.github.io/jquery-feyn/)

* Finite State Machine

    * [Machina](http://machina-js.org/)

    * [JS FSM](https://github.com/jakesgordon/javascript-state-machine)

    * [Stately](https://github.com/fschaefer/Stately.js)

* [Flow chart](https://adrai.github.io/flowchart.js/)

* Flow process chart

* Flow diagram

* Fusion diagram

* Free body diagram



#### G

* [Gantt chart](https://github.com/dk8996/Gantt-Chart)

* Graph

    * [Sigmajs](http://sigmajs.org/)

    * [D3](https://github.com/mbostock/d3/wiki/Gallery)

* Grotrian diagram

* Goodman diagram - shows the fatigue data (example: for a wind turbine blades)



#### H

* [Hasse diagram](https://bl.ocks.org/emeeks/38b7f4552e63c88f2c3afe76efda0b58)

* HIPO diagram



#### I

* Internal Block Diagram (IBD) used in SysML

* IDEF0

* IDEF1 (entity relations)

* Interaction overview diagram - from UML

* [Ishikawa diagram](http://bl.ocks.org/bollwyvl/9239214)



#### J

* Jackson diagram



#### K

* Karnaugh map

* Kinematic diagram



#### L

* [Ladder diagram](http://sourceforge.net/projects/mblogic/)

* Line of balance

* Link grammar diagram

* Loedel diagram



#### M

* Martin ERD

* [Message Sequence Chart](https://bramp.github.io/js-sequence-diagrams/)

* [Mind map](https://github.com/mbostock/d3/wiki/Gallery)

* Minkowski spacetime diagram

* [Modal logic tree](https://github.com/rkirsling/modallogic)

* Molecular Orbital diagram



#### N

* N2

* Nassi-Shneiderman diagram or structogram - a representation for structured programming

* Nomogram

* Network connection



#### O

* Object diagram - from UML 2/9

* Organigram

* Onion diagram - also known as "stacked Venn diagram"



#### P

* Package diagram from UML 4/9 and SysML

* Parametric diagram from SysML

* Penrose diagram

* PERT

* Petri net - shows the structure of a distributed system as a directed bipartite graph with annotations

* [Phylogenetic tree](http://bl.ocks.org/kueda/1036776)

    - [Alternate](https://www.jasondavies.com/tree-of-life/)

    - [Alternate 2](http://bl.ocks.org/mbostock/c034d66572fd6bd6815a)

* Piping and instrumentation diagram (P&ID)

* Phase diagram used to present solid/liquid/gas information

* Plant Diagram

* Pressure volume diagram used to analyse engines

* Pourbaix diagram

* Process flow diagram or PFD - used in chemical engineering

* Program structure diagram



#### Q

* [Quadrant diagram](https://github.com/christabor/jquery.quadgram)



#### R

* [Radar chart](https://github.com/alangrafu/radar-chart-d3)

    - [Other styles](http://bl.ocks.org/nbremer/21746a9668ffdf6d8242)

* Radial Diagram

* [Railroad diagram](https://kevinpt.github.io/syntrax/)

* Requirement Diagram Used in SysML

* Rich Picture

* Randolph diagram



#### S

* [Sankey diagram - represents material, energy or cost flows with quantity proportional arrows in a process network.](https://github.com/d3/d3-plugins/tree/master/sankey)

* Schematic diagram

* [SCXML](https://github.com/jbeard4/SCION)

* Sentence diagram - represents the grammatical structure of a natural language sentence.

* SDL/GR diagram - Specification and Description Language. SDL is a formal language used in computer science.

* Sequence diagram from UML 8/9 and SysML

* Shear and moment diagram

* Smith chart

* [Spider chart](https://github.com/alangrafu/radar-chart-d3)

* [Spray diagram](https://github.com/mbostock/d3/wiki/Gallery)

* SSADM - Structured Systems Analysis and Design Methodology (used in software engineering)

* [Star chart/Celestial sphere](https://github.com/kevinschaul/d3-star-plot)

* [State diagram are used for state machines in software engineering from UML 7/9](https://github.com/jbeard4/SCION)

* [Swim lane](http://bl.ocks.org/bunkat/1962173)

* Syntax diagram used in software engineering to represent a context-free grammar

* [Systems Biology Graphical Notation - a graphical notation used in diagrams of biochemical and cellular processes studied in Systems biology](https://github.com/iVis-at-Bilkent/sbgnviz-js)

* System context diagram

* System structure

* Systematic layout planning



#### T

* Timing Diagram: Digital Timing Diagram

* Timing Diagram: UML 2.0

* TQM Diagram



#### U

* [UML diagram - Unified Modeling Language (used in software engineering)](http://jumly.tmtk.net/)

* Use case diagram - from UML 5/9 and SysML



#### V

* Value Stream Mapping

* [Venn diagram](https://github.com/benfred/venn.js/)

* [Voronoi diagram](https://github.com/mbostock/d3/)



#### W

* [Warnier-Orr](https://github.com/christabor/d3.warnier_orr)



#### Y

* Yourdon-Coad - see Edward Yourdon, used in software engineering



## Data visualization

* [Box Plots](https://github.com/mbostock/d3/wiki/Gallery)

* [Area chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Difference chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Stacked Area Chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Line chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Bivariate Area Chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Multi-Series Line Chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Pie chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Donut Chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Bubble chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Bullet charts](https://github.com/mbostock/d3/wiki/Gallery)

* [Calendar View](https://github.com/mbostock/d3/wiki/Gallery)

* [Waterfall chart](https://github.com/mbostock/d3/wiki/Gallery)

* [Non-contiguous Cartogram](https://github.com/mbostock/d3/wiki/Gallery)

* [Chord Diagram](https://github.com/mbostock/d3/wiki/Gallery)

* [Timeseries](https://github.com/mbostock/d3/wiki/Gallery)

* [Circle Packing](https://github.com/mbostock/d3/wiki/Gallery)

* [Stream Graph](https://github.com/mbostock/d3/wiki/Gallery)

* [Stacked bars graph](https://github.com/mbostock/d3/wiki/Gallery)

* [Sunburst](https://github.com/mbostock/d3/wiki/Gallery)

* [Node-link tree](https://github.com/mbostock/d3/wiki/Gallery)

* [Treemap](https://github.com/mbostock/d3/wiki/Gallery)

* [Hierarchical edge bundling](https://github.com/mbostock/d3/wiki/Gallery)

* [Parallel coordinates](https://github.com/mbostock/d3/wiki/Gallery)

* [Scatterplot](https://github.com/mbostock/d3/wiki/Gallery)

* [Scatterplot matrix](https://github.com/mbostock/d3/wiki/Gallery)

* [Chloropleth](https://github.com/mbostock/d3/wiki/Gallery)

* [Hive plot](https://github.com/mbostock/d3/wiki/Gallery)

* [Co-occurence matrix](https://github.com/mbostock/d3/wiki/Gallery)

* [Word cloud](https://github.com/mbostock/d3/wiki/Gallery)

* [Graph](https://github.com/mbostock/d3/wiki/Gallery)

* [Hexagonal binning](https://github.com/mbostock/d3/wiki/Gallery)

* [Contour plot](https://github.com/mbostock/d3/wiki/Gallery)

* [Maps](https://github.com/mbostock/d3/wiki/Gallery)

* [Slope graph](https://github.com/mbostock/d3/wiki/Gallery)

* [Geometry examples](https://github.com/christabor/d3.geometer)



## Also of interest:



* http://techslides.com/over-1000-d3-js-examples-and-demos

* https://github.com/mbostock/d3/wiki/Plugins