JavaScript
Article

7 JavaScript Libraries for Specific Visualizations

By Alexis Ulrich

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

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

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

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

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
});

JointJS

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

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.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • PauletteVSmith

    My last pay >>>>>>>
    ————————————————————————–

    {Go to next link in this site}

  • http://geekgang.me/ Tony

    и даже здесь

  • http://tacitoyexplicito.wordpress.com/ Luis Alfonso Noguera

    thanks good article

  • xmannv

    Awesome

  • http://nyasro.com/ Nyasro

    Nice list. Will use some on my projects.

  • Rafel

    Incredible that people are still using that toy JS language, and investing tons of time and money…

  • Андрей

    The Javascript libraries makes me happy last years. Good compilation!

  • http://www.vizitsolutions.com/ Alex Kluge

    It’s more scientific visualization than data visualization but I have been working with JavaScript and WebGL to build a toolkit to teach math and physics specifically targeted to the point where the student first encounters intrinsically 3D material. This is one of the consistent speedbumps in math, physics, and engineering and my goal is to provide meaningful, clear, interactive visualizations which integrate well into educational content. The first area covered is electric and vector fields.

    http://www.vizitsolutions.com/portfolio/vfield/

    JavaScript has really come a long way in the past few years, both in terms of performance and capabilities.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.