7 JavaScript Libraries for Specific Visualizations

October 17, 2014

Apart from the usual charts and graphs libraries used to create interactive data visualizations already covered here, which can present a steep learning curve as a price for their powerful versatility, there are many less known JavaScript libraries that specifically address a visualization type. They come very handy when you deal with illustrating content from data journalism with an interactive experience. Here are a few of them to start with.

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.

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Timeline

Timeline is an open source tool for creating interactive responsive timelines. You can embed many media sources, such as YouTube or Vimeo videos, Google Maps, SoundCloud, or Twitter 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.

<script type="text/javascript">
    var timeline_config = {
        width:              '100%',
        height:             '600',
        source:             'data.jsonp',
        embed_id:           'timeline-embed',
        start_zoom_adjust:  '-1',
        lang:               'en',
        css:                'javascript/timeline/css/timeline.css',
        js:                 'javascript/timeline/timeline-min.js'
    }
</script>
<script type="text/javascript" src="javascript/timeline/storyjs-embed.js"></script>

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.

storyjs_jsonp_data = {
  "timeline":
  {
    "headline": "David J. Peterson",
    "type": "default",
    "text": "",
    "lang": "en",
    "startDate": "1981,01,20",
    "date": [
      {
        "startDate": "1981,01,20",
        "headline": "Birth",
        "text": "<p>David J. Peterson was born at Long Beach, California.</p>",
        "asset": {
          "media": "images/articles/david-j-peterson/Long-beach-CA.jpg",
          "thumbnail": "images/articles/david-j-peterson/Long-beach-s.jpg",
          "credit": "Wikimedia commons"
        }
      },
      {
        "startDate": "2006",
        "headline": "M.A. in linguistics",
        "text": "<img width=\"246\" height=\"200\" src=\"images/articles/david-j-peterson/University-of-California-San-Diego.jpg\" class=\"article-pic article-left-pic\" alt=\"University of California, San Diego\" /><p>M.A. in linguistics at the University of California, San Diego, with the subject “Front Vowels in Velar Coda Contexts: An Examination of the Front Vowels of Southern Californian English”.</p>"
      },
    ]
  }
}

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.

$('.map').smallworld({
  center: [45, -50],
  markers: [
    [37.757719928168605, -122.43760000000003],
    [51.528868434293145, -0.10159864999991441],
    [40.705960705452846, -73.9780035]
  ],
  markerSize: 8
});

GitHub source

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.

A code sample is shown below.

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
  el: $('#myholder'),
  width: 600,
  height: 200,
  model: graph,
  gridSize: 1
});

var rect = new joint.shapes.basic.Rect({
  position: { x: 100, y: 30 },
  size: { width: 100, height: 30 },
  attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
});

var rect2 = rect.clone();
rect2.translate(300);

var link = new joint.dia.Link({
  source: { id: rect.id },
  target: { id: rect2.id }
});

graph.addCells([rect, rect2, link]);

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.

Example code:

var heatmap = h337.create({
  container: domElement
});

heatmap.setData({
  max: 5,
  data: [{ x: 10, y: 15, value: 5}, ...]
});

Tangle

Tanglemap

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.

Example code:

When you eat <span data-var="cookies" class="TKAdjustableNumber"> cookies</span>, you consume <span data-var="calories"> calories</span>.

var tangle = new Tangle(document, {
  initialize: function () { this.cookies = 3; },
  update: function () { this.calories = this.cookies * 50; }
});

Conclusion

As you have seen with these focused libraries, there is no need for using huge chart and graph libraries like D3.js or InfoVis when your visualization project is limited in scope. For a specific project, a tailored library does the job very well and is easier to implement.

If you are using other specific data visualization libraries, you can share them with us in the comments.

JavaScript: Novice to Ninja, 2nd Edition