Fundamentals of HTML, SVG, CSS and

JavaScript for Data Visualisation

Peter Cook
This book is for sale at http://leanpub.com/html-svg-css-js-for-data-visualisation

This version was published on 2023-10-23

This is a Leanpub book. Leanpub empowers authors and publishers with the Lean
Publishing process. Lean Publishing is the act of publishing an in-progress ebook using
lightweight tools and many iterations to get reader feedback, pivot until you have the
right book and build traction once you do.

© 2022 - 2023 Peter Cook

Also By Peter Cook
D3 Start to Finish
Contents

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1 Setting up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 CodePen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Stay in touch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Translators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

2. Web languages: HTML, SVG, CSS & JavaScript . . . . . . . . . . . . . . . . . 3

3. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.1 Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.2 Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
3.3 Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.4 <div> element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.5 Dropdown menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.6 <svg> element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.7 Wrapping up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
3.8 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

4. SVG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.1 Adding SVG to a web page . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.2 SVG elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.3 SVG Transforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.4 Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

5. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.1 The Structure of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.2 CSS Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.3 CSS Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.4 More CSS selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.5 CSS for HTML layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.6 Media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
CONTENTS

6. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6.1 JavaScript variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6.2 JavaScript data types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6.3 JavaScript arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
6.4 JavaScript objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
6.5 JavaScript operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
6.6 JavaScript conditionals . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.7 JavaScript functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.8 JavaScript iteration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
6.9 JavaScript functions (advanced) . . . . . . . . . . . . . . . . . . . . . . . 21
6.10 JavaScript advanced concepts . . . . . . . . . . . . . . . . . . . . . . . . . 22

7. JavaScript and the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

7.1 Document Object Model (DOM) manipulation . . . . . . . . . . . . . . . 23
7.2 User interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
7.3 Data requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

8. Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
8.1 Installing Node.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
8.2 Writing a program . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
8.3 Node packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

9. JavaScript modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
9.1 CommonJS (Node.js) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
9.2 ES Modules (the new standard) . . . . . . . . . . . . . . . . . . . . . . . . 25

10. Tools and Set-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

10.1 Web development tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
10.2 Example set-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
1. Introduction
Welcome! This book covers the fundamentals of HTML, SVG, CSS and JavaScript for data
visualisation.
If you work with data you might spend most of your time using Excel, R or Python.
You might be tasked with creating charts in a Python Jupyter notebook or creating a
dashboard using R’s Shiny or Python’s Dash. Often these charts are built with HTML,
SVG, CSS and JavaScript and a good understanding of these languages is useful when
you need to dive deeper.
You might be interested in learning D3 or other JavaScript charting libraries, in which
case this book can help you get up to speed with HTML, SVG, CSS and JavaScript.
This book doesn’t assume prior knowledge of these languages, but it’s helpful if you’ve
some coding experience. Being familiar with a text editor (or IDE) is also 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.
If you’d like to understand my other data visualisation books and courses (such as D3
Start to Finish and Visualising Data with JavaScript) you definitely need to understand
the content in this book.

1.1 Setting up

In order to get started quickly I recommend using CodePen1 to look at and experiment
with code examples (see next section). At the end of this book, in the ‘Tools and Set-up’
chapter I show you how to set up tools so that you can write code locally (where the files
are stored on your computer instead of on CodePen). This takes a bit of time to set up
but I recommend this approach if you become more serious about web development.

1.2 CodePen

CodePen2 is a web site that lets you experiment with HTML, SVG, CSS and JavaScript
without having to set up any tools.
NOTES 2

This is CodePen. You can visit this example at https://codepen.io/createwithdata/pen/VwvpzOg

At key points in the book there’ll be a link to a CodePen ‘pen’ that contains a code example.
If you visit the link you’ll be able to view and experiment with the code. I encourage you
to play around with the CodePen examples - there’s very little you can break and learning
through experimentation is very effective.
You can freely edit the CodePen examples from this book and your changes don’t affect
the original example. If you want to keep your changes, click Fork (at the bottom of the
page) and create a CodePen account (or log in). Save your work by clicking the Save
button at the top of the page.

1.3 Stay in touch

I love to stay in touch with my readers. One of the best ways to do this is via my mailing
list. I send occasional messages containing useful information related to implementing
data visualisations (e.g. using JavaScript or other tools). There’ll also be discount codes
for my other books. You can sign up here3 .

1.4 Translators
If you’re interested in translating Fundamentals of HTML, SVG, CSS and JavaScript for
Data Visualisation to another language contact me at [email protected] and I’ll
be happy to discuss further.

Notes

1 https://codepen.io/

2 https://codepen.io/

3 https://www.createwithdata.com/
2. Web languages: HTML, SVG, CSS
& JavaScript
Most websites and web applications (including data visualisations) are built from 4
languages: HTML, SVG, CSS and JavaScript.
HTML stands for Hyper Text Markup Language and describes the content of a webpage.
SVG stands for Scalable Vector Graphics and describes shapes such as circles, lines and
rectangles. It’s often used when visualising data (to describe bars, lines, circles, axes,
legends etc.).
CSS stands for Cascading Style Sheets and describes the style (such as font weight, colour
or size) and position of HTML and SVG elements.
JavaScript is a programming language that can manipulate HTML and SVG, do general
computation (such as data manipulation) and handle interaction.
We look at each of these in the upcoming chapters.
3. HTML
HTML is a language that describes the content of a webpage using elements that define
headings, paragraphs, images, links etc. For example a paragraph element looks like:

<p>This is a paragraph of text.</p>

The paragraph element consists of an opening tag <p>, some content and a closing tag
</p>. Tags usually come in pairs. An opening tag looks like <p> and a closing tag looks
like </p>.
When a web browser loads an HTML document it draws each element according to the
type of element (paragraph, heading, image etc.). For example, the paragraph element
looks like this when rendered in a web browser:

A paragraph <p> element as rendered in a web browser

There’s a large number of HTML elements but you can achieve a lot with just a few of
them. This chapter looks at five common elements: headings, lists, images, div elements
and svg elements. (These five elements are usually sufficient when visualising data.)

3.1 Headings
Heading elements are used for titles. There are six levels ranging from large (<h1>) to
small (<h6>).

<h1>Main heading</h1>
<h2>Sub heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<h5>Level 5 heading</h5>
<h6>Level 6 heading</h6>

These elements look like this when rendered in a web browser:

HTML 5

Heading elements <h1> to <h6> rendered in a web browser

The web browser determines how each of these elements is styled. For example
the <h1> is the largest and all the headings are rendered with bold text. You
can set the style yourself using CSS.

3.2 Lists
The list element <ul> represents lists of items. Each item is represented by a list item
element <li> and nested within the <ul> element:

<ul>
<li>List item one</li>
<li>List item two</li>
</ul>

Notice that we’ve indented the <li> elements. This is optional but is the usual way to
indicate nested elements. When displayed in a browser the list looks like:

List elements <ul> and <li> rendered in a web browser

By default list items are bulleted and displayed as a vertical list. However
you can change how a list looks using CSS. Often navigation menus are
represented using a list and CSS used to hide the bullet points and position
the items as desired.
HTML 6

3.3 Images
Images can be added to an HTML document using the <img> element. <img> elements
require an attribute named src that specifies the URL of the image.

Attributes can be added to the opening tag of any HTML element and
they specify additional information about the element. They take the form
name="value" where the value is always in quotes.

Image elements don’t have a closing tag. Here’s an image element that displays an image
located at https://picsum.photos/id/127/300/200.jpg:

<img src="https://picsum.photos/id/127/300/200.jpg">

This example looks like:

Image element <img> rendered in a web browser

Typically your image files will live alongside your source code. For example, you might
have an image file my-image.jpg within a directory named images. In this case you’d
write:

<img src="images/my-image.jpg">

By default images are displayed at their original size. You can set the display width
(or height) of an image using the width (or height) attribute. Let’s set the width of the
previous image to 200 pixels:

<img width="200px" src="images/my-image.jpg">

We’ll cover measurement units (such as px) in the CSS chapter.

HTML 7

3.4 <div> element

The <div> element is a general purpose element that is often used for grouping and
organising content. It’s also a good fallback element when none of the other elements
are suitable. Here’s an example where <div> elements are used to structure a web page:

<div>
<h1>Main title</h1>
<h2>Secondary title</h2>
</div>
<div>
<h3>Article title</h3>
<div>
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
</div>

Notice how the elements have been indented. This is optional and doesn’t affect how the
elements appear in the browser but it’s useful when reading and working with the code.
The above example looks like the following when rendered in a web browser:

The general purpose <div> element rendered in a web browser

See if you can relate each HTML element to each line of output.

By default the <div> elements don’t affect how the HTML is rendered. In other
words, the above HTML will look the same with or without the <div> elements.
However you can add CSS to style the <div> elements. For example you could
add margins to each <div> to add more space between the headings.
HTML 8

3.5 Dropdown menus

You can add a dropdown menu to an HTML document using the <select> element. This
is useful for implementing a UI control that lets the user choose between a number of
options (for example a filter menu). Each option in the menu is defined using an <option>
element. You can also add a label to the dropdown using the <label> element:

<label>Choose your fruit:</label>

<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>

HTML select element

An onchange attribute is usually added to the <select> element which specifies a

JavaScript function that’s called when the user changes the selected value (see the
JavaScript and the DOM chapter). Each <option> element has a value attribute which
defines the value assigned to the <select> element whenever the user chooses a new
value.

3.6 <svg> element

The <svg> element is used when you want to include SVG in your page. SVG stands for
Scalable Vector Graphics and is a language for describing shapes such as lines, circles
and rectangles (see the SVG chapter). The <svg> element acts as a container for your SVG
shapes. For example, to add a circle to your web page you can use:

<svg width="800" height="600">

<circle r="100"></circle>
</svg>

Inside the <svg> element are two attributes: width and height. These are similar to the
width and height attributes in <img> elements.
HTML 9

It’s quite important to specify the SVG element’s size (using width and height attributes)
because its default size is quite small and shapes are cropped to the SVG’s boundary.
SVG will be covered in greater depth in the SVG chapter.

3.7 Wrapping up
There are many other HTML elements but when visualising data the ones covered in this
section are the most common.
You can see a comprehensive list of HTML elements at https://developer.mozilla.org/en-
US/docs/Web/HTML/Element4 .

Most of the examples in this book are presented using CodePen which makes it
very easy to get started. However it doesn’t reveal the whole story. Web pages
are typically made up of individual HTML, CSS and JavaScript documents.
HTML documents typically contain extra information that CodePen doesn’t
show. We’ll look at this in more detail in the ‘Tools and set-up’ chapter.

3.8 Exercises
Here’s some HTML that includes most of the elements covered in this chapter:

<div>
<h1>Main header</h1>
<h2>Sub header</h2>
</div>
<div>
<h4>Article title</h4>
<div>
<p>First paragraph</p>
<img src="https://picsum.photos/id/127/300/200.jpg">
<p>Second paragraph</p>
<ul>
<li>List item one</li>
<li>List item two</li>
</ul>
<p>Third paragraph</p>
</div>
</div>
HTML 10

You can open this example on CodePen at https://codepen.io/createwithdata/pen/ExQGeeY5 .

Try the following:

1. Change the text inside the headings.

2. Change the <h4> & </h4> tags to <h4> and </h4>.
3. Add a new paragraph containing some text.
4. Change the image URL to https://picsum.photos/id/104/384/216
5. Change the image’s width to 150 pixels.
6. Add another list item.
4. SVG
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.1 Adding SVG to a web page

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.2 SVG elements

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.2.1 Line
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.2.2 Rectangle
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.2.3 Circle
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.2.4 Text
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
SVG 12

4.2.5 Group
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.2.6 Path
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.2.7 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.3 SVG Transforms

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.3.1 Translate
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.3.2 Rotate
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.3.3 Combining transforms

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

4.4 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
5. CSS
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.1 The Structure of CSS

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.2 CSS Units

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.2.1 Size units

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.2.2 Colour units

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.3 CSS Properties

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.3.1 CSS properties for HTML

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
CSS 14

5.3.2 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.3.3 CSS properties for SVG

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.3.4 Exercise
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.3.5 Overriding rules

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.3.6 Example
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.4 More CSS selectors

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.4.1 Classes and ids

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.4.1.1 id

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
CSS 15

5.4.1.2 class

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.4.2 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.4.3 Descendant selectors

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.4.4 Pseudo classes

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.4.5 Grouped selectors

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.5 CSS for HTML layout

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.5.1 Block and inline elements

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

5.5.2 Flexbox
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
CSS 16

5.6 Media queries

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
6. JavaScript
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.1 JavaScript variables

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.1.0.1 Exercises

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.2 JavaScript data types

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.2.1 Strings

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.2.1.1 String manipulation

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.2.1.2 String conversion

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
JavaScript 18

6.2.1.3 Exercises

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.2.2 Numbers
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.2.2.1 Exercises

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.2.3 Booleans
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.3 JavaScript arrays

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.3.1 Accessing array elements

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.3.2 Array operations

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.3.2.1 Take care when sorting

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
JavaScript 19

6.3.3 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.4 JavaScript objects

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.4.1 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.5 JavaScript operators

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.5.1 Ternary operator

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.5.2 Increment and decrement

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.5.3 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.5.3.1 Answers

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
JavaScript 20

6.6 JavaScript conditionals

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.6.1 if
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.6.2 switch
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.7 JavaScript functions

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.7.1 Defining functions

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.7.2 Return value

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.7.3 Function arguments and parameters

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.7.4 Exercise
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
JavaScript 21

6.8 JavaScript iteration

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.8.1 for loops

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.8.2 forEach
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.8.3 map
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.8.4 filter
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.8.5 Exercises
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.8.5.1 Answers

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.9 JavaScript functions (advanced)

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
JavaScript 22

6.9.1 Named functions and anonymous functions

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.9.2 Arrow function expressions

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.9.3 Pure functions

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.9.4 Functions are objects

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.9.4.1 Passing functions into functions

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.10 JavaScript advanced concepts

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

6.10.1 Promises

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
7. JavaScript and the Browser
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

7.1 Document Object Model (DOM) manipulation

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

7.2 User interaction

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

7.3 Data requests

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
8. Node.js
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

8.1 Installing Node.js

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

8.2 Writing a program

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

8.3 Node packages

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
9. JavaScript modules
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

9.1 CommonJS (Node.js)

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

9.2 ES Modules (the new standard)

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
10. Tools and Set-up
This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.1 Web development tools

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.1.1 Code editor

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.1.2 Web browser

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.1.3 Web server

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.1.3.1 Brackets web server

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.1.3.2 VS Code Live Server

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
Tools and Set-up 27

10.1.3.3 Python, Ruby, PHP, Node

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2 Example set-up

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.1 Create a project directory

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.2 Install a code editor

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.3 Create a minimal HTML file

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.4 Install Live Server extension

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.5 Start Server

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.6 Add CSS and JavaScript files

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.
NOTES 28

10.2.6.1 Add a CSS file

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.6.2 Add a JavaScript file

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

10.2.7 Summary

This content is not available in the sample book. The book can be purchased on Leanpub
at http://leanpub.com/html-svg-css-js-for-data-visualisation.

Notes

4 https://developer.mozilla.org/en-US/docs/Web/HTML/Element

5 https://codepen.io/createwithdata/pen/ExQGeeY