├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Chris Tabor 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # diagram-tools-js 2 | A list of front-end (javascript/*script) tools for creating diagrams and data visualizations. 3 | 4 | ## What types of tools are listed? 5 | 6 | 1. Diagram tools 7 | 2. Data visualization tools 8 | 9 | Note: there is cross-over for both of these. 10 | 11 | *All libraries listed are **free** and **open-source**. See individual libraries for details, of course.* 12 | 13 | # Types 14 | 15 | ## Diagrams 16 | 17 | Taken from [Wikipedia](en.wikipedia.org/wiki/Diagram): 18 | 19 | #### A 20 | * Activity diagram (used in UML 6/9 and SysML) 21 | 22 | #### B 23 | * Bachman diagram 24 | * Booch - used in software engineering 25 | * Block diagram 26 | * Block Definition Diagram (BDD) used in SysML 27 | * Business & IT Diagram (B&IT) - used in business and IT modelling 28 | 29 | #### C 30 | * [Carroll diagram](https://github.com/christabor/jquery.cayley/) 31 | * [Cartogram](https://github.com/mbostock/d3/wiki/Gallery) 32 | * [Category theory diagrams](https://github.com/sonoisa/XyJax) 33 | * [Cayley table](https://github.com/christabor/jquery.cayley/) 34 | * [Causal loop](https://github.com/shoetten/biovis.git) 35 | * [Cause-and-effect diagram](http://bl.ocks.org/bollwyvl/9239214) 36 | * [Circuit diagram](https://github.com/tracespace/pcb-stackup) 37 | * [Class diagram - from UML 1/9](http://jumly.tmtk.net/) 38 | * Collaboration diagram - from UML 2.0 39 | * Communication diagram - from UML 2.0 40 | * [Commutative diagram](https://github.com/sonoisa/XyJax) 41 | * Comparison diagram 42 | * Component diagram - from UML 3/9 43 | * Composite structure diagram - from UML 2.0 44 | * [Concept map](https://github.com/mbostock/d3/wiki/Gallery) 45 | * Constellation diagram 46 | * Context diagram 47 | * Control flow diagram 48 | * [Contour diagram](https://github.com/d3/d3-plugins/tree/master/geom/contour) 49 | * Cordier diagram 50 | * Cross functional flowchart 51 | * Cube (3-axes) diagram 52 | 53 | #### D 54 | * Data model diagram 55 | * Data flow diagram 56 | * Data structure diagram 57 | * [Dendrogram](https://github.com/mbostock/d3/wiki/Gallery) 58 | * [Dependency diagram](https://github.com/mbostock/d3/wiki/Gallery) 59 | * Deployment diagram - from UML 9/9 60 | * Dot and cross diagram 61 | * Double bubble map - used in education 62 | * Drakon-chart 63 | 64 | #### E 65 | * Entity-Relationship diagram (ERD) 66 | * Event-driven process chain 67 | * [Euler diagram](https://github.com/benfred/venn.js/) 68 | * Eye diagram - a diagram of a received telecommunications signal 69 | * Express-G 70 | * Extended Functional Flow Block Diagram (EFFBD) 71 | 72 | #### F 73 | * Family tree 74 | * [Feynman diagram](http://photino.github.io/jquery-feyn/) 75 | * Finite State Machine 76 | * [Machina](http://machina-js.org/) 77 | * [JS FSM](https://github.com/jakesgordon/javascript-state-machine) 78 | * [Stately](https://github.com/fschaefer/Stately.js) 79 | * [Flow chart](https://adrai.github.io/flowchart.js/) 80 | * Flow process chart 81 | * Flow diagram 82 | * Fusion diagram 83 | * Free body diagram 84 | 85 | #### G 86 | * [Gantt chart](https://github.com/dk8996/Gantt-Chart) 87 | * Graph 88 | * [Sigmajs](http://sigmajs.org/) 89 | * [D3](https://github.com/mbostock/d3/wiki/Gallery) 90 | * Grotrian diagram 91 | * Goodman diagram - shows the fatigue data (example: for a wind turbine blades) 92 | 93 | #### H 94 | * [Hasse diagram](https://bl.ocks.org/emeeks/38b7f4552e63c88f2c3afe76efda0b58) 95 | * HIPO diagram 96 | 97 | #### I 98 | * Internal Block Diagram (IBD) used in SysML 99 | * IDEF0 100 | * IDEF1 (entity relations) 101 | * Interaction overview diagram - from UML 102 | * [Ishikawa diagram](http://bl.ocks.org/bollwyvl/9239214) 103 | 104 | #### J 105 | * Jackson diagram 106 | 107 | #### K 108 | * Karnaugh map 109 | * Kinematic diagram 110 | 111 | #### L 112 | * [Ladder diagram](http://sourceforge.net/projects/mblogic/) 113 | * Line of balance 114 | * Link grammar diagram 115 | * Loedel diagram 116 | 117 | #### M 118 | * Martin ERD 119 | * [Message Sequence Chart](https://bramp.github.io/js-sequence-diagrams/) 120 | * [Mind map](https://github.com/mbostock/d3/wiki/Gallery) 121 | * Minkowski spacetime diagram 122 | * [Modal logic tree](https://github.com/rkirsling/modallogic) 123 | * Molecular Orbital diagram 124 | 125 | #### N 126 | * N2 127 | * Nassi-Shneiderman diagram or structogram - a representation for structured programming 128 | * Nomogram 129 | * Network connection 130 | 131 | #### O 132 | * Object diagram - from UML 2/9 133 | * Organigram 134 | * Onion diagram - also known as "stacked Venn diagram" 135 | 136 | #### P 137 | * Package diagram from UML 4/9 and SysML 138 | * Parametric diagram from SysML 139 | * Penrose diagram 140 | * PERT 141 | * Petri net - shows the structure of a distributed system as a directed bipartite graph with annotations 142 | * [Phylogenetic tree](http://bl.ocks.org/kueda/1036776) 143 | - [Alternate](https://www.jasondavies.com/tree-of-life/) 144 | - [Alternate 2](http://bl.ocks.org/mbostock/c034d66572fd6bd6815a) 145 | * Piping and instrumentation diagram (P&ID) 146 | * Phase diagram used to present solid/liquid/gas information 147 | * Plant Diagram 148 | * Pressure volume diagram used to analyse engines 149 | * Pourbaix diagram 150 | * Process flow diagram or PFD - used in chemical engineering 151 | * Program structure diagram 152 | 153 | #### Q 154 | * [Quadrant diagram](https://github.com/christabor/jquery.quadgram) 155 | 156 | #### R 157 | * [Radar chart](https://github.com/alangrafu/radar-chart-d3) 158 | - [Other styles](http://bl.ocks.org/nbremer/21746a9668ffdf6d8242) 159 | * Radial Diagram 160 | * [Railroad diagram](https://kevinpt.github.io/syntrax/) 161 | * Requirement Diagram Used in SysML 162 | * Rich Picture 163 | * Randolph diagram 164 | 165 | #### S 166 | * [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) 167 | * Schematic diagram 168 | * [SCXML](https://github.com/jbeard4/SCION) 169 | * Sentence diagram - represents the grammatical structure of a natural language sentence. 170 | * SDL/GR diagram - Specification and Description Language. SDL is a formal language used in computer science. 171 | * Sequence diagram from UML 8/9 and SysML 172 | * Shear and moment diagram 173 | * Smith chart 174 | * [Spider chart](https://github.com/alangrafu/radar-chart-d3) 175 | * [Spray diagram](https://github.com/mbostock/d3/wiki/Gallery) 176 | * SSADM - Structured Systems Analysis and Design Methodology (used in software engineering) 177 | * [Star chart/Celestial sphere](https://github.com/kevinschaul/d3-star-plot) 178 | * [State diagram are used for state machines in software engineering from UML 7/9](https://github.com/jbeard4/SCION) 179 | * [Swim lane](http://bl.ocks.org/bunkat/1962173) 180 | * Syntax diagram used in software engineering to represent a context-free grammar 181 | * [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) 182 | * System context diagram 183 | * System structure 184 | * Systematic layout planning 185 | 186 | #### T 187 | * Timing Diagram: Digital Timing Diagram 188 | * Timing Diagram: UML 2.0 189 | * TQM Diagram 190 | 191 | #### U 192 | * [UML diagram - Unified Modeling Language (used in software engineering)](http://jumly.tmtk.net/) 193 | * Use case diagram - from UML 5/9 and SysML 194 | 195 | #### V 196 | * Value Stream Mapping 197 | * [Venn diagram](https://github.com/benfred/venn.js/) 198 | * [Voronoi diagram](https://github.com/mbostock/d3/) 199 | 200 | #### W 201 | * [Warnier-Orr](https://github.com/christabor/d3.warnier_orr) 202 | 203 | #### Y 204 | * Yourdon-Coad - see Edward Yourdon, used in software engineering 205 | 206 | ## Data visualization 207 | * [Box Plots](https://github.com/mbostock/d3/wiki/Gallery) 208 | * [Area chart](https://github.com/mbostock/d3/wiki/Gallery) 209 | * [Difference chart](https://github.com/mbostock/d3/wiki/Gallery) 210 | * [Stacked Area Chart](https://github.com/mbostock/d3/wiki/Gallery) 211 | * [Line chart](https://github.com/mbostock/d3/wiki/Gallery) 212 | * [Bivariate Area Chart](https://github.com/mbostock/d3/wiki/Gallery) 213 | * [Multi-Series Line Chart](https://github.com/mbostock/d3/wiki/Gallery) 214 | * [Pie chart](https://github.com/mbostock/d3/wiki/Gallery) 215 | * [Donut Chart](https://github.com/mbostock/d3/wiki/Gallery) 216 | * [Bubble chart](https://github.com/mbostock/d3/wiki/Gallery) 217 | * [Bullet charts](https://github.com/mbostock/d3/wiki/Gallery) 218 | * [Calendar View](https://github.com/mbostock/d3/wiki/Gallery) 219 | * [Waterfall chart](https://github.com/mbostock/d3/wiki/Gallery) 220 | * [Non-contiguous Cartogram](https://github.com/mbostock/d3/wiki/Gallery) 221 | * [Chord Diagram](https://github.com/mbostock/d3/wiki/Gallery) 222 | * [Timeseries](https://github.com/mbostock/d3/wiki/Gallery) 223 | * [Circle Packing](https://github.com/mbostock/d3/wiki/Gallery) 224 | * [Stream Graph](https://github.com/mbostock/d3/wiki/Gallery) 225 | * [Stacked bars graph](https://github.com/mbostock/d3/wiki/Gallery) 226 | * [Sunburst](https://github.com/mbostock/d3/wiki/Gallery) 227 | * [Node-link tree](https://github.com/mbostock/d3/wiki/Gallery) 228 | * [Treemap](https://github.com/mbostock/d3/wiki/Gallery) 229 | * [Hierarchical edge bundling](https://github.com/mbostock/d3/wiki/Gallery) 230 | * [Parallel coordinates](https://github.com/mbostock/d3/wiki/Gallery) 231 | * [Scatterplot](https://github.com/mbostock/d3/wiki/Gallery) 232 | * [Scatterplot matrix](https://github.com/mbostock/d3/wiki/Gallery) 233 | * [Chloropleth](https://github.com/mbostock/d3/wiki/Gallery) 234 | * [Hive plot](https://github.com/mbostock/d3/wiki/Gallery) 235 | * [Co-occurence matrix](https://github.com/mbostock/d3/wiki/Gallery) 236 | * [Word cloud](https://github.com/mbostock/d3/wiki/Gallery) 237 | * [Graph](https://github.com/mbostock/d3/wiki/Gallery) 238 | * [Hexagonal binning](https://github.com/mbostock/d3/wiki/Gallery) 239 | * [Contour plot](https://github.com/mbostock/d3/wiki/Gallery) 240 | * [Maps](https://github.com/mbostock/d3/wiki/Gallery) 241 | * [Slope graph](https://github.com/mbostock/d3/wiki/Gallery) 242 | * [Geometry examples](https://github.com/christabor/d3.geometer) 243 | 244 | ## Also of interest: 245 | 246 | * http://techslides.com/over-1000-d3-js-examples-and-demos 247 | * https://github.com/mbostock/d3/wiki/Plugins 248 | --------------------------------------------------------------------------------