Visualising Data with JavaScript Complete Bundle

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.

Data Dashboards with JavaScript shows how to data dashboards with JavaScript.

You'll learn how to build a data dashboard using charting library Chart.js, mapping library Leaflet and UI library React. View the dashboard you'll learn to build.

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 Leaflet for creating maps
• how to make a data-driven map with Leaflet
• introduction to React
• how to make a data dashboard using React, Chart.js and Leaflet
• how to create an API for the dashboard
• how to deploy the dashboards
• how to transform the data from the UK Government into a JSON file

Some of the chapters include exercises and solutions.

There's a code download containing ten examples, including multiple Chart.js examples, a data-driven Leaflet map, a data-dashboard, a client-server data dashboard and a data-wrangling example.

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 Visualising Data with JavaScript which shares some chapters with this book but doesn't cover data dashboards or React. Instead it has chapters on D3 and Data Stories.

This book covers the fundamentals of HTML, SVG, CSS and JavaScript for visualising data.

If you're wanting to learn D3.js (or other JavaScript visualisation libraries) and need to get up to speed with HTML, SVG, CSS and JavaScript, this book is ideal. It goes through the basics of these languages, and gives a good foundation for learning libraries such as D3.js.

It's also useful if you're coming from a language such as Python or R and use tools such as Dash and Shiny. If you're wanting to customise your web applications and CSS and JavaScript are a stumbling block then this book should help.

This book doesn’t assume prior knowledge of HTML, SVG, CSS and JavaScript but it’ll be helpful if you’ve some coding experience. Being familiar with a text editor (or IDE) will also be helpful.

It’s by no means a comprehensive tutorial on HTML, SVG, CSS and JavaScript. You’d need a much bigger book for that. Think of this book as presenting the minimum of what you ought to know if you’re wanting to work with web based data visualisations.

The book covers topics such as:

• HTML elements such as headings, lists, images and dropdown menus
• SVG elements such as lines, rectangles, circles, groups and paths
• SVG transforms (including how to combine them)
• CSS rules
• CSS properties for HTML and SVG
• CSS id and class attributes
• CSS layout (including Flexbox)
• CSS media queries
• JavaScript variables and data types
• JavaScript arrays and objects
• JavaScript functions
• JavaScript iteration
• JavaScript promises
• JavaScript in the browser (Document Object Model or DOM)
• JavaScript data requests
• Node.js
• ES Modules
• Creating a web application using Vite

This book is an ideal foundation for D3 Start to Finish.