GETTING STARTED
VISUALISATION

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


RESOURCES

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.

Examples

Script references
DataMaps


 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.
nvd3.org 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
Infographics
Information visualisation
Getting started Javascript
Choosing a good chart
(as pdf)
D3 - towards reusable charts

 
 
LINKS 		     
  MAP/REDUCE      
 

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.

Where:

  • 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:

      
 

OPEN DATA SOURCES

      
 
Worldbank
     
 

1BLANKSPACE

      
 
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 1blankspace.financial.budget namespace for application of the visualise namespace.