7個用于特定可視化的JavaScript庫
除了用于創建交互式數據可視化的通常圖表和圖形庫，還有一些專門針對可視化類型很多鮮為人知的JavaScript庫。他們都非常方便，當你處理說明與互動體驗時。
JSPlumb
JSPlumb helps you visually connect elements: flowcharts, kitchen sinks, state machines, and hierarchical charts. It uses SVG where available and VML on IE8 and below, as it is compatible down to IE6. Its different implementations support animation and drag and drop features, which may need specific plugins. Its code is compatible with jQuery, MooTools, and YUI, and can also be used in vanilla JavaScript. This free library is available on GitHub.
Its four main concepts are anchors (specific location), endpoints (visual representation of connections ends, attached to anchors), connectors (visual representation of the line that connects two elements), and overlays (connector decoration, like an arrow or a label). With these four elements only, you are ready to go.
JS Sequence Diagrams
JS Sequence Diagrams turns text into vector UML sequence diagrams. It depends on both Rapha?l and Underscore.js, and the result can be downloaded in SVG or even saved as a plain image if the interactive side of it is not needed (like creating diagrams on the fly through user input).
Two different themes are available: straight lines and rectangles for a neat professional look, and hand-drawn lines and written text for a fresh napkin look and feel. The text input represents a UML sequence diagram with processes linked by arrows. The examples are self-explaining with such an understandable syntax. A text input sample is shown below.
</div>
Timeline
Timeline is an open source tool for creating interactive responsive timelines. You can embed many media sources, such as 油Tube or Vimeo videos, Google Maps, SoundCloud, or 推ter feeds. The data source can be a Google spreadsheet or a JSON file, and you can either embed your timeline hosted on their site via an iframe or directly host it yourself, the code is available on GitHub.
Here is an example of an implementation using a JSONP data source. We first set up the time line parameters where we call the data.jsonp file.
</div>
The JSONP file sets the timeline parameters and a array of data for each date, including the headline and the text alongside the media provided. The thumbnail displayed in the timeline is automatically taken from the given media asset, unless explicitly provided.
The resulting timeline is a biography of David J. Peterson.
Smallworld
The free smallworld.js utility helps you generate maps overview with GeoJSON and HTML Canvas. It has no dependencies and comes with a simple wrapper to use with jQuery or Zepto. The map can be centered on latitude/longitude coordinates, a color can be given for water and landmass, and markers can be added with different size and colors. There is no interactive feature included out of the box, as it is mostly to be used with an illustrative purpose, but you should be able to script your own interactivity needs on top of it.
JointJS
JointJS is a JavaScript diagramming library that creates diagrams like finite state machines, organizational charts, entity-relationship diagrams, Petri nets, UML, and logic circuits among other things. The tutorials are well explained, and useful for both beginners and advanced users.
Its licensing model works on a per-developer basis: each developer license enables them to create an unlimited number of commercial applications on any number of servers.
