Visualizing Concepts: Using Data to Explain Complex Topics
Michael Freeman, University of Washington // Polytechnic University of Madrid
@mf_viz
Today's Objective
Develop a process for designing visual explanations of scientific concepts.
Faculty at University of Washington Information School
Senior Fulbright Scholar at Polytechnic U. of Madrid
Author of Programming Skills for Data Science (bit.ly/ps4ds)
What is division?
With the people around you, take 5 minutes and draw a visual explanation of this concept.
In order to visualize concepts, we need to isolate specific ideas, identify underlying data structures, and leverage corresponding algorithms.
Process
Concepts → Ideas
Ideas → Data
Data → Algorithm
Process
Concepts → Ideas
Ideas → Data
Data → Algorithm
Concepts → Ideas
What foundational ideas underlie your scientific concept?
"What is the Central Limit Theorem?"
Central Limit Theorem
"Distribution of the sampling mean"
What foundational ideas underlie this concept?
Ideas Underlying CLT
Variation within a population
Ideas Underlying CLT
Sampling and how it varies
Ideas Underlying CLT
Repeated sampling from your population
Ideas Underlying CLT
Distributions and normality
Ideas Underlying CLT
Distributions of sample means
Process
Concepts → Ideas
Ideas → Data
Data → Algorithm
Ideas → Data
What data express your idea?
"What is hierarchical modeling?"
Hierarchical Modeling
What data expresses these ideas?
Source code available here
Data Generation Demo
Process
Concepts → Ideas
Ideas → Data
Data → Algorithm
Data → Algorithm
What algorithm enables you to express your data?
"How do you interpret performance of models with binary outcomes?"
Beeswarm Plot
What algorithms are necessary to express this data?
// Bind data to a selection of circles
let circles = g.selectAll("circle").data(data)
// Append new circles to the chart and set their visual attributes
circles.enter().append("circle")
.attr("cx", function(d) { return x(d.value)})
.attr("cy", function(d) { return 0 })
.attr("r", 10)Beeswarm Plot
What algorithms are necessary to express this data?
// Construct a set of simulation forces on the data
const simulation = d3.forceSimulation(data)
.force("x", d3.forceX(function(d) { return x(d.value); }).strength(1))
.force("y", d3.forceY(settings.height / 2))
.force("collide", d3.forceCollide(8))
.stop();
// Iterate through the simulation to find the optimal positions
for(let i =0; i<100; i++) simulation.tick();Beeswarm Plot
What algorithms are necessary to express this data?
// Source (https://github.com/d3/d3-force/blob/master/src/collide.js)
function apply(quad, x0, y0, x1, y1) {
var data = quad.data, rj = quad.r, r = ri + rj;
if (data) {
if (data.index > node.index) {
var x = xi - data.x - data.vx,
y = yi - data.y - data.vy,
l = x * x + y * y;
if (l < r * r) {
if (x === 0) x = jiggle(), l += x * x;
if (y === 0) y = jiggle(), l += y * y;
l = (r - (l = Math.sqrt(l))) / l * strength;
node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj));
node.vy += (y *= l) * r;
data.vx -= x * (r = 1 - r);
data.vy -= y * r;
}
}
return;
}
return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r;
}All 3 stages need to be done well
Concepts → Ideas
Ideas → Data
Data → Algorithm
In order to visualize concepts, we need to isolate specific ideas, identify underlying data structures, and leverage corresponding algorithms.
Thank You
Book: bit.ly/ps4ds
Twitter: @mf_viz
Presentation Resources: mfviz.com/uw-physics
uw-physics
By Michael Freeman
uw-physics
Visualizing Concepts
