6 data visualization javascript libraries

A recent web visualization project forced me to explore some data visualization libraries for JavaScript. Below are a few I narrowed down during the development phase.


Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing around 38 KB of JS, it has all the mapping features most developers will ever need.

Although Leaflet is lightweight, and focuses on a core set of features, an easy way to extend its functionality is to use third-party plugins. There are hundreds of nice leaflet plugins you can choose from to extend the functionality of Leaflet. This is one of my favorite mapping libraries and which I’ll surely cover in another post.


Sigma is a JavaScript library dedicated to graph drawing. It makes it easy to publish network graphs on Web pages, and allows developers to integrate network exploration in Web applications. Sigma provides a lot of built-in features, such as Canvas and WebGL renderers or mouse and touch support, to make networks manipulation on Web pages smooth and fast for the user.


Chart.js is a simple yet flexible JavaScript charting using the ‘canvas’ element. It’s easy to get started with Chart.js. All that’s required is the script included in your page along with a single ‘canvas’ node to render the chart.

You can mix and match bar and line charts to provide a clear visual distinction between datasets.

You can plot around 60 different chart types along with animation, and it supports responsive design for perfect scale granularity.


Vega is a visualization grammar, a declarative language for creating, saving, and sharing interactive visualization designs. With Vega, you can describe the visual appearance and interactive behavior of a visualization in a JSON format, and generate web-based views using Canvas or SVG.

Vega provides basic building blocks for a wide variety of visualization designs: data loading and transformation, scales, map projections, axes, legends, and graphical marks such as rectangles, lines, plotting symbols, etc. Interaction techniques can be specified using reactive signals that dynamically modify a visualization in response to input event streams.


MetricsGraphics.js is a library built on top of D3 that is optimized for visualizing and laying out time-series data. It provides a simple way to produce common types of graphics in a principled, consistent and responsive way. The library currently supports line charts, scatterplots, histograms, bar charts and data tables as well as features like rug plots and basic linear regression.

The library makes it easy to construct narratives by providing a layout template based on Bootstrap. Take a look at the following example.

d3.json('data/fake_users1.json', function(data) {
    data = MG.convert.date(data, 'date');
        title: "Line Chart",
        description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.",
        data: data,
        width: 600,
        height: 200,
        right: 40,
        target: document.getElementById('fake_users1'),
        x_accessor: 'date',
        y_accessor: 'value'


dc.js is a javascript charting library with native crossfilter js support, allowing highly efficient exploration on large multi-dimensional datasets. It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive and therefore provide instant feedback to user interaction.

Leave a Reply

Your email address will not be published. Required fields are marked *