Data visualisation is the creation and study of the visual representation of data, meaning "information that has been abstracted in some schematic form, including attributes or variables for the units of information". - wikipedia


D3.js "Data Driven Documents"

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.


Script references


Customizable SVG map visualizations for the web in a single Javascript file using D3.js

1blankspace namespace for visualisation

Country codes

Countries JSON by mledoze

chart.js Open source charting using HTML 5 CANVAS.
chartnew.js A fork of chart.js with more functionality. Build re-usable charts and chart components for d3.js - very new.
c3.js D3-based reusable chart library.
InfoVis toolkit Create interactive data visualisations for the web.
Polymaps Library for making dynamic, interactive maps.
Cartodb Map and analyze location data.
processing Language for visual arts.
Flot jQuery chart plotting.


Data visualisation
Information visualisation
Getting started Javascript
Choosing a good chart
(as pdf)
D3 - towards reusable charts



A key part of visualisation is the preparation of the data to be visualised.

A common pattern for taking raw data and turning into information is map/reducing.


  • Mapping means to iterate over a collection (array) and transform its values
  • Reducing means to iterate over a collection (array) and produce a single variable, ie like a count

Useful links:





Namespace The 1blankspace.visualise namespace assists in creating visualisations/charts based on chartjs, c3 & Datamaps.

c3 & Datamaps depend on d3, using SVG elements - ie vector based.

chartjs uses the HTML5 canvas element - ie pixed based.

Example ns1blankspace.visualise.render(
type: 'bar',
legend: true,
datasets: [],
labels: [],
options: {}

See namespace for application of the visualise namespace.