21AI602 - DATA VISUALIZATION

UNIT 5 – INTERACTIVE DATA VISUALIZATION

LP19: Scales – Axes – Updates, Transition and Motion

1. Scales:
 Scales are functions that map from an input domain to an output range.
 D3 scales are functions with parameters that you define. Once they are created, you call
the scale function and pass it a data value, and it nicely returns a scaled output value.
 You can define and use as many scales as you like.

i. Apples and Pixels:

o Imagine that the following dataset represents the number of apples sold at a roadside
fruit stand each month:
var dataset = [ 100, 200, 300, 400, 500 ];

ii. Domains and Ranges:

o A scale’s input domain is the range of possible input data values. Given the
preceding apple data, appropriate input domains would be either 100 and 500 (the
minimum and maximum values of the dataset) or 0 and 500.
o A scale’s output range is the range of possible output values, commonly used as
display values in pixel units.
o The output range is completely up to you, as the information designer.

Fig 1.1 An input domain and an output range, visualized as parallel axes

iii. Normalization:
o Normalization is the process of mapping a numeric value to a new value between 0
and 1, based on the possible minimum and maximum values.
o For example, with 365 days in the year, day number 310 maps to about 0.85, or 85%
of the way through the year.
 iv. Creating a Scale:
o D3’s linear scale function generator is accessed with d3.scaleLinear().
o I recommend opening the sample code page 01_scale_test.html and typing each of
the following into the console:
var scale = d3.scaleLinear();
o Congratulations! Now scale is a function to which you can pass input values. (Don’t
be misled by the var.
o Remember that in JavaScript, variables can store functions.)
scale(2.5); //Returns 2.5

v. Scaling the Scatterplot:

o To revisit our dataset from the scatterplot:
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88]
];

Fig. 1.2 Scatterplot using x and y scales

vi. Refining the Plot:
o You might have noticed that smaller y values are at the top of the plot, and the larger
y values are toward the bottom.
o Now that we’re using D3 scales, it’s super easy to reverse that, so greater values are
higher up, as you would expect.
o It’s just a matter of changing the output range of yScale from:
.range([0, h]);
to:
.range([h, 0]);

Fig 1.3 Scatterplot with y scale inverted

2. Axes:
o D3’s axes are actually functions whose parameters you define.
o Unlike scales, when an axis function is called, it doesn’t return a value, but generates
the visual elements of the axis, including lines, labels, and ticks.

i. Setting Up an Axis:
o There are four different axis function constructors, each one corresponding to a
different orientation and placement of labels: d3.axisTop, d3.axisBottom,
d3.axisLeft, and d3.axisRight.
o For vertical axes, use d3.axisLeft or d3.axisRight, with ticks and labels appearing to
the left and right, respectively.
o For horizontal axes, use d3.axisTop or d3.axisBottom, with ticks and label appearing
above and below, respectively.
ii. Positioning Axes:
o By default, an axis is positioned using the range values of the specified scale.
o In our case, xAxis is referencing xScale, which has a range of [20, 460], because we
applied 20 pixels of padding on all edges of the SVG.
o So the left edge of our axis appears at an x of 20, and the right edge at an x of 460.

iii. Check for Ticks:

o Some ticks spread disease, but D3’s ticks communicate information. Yet more ticks
are not necessarily better, and at a certain point, they begin to clutter your chart.
o You’ll notice that we never specified how many ticks to include on the axis, nor at
what intervals they should appear.
o Without clear instruction, D3 has automagically examined our scale xScale and
made informed judgments about how many ticks to include, and at what intervals
(every 50, in this case).

Fig 2.1 Fewer ticks

iv. Time-Based Axes:

Fig 2.2 Easy time-based axis

3. Updates, Transition and Motion:
 In D3 terms, those changes are handled by updates.
 The visual adjustments are made pretty with transitions, which can employ motion for
perceptual benefit.

i. Modernizing the Bar Chart:

Fig 3.1 A scalable, flexible bar chart

ii. Updating Data:
 The basic approach in this scenario is this:
1. Modify the values in your dataset.
2. Rebind the new values to the existing elements (thereby overwriting the original
values).
3. Set new attribute values as needed to update the visual display.

Fig 3.2 Bar chart, data updated

iii. Transitions:
o Life transitions can be scary: the first day of school, moving to a new city, quitting
your day job to do freelance data visualization full-time.
o But D3 transitions are fun, beautiful, and not at all emotionally taxing.
o Making a nice, super smooth, animated transition is as simple as adding one line of
code:
.transition()
 o The duration() must be specified after the transition(), and durations are always
specified in milliseconds, so duration(1000) is a one-second duration.
o Here is that line in context:
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition()
.duration(1000) // <-- Now this is new!
.attr("y", function(d) {
return h - yScale(d);
})
.attr("height", function(d) {
return yScale(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + Math.round(d * 10) + ")";
});

iv. Motion:
o Adding Values (and Elements)
o Select
o Enter
o Update
o Removing Values (and Elements)
o Exit
o Make a smooth exit
o Data Joins with Keys
o Preparing the data
o Updating all references
o Key functions
o Exit transition
 21AI602 - DATA VISUALIZATION

UNIT 5 – INTERACTIVE DATA VISUALIZATION

LP20: Interactivity – Layouts – Geomapping – Exporting

1. Interactivity:
i. Binding Event Listeners:
o JavaScript uses an event model in which “events” are triggered by things happening,
such as new input from the user, provided via a keyboard, mouse, or touch screen.
o Most of the time, events are being triggered constantly, left and right — it’s just that
nobody is listening for them, so they are ignored.
o To make our pieces interactive, we define chunks of code that listen for specific
events being triggered on specific DOM elements.
o We used the following code:
d3.select("p")
.on("click", function() {
//Do something on click
});
o This binds an event listener to the p paragraph element.
o The listener happens to be listening for the click event, which is the JavaScript event
triggered when the user clicks the mouse on that p element.

ii. Introducing Behaviors:

o Bind event listeners right at the moment when you first create elements. For
example, here is our existing code that creates our bar chart’s rects, to which I’ve
simply tacked on on():
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
… //Set attributes (omitted here)
.on("click", function(d) {
//This will run whenever *any* bar is clicked
});
o When defining the anonymous function, you can reference d, or d and i, or neither,
just as you’ve seen throughout D3.
2. Layouts:
 Contrary to what the name implies, D3 layouts do not, in fact, lay anything out for you
on the screen.
 The layout methods have no direct visual output. Rather, D3 layouts take data that you
provide and remap or otherwise transform it, thereby generating new data that is more
convenient for a specific visual task.
 It’s still up to you to take that new data and generate visuals from it.
 The list of D3 layouts includes:
 Chord

Fig 2.1 Chord layout

 Cluster

Fig 2.2 Cluster Layout

 Force:
o Force-directed layouts are so called because they use simulations of physical
forces to arrange elements on the screen.
o Arguably, they may be overused, yet they can be genuinely useful for certain
use cases, they demo well, and they just look so darn cool.

Fig 2.3 A simple force layout

 Pack & Partition:

Fig 2.4 Partition Layout

 Pie
o d3.pie() might not be as delicious as it sounds, but it’s still worthy of your
attention.
o It is typically used to create a doughnut or pie chart.

Fig 2.5. A simple pie chart

 Stack
o d3.stack() converts two-dimensional data into “stacked” data; it calculates a
baseline value for each datum, so you can “stack” layers of data on top of
one another.
 o This can be used to generate stacked bar charts, stacked area charts, and even
streamgraphs

Fig. 2.6 A simple stacked bar chart (blue = apples, orange = oranges,
green = grapes)

 Tree & Treemap:

Fig 2.8 Tree Map Layout

3. Geo Mapping:
i. JSON, Meet GeoJSON:
o GeoJSON, the JSON-based standard for encoding geodata for web applications.
o GeoJSON actually is not a totally different format, but just a very specific use of
JSON.
o Before you can generate a geographic map, you need to acquire the path data (the
outlines) for the shapes you want to display.

ii. Paths:
o We define our first geographic path generator:
//Define path generator, using the Albers USA projection
var path = d3.geoPath()
.projection(d3.geoAlbersUsa());
o d3.geoPath() is a total lifesaver of a function.
o It does all the dirty work of translating that mess of GeoJSON coordinates into even
messier messes of SVG path codes.

Fig 3.1 Our first view of GeoJSON data

iii. Projections:
o A projection is an algorithm of compromise; it is the method by which 3D space is
“projected” onto a 2D plane.
o We define D3 projections using a familiar structure:
var projection = d3.geoAlbersUsa()
.translate([w/2, h/2]);
o D3 has several built-in projections.
 Fig 3.2 The same GeoJSON data, but now with a centered projection

iv. Choropleth:
o This word, which can be difficult to pronounce, refers to a geomap with areas filled
in with different values (light or dark) or colors to reflect associated data values.
o In the United States, so-called “red state, blue state” choropleth maps showing the
Republican and Democratic leanings of each state are ubiquitous, especially around
election time.
o But choropleths can be generated from any values, not just political ones.

Fig 3.3 A choropleth map showing agricultural productivity by state

v. Panning:
o Our maps so far have been static. If you want users to be able to move around your
maps, you’ll need to implement panning.
o The main steps in panning are:
 Get the current translation offset value
 Decide which direction you want to move
 Decide how far you want to move
 Augment the offset value by that amount
 Update the projection with the new offset value
 Reproject all elements on the map (e.g., paths and circles)
 Fig 3.4 Pan example
vi. Zooming:
o While panning is essentially just a matter of shifting x/y coordinates, zooming is a
bit more complicated.
o Fortunately, D3 has d3.zoom, a behavior parallel to d3.drag, but d3.zoom also tracks
scroll wheel movement (and trackpad gestural equivalents) and double-clicks,
commonly used to trigger zooming in.
o d3.zoom translates those inputs to trigger three different events: start, zoom, and
end.

Fig 3.5 Map, now with zoom-ier buttons

v. Acquiring and Preparing Raw Geodata:

o The essential steps for acquiring and preparing geodata for use with D3 are:
1. Find shapefiles
2. Choose a resolution
3. Simplify the shapes
4. Convert to GeoJSON
5. Choose a projection
4. Exporting:
 Three easy ways to get D3 visualizations out of D3 and into formats suitable for other,
noninteractive media.
 D3 has no explicit “export” function built in (although some people have built their
own),
i. Bitmaps:
o The easiest and lowest-quality option is, obviously, to take a screenshot.
o Depending on your operating system, you can do this using the Print Screen button
on a PC, or ⌘-Shift-4 on the Mac.

Fig 4.1 Bitmap screenshot I made using ⌘-Shift-4

ii. PDF:
o Portable Document Format documents can contain vector-based artwork, such as
SVG images, so exporting to PDF gives you a quick, scalable copy of your
visualization.
 Fig 4.2 A PDF maintains the original vector data for clarity

iii. SVG:
o Finally, you probably realized that, since we are using D3 to generate images in
SVG format, we could just save out a copy of the SVG image directly.
o This has all the benefits of PDF: you maintain the original vector data, it’s scalable,
and you can even bring the results into Illustrator, Inkscape, Sketch, or another
SVG-compatible editor and tweak it after the fact.

Figure 15-3. Copying the D3-generated SVG code from the DOM
 21AI602 - DATA VISUALIZATION

UNIT 5 – INTERACTIVE DATA VISUALIZATION

LP18: Technology Fundamentals – Setting up D3 – Drawing with

Data
1. Technology Fundamentals:
i. The Web:
o Clients contact servers with requests, and servers respond with data.
o But what is a server and what is a client? Web servers are internet-connected
computers running server software, so called because they serve web documents as
requested.
o Servers are typically always on and always connected, but web developers often
also run local servers, meaning they run on the same computer that you’re working
on.
o Local means here; remote means somewhere else, on any computer but the one right
in front of you.
o There are lots of different server software packages, but Apache is the most
common.
Complete URLs consist of four parts:
 An indication of the communication protocol, such as HTTP or HTTPS
 The domain name of the resource, such as calmingmanatee.com
 The port number, indicating over which port the connection to the server
should be attempted
 Any additional locating information, such as the path of the requested file, or
any query parameters
Let’s briefly step through the process of what happens when a person goes to visit a
website.
1. User runs the web browser of her choice, then types a URLinto the address bar, such as
alignedleft.com/tutorials/d3/. Because she did not specify a protocol, HTTP is assumed, and
“http://” is prepended to the URL.
2. The browser then attempts to connect to the server behind alignedleft.com across the
network, via port 80, the default port for HTTP.
3. The server associated with alignedleft.com acknowledges the connection and is taking
requests. (“I’ll be here all night.”)
4. The browser sends a request for the page that lives at /tutorials/d3/.
5. The server sends back the HTMLcontent for that page.
6. As the client browser receives the HTML, it discovers references to other files needed to
assemble and display the entire page, including CSS stylesheets and image files. So it
contacts the same server again, once per file, requesting the additional information.
7. The server responds, dispatching each file as needed.
8. Finally, all the web documents have been transferred over. Now the client performs its
most arduous task, which is to render the content. It first parses through the HTMLto
understand the structure of the content. Then it reviews the CSS selectors, applying any
properties to matched elements. Finally, it plugs in any image files and executes any
JavaScript code.

ii. HTML:
o Hypertext Markup Language is used to structure content for web browsers.
o HTMLis stored in plain text files with the .html suffix.
o A simple HTMLdocument looks like this:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Page Title</h1>
<p>This is a really interesting paragraph.</p>
</body>
</html>

iii. DOM:
o The term Document Object Model refers to the hierarchical structure of HTML.
o Each pair of bracketed tags (or, in some cases, a single tag) is an element, and we
refer to elements’ relationships to each other in human terms: parent, child, sibling,
ancestor, and descendant.
 Fig 1.1 Chrome’s web inspector
iv. CSS:
o Cascading Style Sheets are used to style the visual presentation of DOM elements.
CSS looks like the following:
body
{
background-color: white;
color: black;
}
o CSS styles consist of selectors and properties. Selectors are followed by properties,
grouped in curly brackets.
o A property and its value are separated by a colon, and the line is terminated with a
semicolon, like the following:
selector {
property: value;
property: value;
property: value;
}
o You can apply the same properties to multiple selectors at once by separating the
selectors with a comma, as in the following:
selectorA,
selectorB,
selectorC {
property: value;
 property: value;
property: value;
}
o For example, you might want to specify that both p paragraphs and li list items
should use the same font size, line height, and color.
p,
li {
font-size: 12px;
line-height: 14px;
color: orange;
}

v. Java Script:
o JavaScript is the scripting language that can make pages dynamic by manipulating
the DOM after a page has already loaded in the browser.

Fig 1.2 A fresh JavaScript console…delicious!

vi. SVG:
o D3 is most useful when used to generate and manipulate visuals as Scalable Vector
Graphics (SVG).
o Drawing with divs and other native HTML elements is possible, but a bit clunky and
subject to the usual inconsistencies across different browsers.
o Using SVG is more reliable, visually consistent, and faster.

Fig 1.3 A small SVG circle with a stroke applied

<svg width="50" height="50">

<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>
 Fig 1.4 RGBA SVG Shapes

2. Setting up D3:
o A simple matter of downloading the latest version, creating an empty page in which to
write your code, and, finally, setting up a local web server.

1. Downloading D3:
 Start by creating a new folder for your project. Call it whatever you like, but
maybe something like project-folder.
 Then place the latest version of D3 into that folder. Go to https://d3js.org, click
the link to download the latest version of D3 as a ZIP file, and then decompress
the ZIP file.
 As of this writing, the current version of D3 is 4.5.0. Move the file d3.js into
your new project folder.
 In that folder, you’ll also see d3.min.js, a “minified” version from which
whitespace has been removed for smaller file sizes and faster load times.

2. Referencing D3:
 Now create a simple HTML page within your project folder named
index.html.
 Your folder structure should now look something like this:
project-folder/
d3.js
d3.min.js (optional)
index.html
 Paste the following into your new HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3.js"></script>
</head>
<body>
<script type="text/javascript">
// Your beautiful D3 code will go here
</script>
</body>
</html>
 3. Setting Up a Web Server:
o In some cases, you can view local HTML files directly in your web browser.
o However, some browsers have restrictions that prevent them from loading local
files via JavaScript, for security reasons.

3. Drawing with Data:

1. Drawing divs:
o HTML div is the easiest way to draw a rectangle.
o Formally, a chart with vertically oriented rectangles is a column chart, and one
with horizontal rectangles is a bar chart.
o This div could work well as a data bar, shown in Figure 3.1.

Fig 3.1 A humble div

<div style="display: inline-block;
width: 20px;
height: 75px;
background-color: teal;"></div>
2. The Power of data():
o This is exciting, but real-world data is never this clean:
var dataset = [ 5, 10, 15, 20, 25 ];
o Let’s make our data a bit messier, as in 04_power_of_data.html:
var dataset = [ 25, 7, 5, 26, 11 ];
o That change in data results in the bars shown in Figure 3.2. We’re not limited to five
data points, of course.
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];

Fig 3.2 New data values

3. Drawing SVGs:
o One thing you might notice about SVG elements is that all of their properties are
specified as attributes.
o That is, they are included as property/value pairs within each element tag, like
this:
<element property="value"></element>
4. Making a Bar Chart:
o See the div chart, updated with some new data, in
12_making_a_bar_chart_divs.html:
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
o It might be hard to imagine, but we can definitely improve on the simple bar
chart in Figure 3.3 made of divs.

Fig 3.3 Bar chart with divs

5. Making a Scatterplot:
o The scatterplot is a common type of visualization that represents two sets of
corresponding values on two different axes: horizontal and vertical, x and y.
o Let’s carry over most of the code from our bar chart experiments, including the
piece that creates the SVG element:
 //Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
o Instead of creating rects, however, we’ll make a circle for each data point:
svg.selectAll("circle") // <-- No longer "rect"
.data(dataset)
.enter()
.append("circle") // <-- No longer "rect"
o Also, instead of specifying the rect attributes of x, y, width, and height, our
circles need cx, cy, and r:
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", 5);

Fig 3.4 Simple Scatter Plot