Visualising Data with JavaScript shows how to build maps, charts and data stories using JavaScript.

Learn how to build charts using Chart.js, data-driven maps using Leaflet and a custom chart using D3.js. You'll also learn how to make a data story that combines multiple charts and maps.

There's a code download containing eight examples, including multiple Chart.js examples, a data-driven Leaflet map, a D3 custom visualisation, a data story and a data-wrangling example.

Some of the topics covered are:

creating a web application with JavaScript
the Vite build tool
making a chart with Chart.js
using Tidy.js to process data
styling Chart.js charts, including dark theme, multi-line charts and stacked bar charts
introduction to D3.js
example custom visualisation using D3.js
how to add a tooltip to a D3.js visualisation using Tippy.js
introduction to Leaflet for creating maps
how to make a data-driven map with Leaflet
how to make a data-story
an example data-story containing 4 charts, a map and detailed styling
how to publish the data story onto the web
how to transform the data from the UK Government into a JSON file
Some of the chapters include exercises and solutions.

To get the most out of this book you need to be familiar with HTML, SVG, CSS and JavaScript. If you need to get up to speed with these languages I recommend my book Fundamentals of HTML, CSS, SVG & JavaScript for Data Visualisation. I've bundled both books together at a reduced cost (visit bundle).

You also need a text editor (such as VS Code) and an installation of Node.js.

This book uses ES Modules and modern build-tools throughout so you'll learn about current technologies.

I've also published Data Dashboards with JavaScript which contains more advanced material. It shares some chapters with this book but doesn't cover D3 or data stories. Instead it has two chapters on building data dashboards.