Cost: Price on application
Duration: 5 Days
This course is not available as part of our public schedule but can be provided on a customised client specific basis.
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
RESTful web service
CSS Selectors and basic CSS
Event driven programming, document ready event, mouse over, mouse click
Chaining function 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
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.
Using CSS to style SVG
Using d3 to create SVG elements
Using properties to communicate information (size, colour)
Understanding SVG translations and transformations
Introduction to Geospatial Information:
Some GIS tools
Understanding map projections
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.