Word Clouds

Word Cloud

 a.k.a text cloud: an image made of words that together resemble a

cloudy shape.
 Is a visual representation of a text, particularly the word frequency in
text
 A collection, or cluster, of words depicted in different sizes

Wiki
Word Cloud

 Word clouds are great for visualizing unstructured text data and
getting insights on trends and patterns.
 The bigger and bolder the word appears, the more often it’s mentioned
within a given text and the more important it is.
 Words are usually single words, and the importance of each is
shown with font size or color.
Word Cloud Use

 Often it is used to summarize political speech.

 In Business:
 Summarizing response in a large group
 Summarizing purchase habit of a group
 In language learning:
 Which words did you struggle to pronounce, spell, or wrap your head
around?
Simple Word Cloud

https://pypi.org/project/wordcloud/
Word Cloud using a Mask

https://pypi.org/project/wordcloud/
Word Cloud: Pros and Cons

 Pros:
 Wordclouds are aesthetically pleasing, and people are used to it.
 So helps readers understand them quickly.
 Cons:
 longer words will take more space on the figure by construction which
distorts reality.
 It is impossible to translate a font size to an accurate value.
Data Visualization
INTERACTION
Interactive Data Visualization

 Visualization that enables users to directly manipulate and explore

graphical representations of data.
 Why?
 Scale: Too many data points. Too many dimensions.
 Interaction adds mechanism to
 Explore the data
 Better understand
Goal of Interaction

 Interaction allows: to see more detail, create new insights, and

capture the full value of the data.
 Zoom: see a smaller subset of the data
 Filter: see a subset based on values, etc.
 Detailed on demand: see values of objects when interactively selected
 Relate: see relationships, compare values
 Extract: mark and capture data
Basic Interaction: Selection

 Pointing
 Point Selection:
 Mousehover/Mouse click
 Touch/Tap
 Select Nearby Element (ex: bubble cursor)
 Region Selection: (Panning and Zooming)
 Select Nearby Element
 Rubber-band or Lasso
 Area Cursors (“Brushes”)
Basic Interaction

 Pointing
 Point Selection:
 Mousehover/Mouse click
 Touch/Tap
 Select Nearby Element
 Region Selection:
 Select Rectangular Area
 Rubber-band or Lasso
 Brushes
Plotly Lasso Support
Plotly Lasso Support
Other Interactions

 Fisheye Lens:
 fisheye distortion magnifies the local
region around the mouse, while leaving
the larger graph unaffected for
context.
 Cartesian Distortion:
 straight lines parallel to the x or y axis
remain straight even after distortion. This
means you can use standard axes in
conjunction with fisheye distortion in
scatterplots:
Examples

 https://observablehq.com/d/e328ba0126cac5be
Data Storytelling
Data Storytelling

“Numbers have an important story to tell. They rely on you to give them
a clear and convincing voice”.
Stephen Few
Data Visualization

 Data visualization purpose is communication.

 We have an insight about a dataset, and
 we have a potential audience, and
 we would like to convey our insight to our audience
 To communicate our insight successfully, we will have to present the
audience with a clear and exciting story.

https://clauswilke.com/dataviz/telling-a-story.htm
Why “Story Telling”?

 Any communication creates a story in the audience’s minds.

 If we don’t provide a clear story ourselves, then our audience will
make one up.
 In the best-case scenario, the story they make up is reasonably close to
our own view of the material presented.
 It can be and often is much worse.
 Misinterpreted
What is a Story?

 A story is a set of observations, facts, or events, true or invented, that

are presented in a specific order such that they create an
emotional reaction in the audience.
 Standard Formats for story telling:
 Opening–Challenge–Action–Resolution format.
 Lead–Development–Resolution format.
 Or Simply Lead-Development format: Lead gives away the main point up
front and the subsequent material provide further development
Storytelling Through Visualization

Example:
Lead: How Machines Destroy (And Create!) Jobs, In 4 Graphs
 https://www.npr.org/sections/money/2015/05/07/404991483/how-
machines-destroy-and-create-jobs-in-4-graphs?live=1
How Machines Destroy (And
Create!) Jobs, In 4 Graphs
 In the first part of the 20th century,
agricultural technology — the tractor,
chemical fertilizers — meant a single
farmer could suddenly grow much more
food. So we didn't need as many
farmers. Technology destroyed a huge
number of farming jobs.
 But that technology also made food
cheaper, so people had more money to
spend on other things, like TVs and radios
and newly invented appliances. Factory
jobs boomed. Other sectors grew as well;
the midcentury economy had lots of
midskill white-collar jobs like secretary
and bookkeeper.
How Machines Destroy (And
Create!) Jobs, In 4 Graphs
 The next wave of major
technological change came in the
latter part of the 20th century. Robots
in factories and computers in offices
automated away many of the jobs
that earlier technologies had
created in the earlier part of the
century.
How Machines Destroy (And
Create!) Jobs, In 4 Graphs
 In the past several decades, as
factories became more
automated, manufactured goods
got cheaper. That left many
Americans with more money to
spend on services — eating out
more, spending more on health
care and education. These sectors
are still labor-intensive and have
continued to add jobs.
 But that may change as computers
get smarter and more ubiquitous.
How Machines Destroy (And
Create!) Jobs, In 4 Graphs
 Finally, there are a few sectors where
jobs have been disappearing for well
over a century now. At no point in the
20th century was it a good time to be a
blacksmith.

https://www.npr.org/sections/money/2015/05/07/404
991483/how-machines-destroy-and-create-jobs-in-4-
graphs?live=1
 “How Unions Are Winning” in 4 Charts

 From election wins to collective

actions, 2022 has so far been a
great year for unions.
 In the first half of the year,
unions won 641 elections — the
most in nearly 20 years,
according to data
from Bloomberg Law, which
analyzes National Labor
Relations Board (NLRB) data.

https://www.vox.com/recode/2022/8/30/23326
654/2022-union-charts-elections-wins-strikes
“How Unions Are Winning” in 4 Charts

 From election wins to collective

actions, 2022 has so far been a
great year for unions.
 In the first half of the year,
unions won 641 elections — the
most in nearly 20 years,
according to data
from Bloomberg Law, which
analyzes National Labor
Relations Board (NLRB) data.
“How Unions Are Winning” in 4 Charts

 For a union to deliver on its

promises, workers must bargain
and agree on a contract with
their employer, which is no
simple task if employers don’t
cooperate.
 To get companies to bargain in
good faith, unions will likely
have to turn to collective
actions, like strikes.
“How Unions Are Winning” in 4 Charts
 In general, the rise in union
organizing is happening amid
— and perhaps contributing to
— increased approval of
unions. Some 71 percent of
Americans approve of unions
in 2022, according to new
survey data from Gallup. The
last time union approval was
that high was in 1965, when
union membership rates were
more than two times higher
than they are now.
Data Storytelling

 Data storytelling is a structured approach for communicating data

insights, and it involves a combination of three key elements:
1. data,
2. visuals,
3. narrative.

https://www.forbes.com/sites/brentdykes/2016/03/31/data-storytelling-the-essential-data-science-skill-everyone-needs
Data Storytelling: Explain

 Narrative: explain to your audience what’s happening in the data

and why a particular insight is important. Ample context and
commentary is often needed to fully appreciate an insight.

https://www.forbes.com/sites/brentdykes/2016/03/31/data-storytelling-the-essential-data-science-skill-everyone-needs
Data Storytelling: Enlighten

 visuals: enlighten the audience to insights that they wouldn’t see

without charts or graphs. Many interesting patterns and outliers in
the data would remain hidden in the rows and columns of data
tables without the help of data visualizations.

https://www.forbes.com/sites/brentdykes/2016/03/31/data-storytelling-the-essential-data-science-skill-everyone-needs
Data Storytelling: Engage

 When narrative and visuals are merged together, they

can engage an audience.

https://www.forbes.com/sites/brentdykes/2016/03/31/data-storytelling-the-essential-data-science-skill-everyone-needs
Data Storytelling

 When you combine the right visuals and narrative with the right
data, you have a data story that can influence and drive change.

https://www.forbes.com/sites/brentdykes/2016/03/31/data-storytelling-the-essential-data-science-skill-everyone-needs
Hans Rosling

 1948 –2017
 A Swedish physician, academic, statistician, and public speaker.
 Well known as a
 Global health expert; data visionary
 “In Hans Rosling’s hands, data sings”.
 Co-founder and chairman of the Gapminder Foundation, which
developed the Trendalyzer software system.
 He held presentations around the world, including several TED Talks in
which he promoted the use of data to explore development issues.
 https://www.ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_
ever_seen
Dashboards
What is Dashboard?

 A dashboard (also called dash, instrument

panel (IP)) is a control panel located
directly ahead of a vehicle's driver,
displaying instrumentation and controls for
the vehicle's operation. [Wiki]
 Contemporary dashboards may include
the speedometer, tachometer, odometer an
d fuel gauge, turn indicators, gearshift
position indicator, seat belt warning light,
parking-brake warning light, and engine-
malfunction lights. Other features may
include indicators for low fuel, low oil
pressure, low tire pressure and faults in the
airbag (SRS) systems
What is a Dashboard?

 Dashboards often provide at-a-glance views of key

performance indicators (KPIs) relevant to a particular
objective or process. [Wiki]
 The "dashboard" is often displayed on a web page which is
linked to a database that allows the report to be view updated.

[Wiki]
What is a Dashboard?

 Dashboards give users a unified view of the most

important data.
 A dashboard is a visual display of the most important information
needed to achieve one or more objectives; consolidated and
arranged on a single screen so the information can be
monitored at a glance.
Stephen Few, author of Information Dashboard Design
Characteristics of Dashboard

 All the visualizations fit on a single computer screen — scrolling to

see more violates the definition of a dashboard.
 It shows the most important performance indicators/measures to be
monitored.
 Interactivity such as filtering and drill-down can be used in a
dashboard; however, those types of actions should not be required
to see the most important information.
 Effective dashboards are easy to understand and use. (by the
target viewers.
 The displayed data if dynamic should be automatically updated
without any assistance from the user.

Source: http://www.dashboardinsight.com/articles/digital-dashboards/fundamentals
Dashboard Example

https://www.stateofobesity.org/adult-obesity/
Designing Dashboard
Designing Dashboard

1. Design for a target

Simple, but underestimated: don’t lose sight of your goals and target users,
otherwise you will fit the dashboard with too much useless information.
2. Keep everything at a glance
What if your car dashboard contained scrollbars? A good dashboard must
show all relevant information without the need for touch, scrolling, or clicks.
3. Keep it simple
Complexity could come across as sophistication, but in reality it is just an
obstacle between your dashboard and the end users.
4. Align elements
Who wants to design amateurish stuff? Ok, let’s start by aligning elements.
Designing Dashboard

5. Be consistent
Repetition is OK.
6. Highlight the most relevant information
7. Be clear
Acronyms are bad. Legends are good.
8. Start from zero
Chart axes must be used consciously. Sometimes we convey the wrong
message just by forgetting to pay attention to details.
Designing Dashboard

9.Shorten the numbers

Dashboards users want to see the overall picture.
10. Show the context
Numbers only carry meaning within their context
11.Choose the right colors
~8% of the population suffers from color blindness
(http://www.colourblindawareness.org/colour-blindness/)
Color Brewer: http://colorbrewer2.org
12.Design dashboards, not full papers/reports
Not all the details from a table are suitable for a dashboard.
Designing Dashboard

13.Show variations
Don’t let users do the math.
14.Leave the noise off
Don’t suggest relations that don’t exist.
15.Pick the right chart
Each piece of information must be displayed using the right chart in your
dashboard, so choose it wisely.
Scientific Visualization
Purpose

 Graphically illustrate scientific data to enable scientists to

understand, illustrate, and glean insight from their data.

Wiki
Example: Satellite data viz of Eta’s 2nd Florida Landfall
 Example: Satellite images show toxic air sweeping across
North India as farm fires rage

Oct 28, 2019

https://scroll.in/article/941912/satellite-images-show-toxic-air-sweeping-across-north-india-as-farm-fires-rage
Example: ocean currents visualization
Example: Ozone Hole from Measurements

https://earthobservatory.nasa.gov/images/152023/modest-ozone-hole-in-2023
Example: Medical Volume Viz

Source: https://www.petscaninmumbai.com/blog/know-about-mri-and-pet-ct-scan/
Example: Medical Volume Viz

An iso-surface of the skin clipped to reveal the underlying bone structure.

Example: Molecule Visualization

atom and bond level structure visualization

Example: Molecule Visualization

Ball-stick visualizations (on the left), Ribbon and Sheet (on the right) of protein DNAPolymerase:
the twists and folds of the overall structure on which hangs the active site that determines their functionality
Example: Molecule Visualization

An atomic resolution 3-D model of the novel coronavirus, SARS-CoV-2.

Scalar Fields and Visualization
Scalar Fields

 A scalar field is a function that associates a scalar value to every

point in a 2D or 3D space.
 The scalar may either be a (dimensionless) mathematical number or
a physical quantity.
 F(p) = scalar
 the temperature distribution on the surface of earth
 the pressure distribution in a fluid
 Ozone concentration in the atomosphere
Visualizing 1D Scalar Field

 1D Space:
 ex: 𝑓(𝑥) = sin(𝑥) + sin( 𝑥)
 Line plot
Visualizing 2D Scalar Field

 2 D Space:
 ex:
 Temperature over earth surface
 𝑓(𝑥, 𝑦) = 𝑒 ( )

 most popular scalar visualization techniques

 Color mapping
 Contouring
 Height plots
Color Mapping

Sequential color scale https://plotly.com/javascript/colorscales/

Color Mapping

Grays colorscale Rainbow colorscale

Transfer Function
Height Plots

Height plot over a planar 2-D surface

Plotly: type “surface”

https://plotly.com/python/3d-surface-plots/
Contouring

 A contour line C is defined as all points p in a dataset D

that have the same scalar value, or isovalue
s(p)=constant
• A contour line is also called an isoline
Contouring
S > 0.11 One contour S < 0.11
at s=0.11

Contouring
and Color
Banding
Contouring

Contouring and
Colormapping:

Show (1) the

smooth
variation and
(2) the
specific
values

7 contour lines
Constructing Contour

V=0.48

Finding line
segments
within cells
Contouring

• Indicating specific values of

interest
• In this surface plot, a contour line
corresponds with the interaction of
the graph with a horizontal plane
of s value
Plotly: contour
Plotly: contour
Plotly: surface + contour
Visualizing 3D Scalar Field

 3 D Space:
 ex:
 Temperature inside the earth
 most popular scalar visualization techniques
 Color mapping
 Contouring
Coloring
Contours in 3-D

 In 3-D scalar dataset, a contour at

a value is an iso-surface

Isosurface for a value

corresponding to the
skin tissue of an MRI
scan 1283 voxels
Contours in 3-D

Two nested isosurface:

the outer isosurface is
transparent
 Transfer Function

Ref:
https://developer.nvidia.com/gpugems/gpugems/part-vi-beyond-triangles/chapter-39-volume-rendering-techniques
(recap)Scalar Field Visualizaiton
Coloring

Use a color look-up table to

assign a color to the scalar
value.
 Lookup Table: Array of
colors
Contouring

 Contour is the all point of

the space that have the
same scalar value.
 In 2D: A contour is a line
called contour line or iso-
line.

2D Contour Lines or Iso Lines corresponding

to different scalar value.
Contouring

 Contour is the all point of

the space that have the
same scalar value.
 In 2D: A contour is a line
called contour line or iso-
line.

2D Contour Lines or Iso lines with color banding

Grid Method of Contouring

V=0.48

Finding line
segments
within grid
cells
Connection problems
Grid Method of 2D-Contouring

a.k.a. Matching Squares algorithm

 Process each cell in the grid independently.
 Calculate a cell index using comparisons of the contour level(s)
with the data values at the cell corners.
 Use a pre-built lookup table, keyed on the cell index, to describe
the output geometry for the cell.
 Apply linear interpolation along the boundaries of the cell to
calculate the exact contour position.

Ref: https://en.wikipedia.org/wiki/Marching_squares
Contouring

 Contour is the all point of

the space that have the
same scalar value.
 In 2D: A contour is a line
called contour line or iso-
line.
 In 3-D: A contour is a 2-D
surface, called iso-surface.

3D Contour Surface of a Medical Volume Scalafield

Contouring

 Contour is all point of the

space that have the
same scalar value.
 In 2D: A contour is a line
called contour line or iso-
line.
 In 3-D: A contour is a 2-D
surface, called iso-surface.

Multiple Iso surfaces blended.

Marching Cube algorithm

 Process each cubic cell independently

 8 Cell corners. So 8 bit code for cell and 256 different possibilities.
Marching Cube Algorithm:
15 of the 256 configurations.

Ref: https://en.wikipedia.org/wiki/Marching_cubes
Vector Field Visualization
Vector Field

 A vector field is a function that associates a vector value to every

point in a 1D, 2D or 3D space.
 The vector may either be a (dimensionless) mathematical vector or
a physical quantity.
 f(p) = vector
 𝑓: 𝑅 → 𝑅
or
 𝑓: 𝑅 → 𝑅
 Data set is given by a vector component and its magnitude in a
grid
 often results from study of fluid flow or by looking at derivatives (rate of
change) of some quantity
Vector Field

 Gaseous flow:
 development of cars, aircraft, spacecraft
 design of machines - turbines, combustion engines
 Liquid Flow:
 naval applications - ship design
 civil engineering - harbor design, coastal protection
 Chemistry - fluid flow in reactor tanks
 Medicine - blood vessels, SPECT, fMRI
Visualizing Vector Fields

 Vector Field Diagram

 Arrows (different colors or length) in direction of field
on uniform grid.
 Field Lines
 Lines tangent to field at every point along line
Vector Fields – Vector Field
Diagram
 a vector field on the
plane can be visualized
as a collection of arrows
with a given magnitude
and direction, each
attached to a point in the
plane.
 Such plots are called
quiver plot.
 “quiver” is a case for
carrying arrows!
Vector Field Diagram

Two representations of the same vector field: v(x, y) = −r.

The arrows depict the field at discrete points
Wind Velocity Map
Vector Fields – Field Lines
 Directed lines which are tangent to the field vector at each point along its length.
 Field lines never cross each other
 ex: vector field: Electric field diagram
Field Lines

 An individual field line shows the direction of the vector field but not
the magnitude.
 a selection of field lines can be drawn such that the density of field
lines (number of field lines per unit perpendicular area) at any
location is proportional to the magnitude of the vector field at that
point.
 Areas in which neighboring field lines are converging (getting closer
together) indicates that the field is getting stronger in that direction.
Streamlines, streaklines, and
Pathlines and Timelines
3 Different Field lines in a fluid flow.
They differ only when the flow changes with time, that is, when the flow is
not steady.
 Streamlines are a family of curves that are instantaneously tangent to
the velocity vector of the flow. These show the direction in which a
massless fluid element will travel at any point in time.
 Streaklines are the loci of points of all the fluid particles that have
passed continuously through a particular spatial point in the past.
 Dye steadily injected into the fluid at a fixed point extends along a
streakline.
 Pathlines are the trajectories that individual fluid particles follow. These
can be thought of as "recording" the path of a fluid element in the flow
over a certain period. The direction the path takes will be determined
by the streamlines of the fluid at each moment in time.

https://en.wikipedia.org/wiki/Streamlines,_streaklines,_and_pathlines
Streamlines

 A streamline is a line which smoothly connects velocity vectors at an

instance in time. In other words, an image of the flow characterized
by streamlines is like a snapshot of the flow at one moment in time.

https://www.cradle-cfd.com/media/column/a69
Streakline

 A streakline is a curved line formed by a string of fluid particles which

have passed through a certain point. An example of a streakline is
the trail of smoke from a chimney.

https://www.cradle-cfd.com/media/column/a69
Pathline

 A pathline is a path which a fluid particle traces. One example of a

pathline is the path defined by a balloon floating in the air.

https://www.cradle-cfd.com/media/column/a69
Plotly Support

 Streamlines
Plotly Support

 Streamtubes

https://plotly.com/javascript/streamtube-plot/
Paraview
https://www.paraview.org/

 An Open Source scientific drag-drop visualization tool.

 Developed collaboratively by Kitware Inc. and Los Alamos National
Laboratory
Volume visualization Demo page

 https://observablehq.com/@spattana/webgl-volume-rendering
D3 for Interactive Viz
D3: Data-Driven Documents

 An open-source JavaScript library for visualizing data.

 D3 works with Web:
 Users Web Standards such as SVG and Canvas to create
visuals.
 It makes use of SVG (Scalable Vector Graphics), HTML5,
and CSS (Cascading Style Sheets) standards.
 Using D3 it is possible create visualization with maximal
expressiveness.
 D3 makes sense for media organizations such as The New York
Times, where a single graphic may be seen by a million readers.
D3 (continued…)

 D3 is not a charting library

 Hundreds of lines of d3 code are required create a chart.
 There is no default presentation of the data.
 A number of charting libraries have been built on the top of D3:
 Plotly
 Observable Plot: an open-source, JavaScript library created by the D3
team for visualizing tabular data
 …
D3: Key Features

 Shapes
 Scales and Axes
 Selection and Transition:
 uses pre-built functions to select elements, create SVG
objects, style them, or add transitions, dynamic effects,
or tooltips. These objects can also be styled using CSS.
 Allows the developer to add transition to smoothly interpolate values for
attributes and styles over a certain time.

 Interaction
 Layout
 Geographic Maps
Data Visualization Framework

Data Layer Mapping Layer Graphics Layer

Data
Mapping
Collection,
Algorithm
Preparation

Locate/collect Choose the visual type

data, convert to and compute the Visual Type to display.
usable format mapping from data to
visual data.
Visual Types

 Shapes: Graphics primitives that represent the data.

Lines Curves

Areas Bar Arcs Pies circle

Symbols
Graphics and Interaction Layer

HTML
 Graphics
 SVG: Scalable Vector Graphics
 div: A divider, denoted using the <div> tag
 context2D: Raster graphics
 Interaction
 Mouse
 Touch
HTML Elements Attribute

 id: Specifies a unique id for an element

 ex: <div id=“box1”>…</div>
 class: Specifies a the class to which the element belongs
 ex: <p class="important">Note that this is an important paragraph.</p>
 title: Specifies extra information about an element (displayed as a tool tip)
 Geometric Attributes:
 width, height
 ex: <svg id=“vis” width=“600px” height=“400px”>…</svg>
 Style Attributes:
 style
 ex: <p style=“color : red”>…</p>
 alternatively <p color=“red”>…</p>
Cascading Style Sheets (CSS)

 CSS are used to style the visual  Selectors:

presentation of DOM elements.  element tag name: body, div, p, h1,
 Example: …

body {  Selects all elements in the document

background-color: white;  id: #idName

color: black;  Selects element with unique ID

}  class: .className
 Selects all elements belonging to the
 General: same id
selector {  element, element div, p
property: value; Selects all <div> elements and all
<p> elements
}
 element element div p
Selects all <p> elements inside
<div> elements
Sample CSS embedded in a HTML page

<style type="text/css">
p{
font-size: 24px;
font-weight: bold;
background-color: red;
color: white;
}
</style>
<link rel="stylesheet" href="style.css">

HTML page with embedded CSS rule and with reference to an external style sheet.
Sample Rendering 1

<svg width="300" height="200">

<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
More on SVG

 SVG provides shapes

 circles,
 rectangles, and
 simple and complex curves.
 Defined as
 A rectangular element
 the top left corner is considered to be the point (0,0), or point of origin.
 Positions are then measured in pixels from the top left corner, with the
positive x direction being to the right, and the positive y direction being
to the bottom.

 <rect x=“100" y=“100” width="100" height="100" />

SVG: Basic Shapes

 Shapes are elements of the page. Each has its individual geometric
attributes.
 rect,
 Circle, ellipse,
 line,
 Polyline, polygon,
 path.

Ref: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes
SVG: Basic Shapes

 rect:
 6 geometric attributes that control the position and shape of the
rectangle on screen
 ex: <rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
 x, y: Coordinates of the top left corner. Default: 0
 width, height
 rx, ry: Corner radii. Gives a rounded corner.

 Style attribute: (mostly general)

 ex: stroke="black" fill="transparent" stroke-width="5”
SVG: Basic Shapes

 circle:
 3 geometric attributes that control the position and size of the circle on
screen
 ex: <circle cx= "30" cy= "30" r= "25"/>
 cx, cy: Coordinates of the center.
 r: Radius
 ellipse:
 4 geometric attributes that control the position and size of the ellipse on
screen
 ex: <ellipse cx= "30" cy= "30" rx= “25“ ry = “15”/>
 rx, ry: the X and Y radii of the ellipse.
 Style attributes are similar to that of rect.
SVG: Basic Shapes

 line:
 4 geometric attributes that control the position of the end points.
 ex: <line x1="10" x2="50" y1="110" y2="150"/>
 x1, y1, x2, y2 : Coordinates of the end points.
SVG: Basic Shapes

 path: Path is the most powerful shapes of SVG and is probably the
most used shape in d3.
 1 geometric attribute: d
 A list of points and other information about how to draw the path.
 ex: <path
fill="none"
stroke="red”
d="M 10,30
A 20 20 0 0 1 50,30
A 20 20 0 0 1 90,30
Q 90,60 50,90
Q 10,60 10,30 z“
stroke-width=“2"/>
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
SVG: path

 Path: contains a series of commands and parameters used by those

commands.
 commands are instantiated by a single letter: ex: M for moveto, say M 10 10
or M10 10.
 An uppercase letter specifies absolute coordinates on the page, and a
lowercase letter specifies relative coordinates (e.g. move from the last point
10px up and 7px to the left)
 Line commands:
 M x y, m dx dy
 H x, h dx, V x, v dx
 Z closed path.
SVG: path

 Path: contains a series of commands and parameters used by those

commands.
 Curve commands:
 Bezier curves:
 C x1 y1, x2 y2, x y
(or c dx1 dy1, dx2 dy2, dx dy)
 Q x1 y1, x y (or q dx1 dy1, dx dy)

 Arcs
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 or a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

 Z closed path.
SVG: Text

 Text: plots need text. Labels, titles, caption, …

 Attributes:
 x, y: Start position
 text-anchor: takes values "start", "middle", "end" or "inherit", decides in which direction the
text flows from this point.
 dominant-baseline: decides the vertical alignment. Values: auto, middle, hand
 Style attributes:
 font style: font-family, font-style, font-weight, font-size, …

 ex:
<text x="20" y="40" style="font-family: Arial; font-size : 34; stroke : #000000; fill : #00ff00; ">
Styled SVG text
</text>
SVG elements (summarize)

 SVG elements, their attributes and their styles

 line
 x1,y1, x2, y2; stroke, stroke-width
 rect
 x, y, width, heigh; fill, stroke, stroke-width
 circle
 cx, cy, r; fill, stroke, stroke-width
 path
 d; fill, stroke, stroke-width,
 text
 x, y, text; fill, stroke, stroke-width, font, font-size
SVG Shapes
SVG Shapes

Rect Circle Path Text

SVG Shapes

Rect Circle Path Text

width radius d: x,y
height cx,cy: Mx y text
Lxy
x,y: center position
Z
top_left position
C x1 y1, x2 y2, x y
Q x1 y1, x y
A rx ry xrot arcFlag swpFlag x y
SVG Shapes

Rect Circle Path Text

width radius d: x,y
height cx,cy: Mx y text
Lxy
x,y: center position
Z
top_left position
C x1 y1, x2 y2, x y
Q x1 y1, x y
A rx ry xrot arcFlag swpFlag x y

Style: font-size
stroke font-weight
stroke-width font-family
fill text-anchor
D3 API

 D3 is a JavaScript library used to create interactive charts and maps

on the web.
 D3’s approach is lower level: uses svg and its draw elements to
create the visualization
 ex: Creating a bar chart with D3 you need to:
 create SVG rect elements and join them to the data
 position the rect elements
 size the rect elements according to the data
 add axes

 All additional effort involved in D3 programming gives you complete

control over the chart’s appearance and behavior.
Creating SVG elements in
Javascript using D3
let svg = d3.select("body").append("svg")
.attr("width", 700)
.attr("height",500);
svg.append("rect")
.attr("height", 100)
.attr("width",100)
.attr("rx", 10)
.style("fill","green")
Creating SVG elements from Data
using D3
d3.select("body").append("svg")
.attr("width", 700)
.attr("height",500);
let data = [50, 100, 150, 200, 250, 300, 350,
400, 450, 500];
for (let i=0; i<10; i++)
svg.append("rect")
.attr("x", i*60)
.attr("height", data[i])
.attr("width",50)
.attr("rx", 10)
.style("fill","green")
Interaction Events

 Mouse Event:
 selection.on (“mouseover”, mouseOverHandler)
 selection.on(“mouseout”, mouseOutHander)
 selection.on(“click”,mouseClickHandler)
 Touch Event:
 selection.on (“touchstart”, touchStartHandler)
 selection.on(“touchend”, touchEndHander)
ex:
circles.on("mouseover",handleMouseOver)
.on("mouseout",handleMouseOut);

Ref:
https://github.com/d3/d3-selection#handling-events
Creating SVG elements in
Javascript using D3
svg.append("rect")
.attr("x", i*60)
.attr("height", data[i])
.attr("width",50)
.attr("rx", 10)
.style("fill","green")
.on("mouseover", function(){
d3.select(this).style("fill", "red");
})
.on("mouseout", function(d){
d3.select(this).style("fill", "green");
});
D3 Selection

 D3 select (element), D3 selectAll (element)

 d3.select("rect")
 d3.selectAll("rect")
 .append(…)
 .attr(…)
 .style(…)
D3 SelectAll, Data, Join

 d3.selectAll("rect") svg.selectAll("rect")
.data(dataArray) .data([50, 100, 150, 200, 250, 300, 350,400, 450, 500])
.join("rect") .join("rect")
.attr(…) .attr("x", function(d, i) { return i*60})
.style(…)
.attr("height", function(d) { return d})
.attr("width",50)
.attr("rx", 10)
.style("fill","green")
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function(d){d3.select(this).style("fill", "green");});
D3 Selection

 D3 select (element), D3 selectAll (element)

 d3.select(“text”)
 d3.selectAll(“circle”)
 .append(…)
 .attr(…)
 .style(…)
D3 Scale Functions

 Scale functions map a dimension of abstract data to a visual

dimension.
 return output in another interval: Visual property
 position coordinate
 a length or a radius
 a color
 take an input in a certain interval called domain: Data Dimension
 a number, date or category
 Considers 2 types of data
 Contiuous: Quantitative
 Discrete:
 explicit set of values
 Ordinal, Categorical

Source http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/
D3 Scale Functions

 Scales with continuous input and continuous output

 d3.scaleLinear():
 most suitable scale for transforming data values into positions and lengths
 use a linear function (y = m * x + b) to interpolate across the domain and
range
 Domain and Range:
 .domain([minV, maxV).range([minCoordinate,maxCoordinate]);
 ex: d3.scaleLinear().domain([0, 100]).range([0, width])
 ex: d3.scaleLinear().domain([0, 100]).range([height, 0])

http://d3indepth.com/scales/
D3 Scale Functions

 Scales with discrete input and discrete output

 d3.scaleBand: maps n bands to a specified range, where n is the domain size. Similar
to ordinal scales, but use a continuous range instead of a discrete range.
 Useful for creating Bar Charts with an ordinal or categorical dimension
 The value of the last item in the domain is less than the upper bound of the interval.
 The width of each band can be accessed using .bandwidth()
 ex: let scale = d3.scaleBand()
.domain(["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
.range([0,140]
scale(“Saturday”) // 120 <= (140/7)*6
 scale.bandwidth() // 20 <= 140/7
 Allows specification of padding between the bands and before/after the band.
.paddingInner(0.05) // Percent of the stepsize (also available via scae.step()
.paddingOuter(0.05)

http://d3indepth.com/scales/
Creating SVG elements in
Javascript using D3
let xScale = d3.scaleBand().domain(d3.range(10)).range([0, width]).padding(0.2);
let yScale = d3.scaleLinear().domain([0,d3.max(data)]).range([height, 0])
svg.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d,i)=>xScale(i))
.attr("y", (d,i)=>yScale(d))
.attr("height", (d,i)=>height-yScale(d))
.attr("width",xScale.bandwidth())
.attr("rx", 10)
.style("fill","green")
D3 Scale Functions

 Scales with discrete input and discrete output

 d3.scaleOrdinal: maps discrete values (specified by an array) to
discrete values (also specified by an array). The domain array specifies
all possible input values and the range specifies all possible output
values. The range array will repeat if it’s shorter than the domain array..

 ex: let colorScale = d3.scaleOrdinal().range(d3.schemeCategory10);

Ref:
https://github.com/d3/d3-scale-chromatic
http://d3indepth.com/scales/
Creating SVG elements in
Javascript using D3
let xScale = d3.scaleBand().domain(d3.range(10)).range([0, width]).padding(0.2);
let yScale = d3.scaleLinear().domain([0,d3.max(data)]).range([height, 0]);
let colorScale = d3.scaleOrdinal().range(d3.schemeCategory10);
chartContainer.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d,i)=>xScale(i))
.attr("y", (d,i)=>yScale(d))
.attr("height", (d,i)=>height-yScale(d))
.attr("width",xScale.bandwidth())
.attr("rx", 10)
.style("fill",(d,i)=>colorScale(i))
Axes

The axis component renders human-readable reference marks

for scales. This alleviates one of the more tedious tasks in visualizing
data.

https://github.com/d3/d3-axis
Axes

The axis component renders human-readable reference marks for scales.

This alleviates one of the more tedious tasks in visualizing data.
 d3.axisTop(scale), d3.axisBottom(scale), d3.axisRight(scale),
d3.axisLeft(scale)
 An axis consists of
 a path element of class “domain” representing the extent of the scale’s
domain, followed by
 transformed g elements of class “tick” representing each of the scale’s ticks.
 Each tick has a line element to draw the tick line, and
 a text element for the tick label.
 .call(axis)
 Renders the axis to the given context, which may be either a selection of
SVG containers (either SVG or G elements)

https://github.com/d3/d3-axis
SVG g element

 The <g> SVG element is a rectangular container used to group

other SVG elements.
 ex:
let groupElement = svg.append("g");
let rects = groupElement.selectAll(“rect")
.data(dataArray)
.join(“rect")
.attr("x", function(d, i) { return i*60})
.attr(“height", function(d) { return d})
.attr(“width”, 50)
.style(“color", “green”);
SVG g element

 Transformations applied to the <g> element are performed on all of its

child elements, and any of its attributes are inherited by its child
elements.
margin = {
top: 20,
right: 20,
bottom: 50,
left: 50
},
let width = +svg.attr("width") - margin.left - margin.right;
let height = +svg.attr("height") - margin.top - margin.bottom;
let chartContainer = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
SVG g element

 Transformations applied to the <g> element are performed on all of its

child elements, and any of its attributes are inherited by its child
elements.
margin = {
top: 20,
right: 20,
bottom: 50,
left: 50
},
let width = +svg.attr("width") - margin.left - margin.right;
let height = +svg.attr("height") - margin.top - margin.bottom;
let chart = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Axes

 let xScale = d3.scaleBand()

.domain(d3.range(10))
.range([0, width]).padding(0.2);
 let yScale = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([height, 0]);
 let xAxis = d3.axisBottom(xScale); // or d3.axisBottom().scale(xScale);
 chart.append('g').attr('transform', 'translate(0,' + height + ')').call(xAxis)
 let yAxis = d3.axisLeft(yScale);
 chart.append('g').call(yAxis)

https://www.pshrmn.com/tutorials/d3/axes/
D3 Scale Functions

 Scales with continuous input and continuous output (continued)

 d3.scaleSqrt():
 useful for mapping data values in to area dimensions such as radius of the
circle, width of a square
 Interpolates using equation (y = m*sqrt( x) + b) function.
 d3.scaleLog():
 can be useful when the data has an exponential nature to it, data that is not
uniformly distributed.
 Interpolate using a log function (y = m * log(x) + b).
 domain must be strictly positive.

http://d3indepth.com/scales/
D3 Scale Functions

 Scales with continuous input and continuous output (continued)

 d3.scaleTime():
 most suitable for mapping time-series data.
 Similar to scaleLinear. Domain is [minDate, maxDate].
 ex: .domain([new Date(2016, 0, 1), new Date(2017, 0, 1)])

http://d3indepth.com/scales/
D3 Scale Functions

 Scales with continuous input and continuous output (continued)

 d3.scaleSequential(): similar to continuous scales in that they map a continuous,
numeric input domain to a continuous output range. However, unlike continuous
scales, the output range of a sequential scale is fixed by its interpolator
 An interpolator is a function that accepts input between 0 and 1 and outputs an
interpolated value between two numbers, colors, strings etc.
 ex: d3.scaleSequential().domain([0, 100]).interpolator(d3.interpolateRainbow)

http://d3indepth.com/scales/
D3 Scale Functions

 Scales with continuous input and continuous output (continued)

 d3.scaleSequential():
 List of d3 interpolators:
 'interpolateViridis'
 'interpolateInferno'
 'interpolateMagma'
 'interpolatePlasma'
 'interpolateWarm'
 'interpolateCool'
 'interpolateRainbow'
 'interpolateCubehelixDefault'

http://d3indepth.com/scales/
D3 Scale Functions

 Scales with continuous input and continuous output (continued)

 d3.scaleSequential():
 Additional interpolators:
Available from https://github.com/d3/d3-scale-chromatic
 "interpolateBlues", "interpolateGreens", "interpolateGreys", "interpolateOranges",
"interpolatePurples", "interpolateReds",
 "interpolateBuGn", "interpolateBuPu", "interpolateGnBu", "interpolateOrRd",
"interpolatePuBu", "interpolatePuRd", "interpolateRdPu", "interpolateYlGn",
 "interpolatePuBuGn", "interpolateYlGnBu", "interpolateYlOrBr", "interpolateYlOrRd"

http://d3indepth.com/scales/
D3 Scale Functions

 Scales with discrete input and discrete output

 d3.scaleOrdinal: maps discrete values (specified by an array) to
discrete values (also specified by an array). The domain array specifies
all possible input values and the range specifies all possible output
values. The range array will repeat if it’s shorter than the domain array..

 ex: let colorScale = d3.scaleOrdinal().range(d3.schemeCategory10);

Ref:
https://github.com/d3/d3-scale-chromatic
http://d3indepth.com/scales/
D3 Scale Functions

 Scales with discrete input and discrete output

 d3.scalePoint: maps from a discrete set of values to equally spaced points along the
specified range.
 useful for scatterplots an ordinal or categorical dimension
 The distance between the points can be accessed using .step()
ex: let scale = d3.scalePoint()
.domain(["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]
.range([0,120]
scale(“Saturday”) // 120 <= (120/6)*6
 scale.step() // 20 <= 120/6
 Outer padding can be specified as the ratio of the padding to point spacing. For
example, for the outside padding to be a quarter of the point spacing use a value of
0.25
scale.padding (0.25) // Percent of the point spacing

http://d3indepth.com/scales/
scaleBand() vs scalePoint()

scaleBand

scalePoint

https://github.com/d3/d3-scale#ordinal-scales
D3 Scale Functions

 Scales with continuous input and discrete output

 d3.scaleQuantize: Quantize scales are similar to linear scales, except
they use a discrete rather than continuous range.
 The continuous input domain is divided into uniform segments based on the
number of values in (i.e., the cardinality of) the output range.
 Each range value y can be expressed as a quantized linear function of the
domain value x: y = m.round(x) + b.
 ex: d3.scaleQuantize()
.domain([0, 100])
.range(['lightblue', 'orange', 'lightgreen', 'pink']);

http://d3indepth.com/scales/
D3 Scale Functions
 Scales with continuous input and discrete output (continued)
 d3.scaleQuantile:
 Quantile scales map a sampled input domain to a discrete range.
 The domain is considered continuous and thus the scale will accept any
reasonable input value; however, the domain is specified as a discrete set of
sample values. The number of values in (the cardinality of) the output range
determines the number of quantiles that will be computed from the domain.
 To compute the quantiles, the domain is sorted, and treated as a population
of discrete values
 ex: var myData = [0, 5, 7, 10, 20, 30, 35, 40, 60, 62, 65, 70, 80, 90, 100];
d3.scaleQuantile()
.domain(myData)
.range(['lightblue', 'orange', 'lightgreen', 'pink']);

http://d3indepth.com/scales/
D3 Scale Functions

 Scales with continuous input and discrete output (continued)

 d3.scaleThreshold:
 maps continuous numeric input to discrete values defined by the range.
 ex: d3.scaleThreshold()
.domain([10,50,90])
.range(['lightblue', 'orange', 'lightgreen', 'pink']);
u < 10 is mapped to ‘#ccc’
10 ≤ u < 50 to ‘lightblue’
50 ≤ u < 9100 to ‘orange’
u ≥ 90 to ‘#ccc’

http://d3indepth.com/scales/
D3 Shapes: “circle”

let data = [ 0, 2, 3, 5, 7.5, 9, 10 ]; svg.selectAll('circle')

.data(dataArray)
let myScale = d3.scaleLinear() .join('circle')
.domain([0, 10]) .attr('r', 3)
.range([0, 600]); .attr('cx', function(d) {
return myScale(d);
});
D3 Shapes: “path”

 selection.append(“path”)
.attr(“d”, …)
 D3 helpers
 Line generator: d3.line()
 .curve(…) : curveLinear, curveCardinal, closed equivalents
D3 path generator

 d3.line()
 For example:
let lineGenerator = d3.line()
.x(function(d, i) { return d.day; })
// set the x values for the line generator
.y(function(d) { return d.earning; });
// set the y values for the line generator
 d3.line()

 let pathGenerator = d3.line()  chartContainer.append(“path”)

.x(function(d) { .datum(D)
return xScale(d.date); .attr(“d”, function(d){
}) return pathGenerator(d);

.y(function(d) { })

return yScale(d.close);
});

let D = [
{date: "2007-04-23",close: 93.24},
{date: "2008-01-02",close:194.84},
{date: "2009-01-01",close:85.35},
{date: "2010-01-01",close:210.73},
{date: "2011-01-03",close:329.57},
{date: "2012-01-03",close:411.23}
]
 d3.line()

 let pathGenerator = d3.line()  chartContainer.append(“path”)

.x(function(d) { .datum(D)
return xScale(d.date); .attr(“d”, function(d){
}) return pathGenerator(d);

.y(function(d) { })

return yScale(d.close);
})
.curve(d3.curveCardinal);

Curve Choices:
curveLinear, curveMonotoneX, curveCardinal,
curveCatmullRom, curveMonotone, curveNatural,
curveStep, …
D3 Symbols

 built-in symbol types: circle, cross, diamond, square, star, triangle, and wye
all use “path”
 ex: let symbolGenerator = d3.symbol().size(100).type(d3.cross)
 selection.append(“path”)
.attr(“d”,function(){
return symbolGenerator();
})

https://github.com/d3/d3-shape#symbols
D3 Path generators:

selection.append(“path”)

“path”
.attr(‘d’,…)

line generator: area generator: arc generator:

d3.line()(dataArray) d3.area()(dataArray) d3.arc()(dataObj)
where dataArray: where dataArray: where dataObj:
[[x,y],[x,y],…] [[x,y0,y1],[x,y0,y1],…] {innerRad: …,outerRad: …,
startAngle: …, endAngle: …}
D3 Shapes: “path”
svg.append("path")
.datum(data)
 d3.area():
.attr("d", areaGenerator)
 Similar to Line Chart
 Uses SVG path let areaGenerator = d3.area()
.x(function (d) {
 Area generator differs slightly from line generator.
return xScale(d.year);
})
.y0(yScale(minValue))
.y1(function (d) {
return yScale(d.value);
})
d3.area()

 The area generator outputs path let areaGenerator = d3.area();

data that defines an area let points = [
between two lines. [0, 80],
 need triplets [x, y0, y1]. [100, 100],
 y0 defines the baseline and y1 [200, 30],
the top line. [300, 50],
 Default y0 is set to 0, so only [400, 40],
couples [x,y1] may be specified.
[500, 80]
];
d3.select('g')
.append('path')
.datum(points)
.attr('d', areaGenerator);
d3.area()

 The area generator let areaGenerator = d3.area().y0(150);

outputs path data that let points = [
defines an area between [0, 80],
two lines. [100, 100],

 Y0 default may be [200, 30],

changed. [300, 50],
[400, 40],
[500, 80]
];
d3.select('g')
.append('path')
.datum(points)
.attr('d', areaGenerator);
d3.area()

 The area generator outputs let areaGenerator = d3.area()

path data that defines an area .x(function(d, i) {return i*100;})

between two lines. .y0(function(d) {return d.low;})

.y1(function(d) {return d.high;});
 x, y0 and y1 accessor functions let points = [
may be used as well. {low: 30, high: 80},
{low: 80, high: 100},
{low: 20, high: 30},
{low: 20, high: 50},
{low: 10, high: 40},
{low: 50, high: 80}
];
d3.select('g')
.append('path')
.datum(points)
.attr('d', areaGenerator);
d3.stack()

 d3.stack(): for Stacked Area let areaGenerator = d3.area()

.x(function(d, i) {return i*100;})
 The area generator outputs .y0(function(d) {return yScale(d[0]);})
path data that defines an area .y1(function(d) {return yScale(d[1]);});
between two lines. let colors = ['#FBB65B', '#513551', '#de3163'];

 x, y0 and y1 accessor let data = [

functions may be used as {apricots: 120, blueberries: 180, cherries: 100},

well. {apricots: 60, blueberries: 185, cherries: 105},

{apricots: 100, blueberries: 215, cherries: 110},
{apricots: 80, blueberries: 230, cherries: 105},
{apricots: 120, blueberries: 240, cherries: 105}
];
let stack = d3.stack().keys(['apricots','blueberries','cherries']);
let stackedPoints = stack(data);
d3.select('g').selectAll('path').data(stackedPoints)
.join('path')
.datum(points)

.attr('d', areaGenerator)

.style('fill',function(d,i){return colors[i];});
Further readings on Scales

 https://github.com/d3/d3-scale
 http://d3indepth.com/scales/
 https://www.tutorialspoint.com/d3js/d3js_scales_api.htm