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