Unit 5: Interactive

data visualization
What is Interactive Data
Visualization?
• Interactive data visualization refers to the use of modern data
analysis software that enables users to directly manipulate and
explore graphical representations of data.
• Data visualization uses visual aids to help analysts efficiently and
effectively understand the significance of data.
• Interactive data visualization software improves upon this concept by
incorporating interaction tools that facilitate the modification of the
parameters of a data visualization, enabling the user to see more
detail, create new insights, generate compelling questions, and
capture the full value of the data.
• Definition: Interactive data visualization is the process of using data to
create visual elements that users can engage with, such as through
hovering, clicking, zooming, or filtering.
• Purpose: This makes complex datasets more accessible and allows
users to explore data in a more intuitive way, gaining insights by
directly manipulating the visuals.
• Tools: Common tools include D3.js, Plotly, Tableau, and libraries in R
and Python (like ggplot2 with Shiny or Seaborn with Plotly).
Interactive Data Visualization
Techniques
• Deciding what the best interactive data visualization will be for your
project depends on your end goal and the data available.
• Brushing
• Painting
• Identification
• Scaling
• Linking
Brushing:
• Brushing is an interaction in which the mouse controls a paintbrush
that directly changes the color of a plot, either by drawing an outline
around points or by using the brush itself as a pointer.
• Brushing scatterplots can either be persistent, in which the new
appearance is retained once the brush has been removed, or
transient, in which changes only remain visible while the active plot is
enclosed or intersected by the brush.
• Brushing is typically used when multiple plots are visible and a linking
mechanism exists between the plots.
• Painting: Painting refers to the use of persistent brushing, followed by
subsequent operations such as touring to compare the groups.
• Identification: Identification, also known as label brushing or
mouseover, refers to the automatic appearance of an identifying label
when the cursor hovers over a particular plot element.
• Scaling: Scaling can be used to change a plot’s aspect ratio, revealing
different data features. Scaling is also commonly used to zoom in on
dense regions of a scatter plot.
• Linking: Linking connects selected elements on different plots. One-
to-one linking entails the projection of data on two different plots, in
which a point in one plot corresponds to exactly one point in the
other.
• Elements may also be categorical variables, in which all data values
corresponding to that category are highlighted in all the visible plots.
• Brushing an area in one plot will brush all cases in the corresponding
category on another plot.
 Scales
• Definition: Scales map data values to visual properties, such as size,
color, or position. They transform raw data into a visual format,
adjusting the range for the display.
• Types: Common types include linear, ordinal, and logarithmic scales,
each used depending on the data’s nature (e.g., quantitative,
categorical).
• Use in Visualization: Scales are essential in helping users interpret
data meaningfully. For instance, a color scale could represent
temperature gradients in a heat map.
 Axes
• Definition: Axes are the reference lines that define the coordinate
system of a chart or graph, usually containing tick marks and labels.
• Purpose: They help interpret data points by showing scales and values
along the graph’s edges.
• Customization: In D3.js, for example, axes can be customized in terms
of tick intervals, positioning, and style.
Updates, Transition, and Motion
• Updates: Refers to refreshing or updating the visual display when data
changes, either periodically or due to user interaction.
• Transition and Motion: Adding smooth transitions (e.g., for changes
in size, position, or color) can help users understand changes in the
data better by visually connecting old and new states.
• Usage: Libraries like D3.js allow for setting up transitions to make data
updates visually engaging and easier to comprehend.
 Interactivity
• Definition: Interactivity in data visualization allows users to engage
with the data by hovering, clicking, zooming, or filtering.
• Benefits: Enhances user experience by making complex datasets more
manageable and insights easier to uncover.
• Examples: Interactive maps that zoom and filter by region, bar charts
that highlight sections when hovered over, or drill-down functionality
in dashboards.
 Layouts
• Definition: Layouts organize visual elements within a space, often
adapting to data structure (e.g., tree diagrams, grids, maps).
• Examples: In D3.js, layouts like force-directed, hierarchical, or radial
trees allow users to see relationships between data points visually.
• Importance: A well-chosen layout makes data visualization clear and
engaging, especially for hierarchical or network data.
 Geomapping
• Overview: Geomapping, or geospatial visualization, represents data in
a geographic context, allowing users to analyze patterns based on
location.
• Applications: Common uses include mapping data points to a map
(e.g., customer locations, weather data).
• Tools: Libraries like Leaflet, Mapbox, and Google Maps API are
frequently used for interactive geomapping, as is the geom_map
function in Tableau for simpler mapping.
 D3.js Framework
• Description: D3.js (Data-Driven Documents) is a JavaScript library for
creating custom, interactive, and dynamic data visualizations in the
web browser.
• Advantages: It offers fine-grained control over every element in a
visualization, allowing developers to bind data directly to DOM
elements.
• Use Cases: Used for building custom charts, visualizations with
transitions, and interactivity like animated bar charts or interactive
choropleth maps.
 Working with Tableau
• Overview: Tableau is a popular data visualization software that allows
users to create and share interactive, graphical representations of
data without extensive programming knowledge.
• Features: Provides a drag-and-drop interface, built-in data
connectors, customizable dashboards, and a wide array of
visualization types.
• Advantages: It’s particularly well-suited for business intelligence, with
features like automated reporting, real-time data updates, and simple
user interactions (e.g., filtering and sorting data with clicks).
 Drawing with Data
• Overview: This refers to transforming raw data into visual
representations. Using libraries (like D3.js) or tools (like Tableau), data
points can be represented as charts, graphs, maps, or custom visuals.
• Implementation: In libraries like D3.js, data is bound to HTML or SVG
elements to generate visuals dynamically. Each data point can drive
specific shapes, colors, or positions on the screen.
How to Create Interactive Data
Visualizations
• Creating various interactive widgets, bar charts, and plots for data
visualization should start with the three basic attributes of a
successful data visualization interaction design - available, accessible,
and actionable.
• The general framework for an interactive data structure visualization
project typically follows these steps: identify your desired goals,
understand the challenges presented by data constraints, and design
a conceptual model in which data can be quickly iterated and
reviewed.
• Some popular libraries for creating your own interactive data
visualizations include: Altair, Bokeh, Celluloid, Matplotlib, nbinteract,
Plotly, Pygal, and Seaborn. Libraries are available for Python, Jupyter,
Javascript, and R interactive data visualizations.
• Scott Murray’s Interactive Data Visualization for the Web is one of the
most popular educational resources for learning how to create
interactive data visualizations.
Benefits of Interactive Data
Visualizations
• Identify Trends Faster - The majority of human communication is
visual as the human brain processes graphics magnitudes faster than
it does text.
• Identify Relationships More Effectively - The ability to narrowly focus
on specific metrics enables users to identify otherwise overlooked
cause-and-effect relationships throughout definable timeframes. This
is especially useful in identifying how daily operations affect an
organization’s goals.
• Useful Data Storytelling - Humans best understand a data story when
its development over time is presented in a clear, linear fashion.
• A visual data story in which users can zoom in and out, highlight
relevant information, filter, and change the parameters promotes
better understanding of the data by presenting multiple viewpoints of
the data.
• Simplify Complex Data - A large data set with a complex data story
may present itself visually as a chaotic, intertwined hairball.
• Incorporating filtering and zooming controls can help untangle and
make these messes of data more manageable, and can help users
glean better insights.
Static vs Interactive Data
Visualization
• A static data visualization is one that does not incorporate any
interaction capabilities and does not change with time, such as an
infographic focused on a specific data story from a single viewpoint.
• As there are no tools to adjust the final results of static visualizations,
such as filtering and zooming tools in interactive designs, it is essential
to give great consideration about what data is being displayed.
• A static visualization is more suited for less complex data stories,
building relationships between concepts, and conveying a
predetermined view than encouraging exploration and increasing user
autonomy.
• Static designs are also significantly less expensive to build than
interactive designs. Deciding whether to build a static or interactive
data visualization depends on customer preference, data story
complexity, and ROI.
Drawing with Data
• It’s time to start drawing with data.
• Let’s continue working with our simple dataset for now:
var dataset = [ 5, 10, 15, 20, 25 ];

Drawing divs:
• We’ll use this to generate a super-simple bar chart. Bar charts are
essentially just rectangles, and an HTML div is the easiest way to draw a
rectangle. (Then again, to a web browser, everything is a rectangle, so
you could easily adapt this example to use spans or whatever element
you prefer.)
 • Formally, a chart with vertically oriented rectangles is a column chart,
and one with horizontal rectangles is a bar chart. In practice, most
people just call them all bar charts, as I’ll do from now on.
• This div could work well as a data bar.

<div style="display: inline-block;