JavaScript Data Visualisation using Maps

Prerequisites

This course requires a good knowledge of web technologies such as HTML, CSS and Javascript, the course starts with a brief overview of the javascript that will be utilised some of which would be at the intermediate level. If you are a programmer with limited web experience then our Web Programming with JavaScript, HTML & CSS - Introduction course would be an excellent primer.

This course will use Visual Studio Code and a simple node.js web server to serve static content. Data will be supplied using JSON files and RESTful web services that produce JSON. We can tailor this to match other development tools and technology stacks if required. We will be using Chrome and the Chrome developer tools but the content should work with any modern browser.

Setting up a development environment

Setting up a development environment
IDE
Webserver
RESTful web service
Creating a few simple web pages with basic layout, Javascript frameworks and CSS

HMTL, CSS & Javascript Prerequisites

This module makes sure that the syntax that will be used in the rest of the course is understood by participants. During the course we will rely on HTML, CSS and Javascript and it is necessary for people to be comfortable with the content of this module

Javascript syntax 101
Javascript arrays
Javascript objects and the JSON format
Iterating through a javascript array of objects
CSS Selectors and basic CSS
Event driven programming, document ready event, mouse over, mouse click
Javascript frameworks
jquery
Callback functions
Chaining function calls
Ajax calls
Interacting with RESTful web services
Using Chrome developer tools effectively

Creating a Google map

Embedding a google map - cutting and pasting the html from google maps
Adding a google map using an API key
Choosing the centre and zoom level
Adding pushpins
Customising a pushpin image
Adding an event to a pushpin (mouseover and click)
Visualising data from a RESTful web service on google map

Introduction to the d3 framework

D3.js is a fantastic framework for visualisation and creating of data driven documents. It can be used for almost any type of visualisation. This course will concentrate on using d3 for map visualisations but a basic understanding of the framework is necessary before tackling more complex examples.
What is d3.js?
What can it do?
When should you use it?
Adding the framework
Creating some basic visualisations

Understanding the d3 enter, update, exit pattern

The way that d3 works is that it has 3 core times when it is called. Every time a new item of data is added the enter() method is called. Every time the data changes the visualisation is updated and when an item of data is removed the exit() method is called. Understanding this pattern is vital to working with d3.

D3 scales and axes

Scaling your data to fit on the screen is a necessary task in data visualisation. D3 provides a number of features that make this very easy.
Using a scaling function for simple numbers
Using a scaling function for points
Using a scaling function for colours
Creating an svg axis for your visualisation

Using SVG elements for visualisation

Scalable Vector Graphics are very useful for data visualisations. Our early examples presented information by changing the size of rectangular html elements. With SVG we can scale and transform complex shapes and objects to give much richer visualisations. In particular for this course the map elements we will be using will be presented using SVG paths.
Understanding SVG
Using CSS to style SVG
Using javascript to interact with SVG
Using d3 to create SVG elements
Using properties to communicate information (size, colour)
Understanding SVG translations and transformations

Introduction to Geospatial Information

Mapping terminology
Some GIS tools
Understanding map projections
GEOJSON
Sources of map data
Changing the projection of a map
Simplifying your map - removing some detail can improve the speed of rendering

Using d3 to display a map

Using d3 to get GEOJSON
Looking at the GEOJSON format
Iterating the map features and creating map elements
Adding the map features to a svg element
Setting simple properties for the map features
Ensuring that the map is visible

Creating a choropleth map

A choropleth map is one where the regions on the map are coloured to communicate information, often statistics. The example we use is to map crime statistics for Ireland but this can be customised to meet client requirements if necessary.
Getting statistical information to present
Getting a map
Harmonising the map regions and the data.
Figuring out the map projection, scale, center and zoom
Choosing a scaling function to present our data
Adding interactivity - mouse over, mouse click

Putting points on a d3.js map

Mapping data points at exact gps coordinates
Modifying properties to communicate information
Adding interactivity - mouse over, mouse click.
Creating a point at the centre of a region rather than at an exact location

Adding a time dimension to your visualisation

With d3.js you can update your visualisation to get very nice animated visualisations. We finish by creating an interactive visualisation of the population statistics for Ireland from the census figures since 1841.