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.
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.
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.
Heatmap
Heatmap.js is a library dedicated to heatmap displays, where data values contained in a matrix are represented as colors. Available on GitHub, its code has sparked enough interest for other developers to provide plugins for Google Maps, Open Layers, and Leaflet. While the code is open source, a support license is also available for companies and commercial products.
Tangle
The standalone Tangle library creates reactive documents where the users can play with parameters within text or graphical areas to change other content. The examples are way more impressive than this short description, so you should check them out to get a better idea.