Languages and libraries for building visualizations

D3.js (Data-Driven Documents)

D3.js (Data-Driven Documents) is a Javascript library for "manipulating documents based on data". Since appearing in a 2011 InfoVis research paper by M. Bostock et al., D3.js has become a standard for developing custom data visualization online. No browser plugins required; each mark in a visualization has a corresponding SVG element, and styling is handled using CSS.

» First, visit the D3 gallery to see some amazing examples and to get a sense of what is possible with this library.

The latest version is D3 v4 but many tutorials and examples were written for D3 v3. While the major principles remain the same, there were many syntax and structure related changes. The new version is not backwards compatible so you should decide in advance which version you want to use. The release notes provide detailed information about the changes in D3 v4.

Learning D3

  1. Learn about the technology fundamentals for D3.js
    If you are not yet familiar with basic web technologies, we recommend you to look it up online (Learn to Code HTML & CSS, MDN web docs or w3schools)
  2. Read the Intro to D3 and implement your first D3 visualizations
  3. Learn more about scales. Perhaps the most important concept in D3 that helps you to map abstract data to visual variables.
  4. Follow various tutorials, inspect code examples & live demos, and create your own D3 visualizations. Try out the Bl.ock Builder, an online editor for creating and sharing D3 examples. You can fork a block you like and make modifications or extensions.
  5. Selections enable us to manipulate individual elements based on our data. This concept is an essential building block of D3 but at the beginning it might seem a bit confusing. Read Thinking with Joins and check out the General Update Pattern (Part 1 | Part 2 | Part 3) and you will easily master D3's enter, update, and exit selections.
  6. Further tutorials:

D3 Book

“Interactive Data Visualization for the Web — An Introduction to Designing with D3”
by Scott Murray (2nd edition, D3 v4)
If you like step-by-step guides and if you are more a book type person, Scott Murray's comprehensive introduction to D3 might be an ideal resource. Code examples accompanying the book are on Github

Alternatives to D3

  • Vega & Vega Lite
    "Vega is a declarative language for creating, saving, and sharing interactive visualization designs." JSON specifications are parsed by Vega to generate interactive views using either HTML5 Canvas or SVG.
  • R + Shiny
    Shiny is an R package used to generate web applications containing interactive data analysis and visualization elements. No knowledge of HTML, CSS, JavaScript is required. Code is written in R.
  • ggplot2 for R and ggplot for Python
    Visualization packages for R and Python, based on Wilkinson's Grammar of Graphics.
  • Bokeh
    If you want to create interactive visualizations with Python, you might want to look at Bokeh as an alternative to matplotlib or ggplot which are mostly used for static visualizations.
  • Processing & p5.js
    Processing is a Java-based language and software environment that is used extensively for data visualizations (supports WebGL/OpenGL). p5.js is a JavaScript library based on the same idea of Processing.
  • Chart.js
    D3 is a low-level library that allows you highly flexible, data-driven modifications of the DOM tree. However, if you want to create simple charts without much interactivity, you can try Chart.js (or NVD3).

Geographic Maps

Interactive tools (non-programming)


Other tools

Visualization desgin



Case Studies




Last modified: Oct 16, 2017