2 Web tech
Read IDVW2, Chapter 3: Technology Fundamentals
Here we examine
shapes.html from Chapter 1 to see how the various technologies are combined into a single document.
shapes.html has an HyperText Markup Language or
.html extension; HTML in fact provides the structure for the document. It has a
<head> section we use
<script> tags to link to the D3 library:
HTML content is enclosed between opening an closing tags such as
HTML class and ID attributes are included inside the opening tags:
<h1 class="myclass" id="myid">This is an h1 header.</h1>
CSS (Cascading Style Sheets) is used for styling web pages, and more importantly for our purposes, selecting elements on a page or in a graphic. We will generally work with internal style sheets since it’s simpler when starting out to have everything in one document. External style sheets, however, are generally the preferred method for web design.
2.2.1 Internal style sheet
shapes.html has an internal style sheet: CSS style information appears in the
<head> section marked off with
Here we specify that all HTML
<h1> headers should be red and all HTML paragraphs
<p> should be blue. This is an example of an internal style sheet. Later we will consider alternatives: external style sheets and inline styling.
Styling for coder designed classes is also specified in this section. For example, we could style a “formal” class as such:
Note that classes are defined by the “.” before the name.
2.2.2 External style sheets
External style sheets are
.css files that contain styling information and are linked to with a
<link> tag in the
<head> section of an HTML document:
External style sheets are the preferred way of styling as they can easily be modified without changing the web page; in fact, the motivation for CSS came from a desire in the early days of the internet to separate styling from content.
Developers have the option now of choosing premade themes, which are shared through external style sheets. They can be quite complex. The
.css file for the Minty theme from Bootswatch, for example, contains over 10,000 lines.
CSS Zen Garden demonstrates the power of external style sheets: the same HTML document takes on very different looks depending on the stylesheet to which it is linked.
2.2.3 Inline styling
With inline styling, styling is added to each tag individually:
<span style="color: white; background-color: fuchsia; font-family: impact; font-size: 24px; border-style: solid; border-color: limegreen; border-width: 3px"> Styled inline </span>
This is how early web pages were styled. To take a step back in time, use developer tools to view the source code for the main page of www.dolekemp96.org, an old web site that has been maintained for historical purposes. As you can see, it’s a tedious way of writing content, which internal and external style sheets eliminate.
Although you will not be adding inline styling manually, you will notice that when we select elements and change the styling with D3, the modifications are made inline. In other words, we do not make changes to the elements directly, not via a style sheet.
SVG (Scalable Vector Graphics) is a human readable graphics format that facilitates manipulation of individual elements. You may be familiar with
.svg files. Here we have SVG graphics within
<svg> tags in the
<body> section of the HTML document:
<svg width="500" height="300"> <!-- some SVG --> <rect x="20" y="20" width="460" height="260" fill="lightblue"></rect> <circle cx="50" cy="75" r="20" fill="blue"></circle> <ellipse cx="175" cy="100" rx="45" ry="30" fill="green"></ellipse> <text x="150" y="200">(150, 200)</text> <line x1="250" y1="150" x2="300" y2="200" stroke="red" stroke-width="5"></line> </svg>
There are very few SVG tags that you’ll need to know, and once we get going with D3, you will not have to code any SVG manually. It is worth doing a little to become familiar with the format and in particular to get used to the new location of the origin.
<script> tags in the
<body> section of the HTML document, or in a separate
var x = [3, 5, 1, 6, 7]
In the Just Enough JS chapter, we cover more complex data structures and some methods for data manipulation.
<script> tags in the
<body> section. For D3 to work, you must link to the D3 library in the
<head> section of the document.
There seems to be a misconception that D3 is a high level language. It is not. You will be working on the pixel level to create graphics, including drawing your own axes and doing other things that you’re not used to doing if you’ve been working in R or Python.
On the bright side, after D3, you will gain a new appreciation for base R graphics. You will write code such as
plot(iris$Sepal.Length, iris$Sepal.Width, pch = 16, col = iris$Species, las = 1, xlab = "Sepal.Length", ylab = "Sepal.Width")and think: wow, there are axes! Amazing!
2.6 HTML tree
An HTML document is composed of lines or sections set off with tags. In particular
<style> ... </style>,
<svg> ... </svg>, and
For D3 to work, you must link to a D3 library. To link to the online version, copy and paste the
<script>line from https://d3js.org. Alternatively, you can also download a copy from the same site and reference your local copy with:
There are two main sections. The
<head>section contains the title, link to D3 library, and internal CSS. The
<body>section contains HTML elements (
<p>, etc.), SVGs (between
Do not assume that if it works that it is correct; today’s browsers can be very forgiving.
Comment syntax varies with language:
<!-- single or multiline HTML or SVG comment -->
/* single or multiline CSS comment */
multiline comment */
2.7 Exercise : shapes
Download a copy of
shapes.html by opening this page and clicking File, Save Page As… Set yourself up to work locally in a text editor help. (Developer Tools should not be open; we will not be using the Console.)
Add an additional circle to the svg.
Add styling to the internal style sheet to style circles.
Add two additional paragraphs using the
Add an ID attribute to one of the circles.
Add a class attribute to two of the
Use the internal style sheet to style paragraphs of the class you created in 5.
Adjust additional elements as desired.
Solution Contributed by Tracy Liu