UW iSchool Course INFO 474: focused on designing and building visualizations to better understand and communicate about pressing issues.
Observable BasicsFoundations PracticeData Basics: Loading + ManipulatingD3 Activity 1D3 Activity 1 (complete)D3 Activity IID3 Activity II (complete)Graphical Encodings Design ExerciseVisual CognitionVisual Cognition CompleteTreemap ActivityTreemap Activity (complete)D3 Chart ReviewD3 Chart Review (complete)Election Map (complete)Election MapD3 Small MultiplesD3 Small Multiples (complete)Interaction TechniquesScroll StarterScrolling (complete)
Interaction Techniques (complete)
render_data_table(data.slice(0, 10))
state_data = data
.filter(d => d.state == "Arizona")
.map(d => {
return {
x: +d.enroll,
y: +d.mmr,
name: d.name,
city: d.city
};
})
render_data_table(state_data.slice(0, 10))
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const circles = svg
.selectAll("circle")
.data(state_data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("opacity", .3);
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
md`### Simple text hover`
simple_hover_chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "display");
const circles = svg
.selectAll("circle")
.data(state_data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("opacity", .3);
const tip = svg
.append("text")
.style("pointer-events", "none")
.style("text-anchor", "middle");
// Add a hover
circles.on("mouseenter", event => {
const value = event.target.__data__;
const pointer = d3.pointer(event);
tip
.attr("x", pointer[0])
.attr("y", pointer[1])
.text(value.name);
});
circles.on("mouseout", event => {
tip.text("");
});
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
md`### Bounded hover tips`
bounded_hover_chart = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "display");
const tip = svg
.append("g") // append a group of stuff
.style("pointer-events", "none")
.style("text-anchor", "middle");
const circles = svg
.selectAll("circle")
.data(state_data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("opacity", .3);
// Add a hover
circles.on("mouseenter", event => {
const value = event.target.__data__;
const pointer = d3.pointer(event, this);
// Append the text to the G
tip
.style("text-anchor", "middle")
.attr("transform", `translate(${pointer[0]}, ${pointer[1]})`)
.append("text")
.text(value.name);
const bbox = tip.node().getBBox();
// Make sure it doesn't go beyond the left of the chart
if (pointer[0] + bbox.x < margin.left) {
tip.attr(
"transform",
`translate(${margin.left + bbox.width / 2}, ${pointer[1]})`
);
}
// Make sure it doesn't go to the right of the chart
if (pointer[0] - bbox.x > width - margin.right) {
tip.attr(
"transform",
`translate(${width - margin.right - bbox.width / 2}, ${pointer[1]})`
);
}
});
circles.on("mouseout", event => {
tip.selectAll("*").remove();
});
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
md`### Tip with background`
hover_with_rect = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "display");
const circles = svg
.selectAll("circle")
.data(state_data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("opacity", .3);
const tip = svg
.append("g") // append a group of stuff
.style("pointer-events", "none")
.style("text-anchor", "middle");
// Add a hover
circles.on("mouseenter", event => {
const value = event.target.__data__;
const pointer = d3.pointer(event, this);
const text = [value.name, "City: " + value.city];
// Append the text to the G
const side_padding = 3;
tip
.style("text-anchor", "middle")
.attr("transform", `translate(${pointer[0]}, ${pointer[1]})`)
.selectAll("text")
.data(text)
.join('text')
.style("dominant-baseline", "ideographic")
.text(d => d)
.attr("y", (d, i) => (i - (text.length - 1)) * 15)
.style("font-weight", (d, i) => (i === 0 ? "bold" : "normal"));
const bbox = tip.node().getBBox();
// Add a rectangle (as background)
tip
.append("rect")
.attr("y", bbox.y)
.attr("x", bbox.x - side_padding)
.attr("width", bbox.width + side_padding * 2)
.attr("height", bbox.height)
.style("fill", "white")
.style("stroke", "#d3d3d3")
.lower();
// Make sure it doesn't go beyond the left of the chart
if (pointer[0] + bbox.x < margin.left) {
tip.attr(
"transform",
`translate(${margin.left + bbox.width / 2}, ${pointer[1]})`
);
}
// Make sure it doesn't go to the right of the chart
if (pointer[0] - bbox.x > width - margin.right) {
tip.attr(
"transform",
`translate(${width - margin.right - bbox.width / 2}, ${pointer[1]})`
);
}
});
circles.on("mouseout", event => {
tip.selectAll("*").remove();
});
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
md`## Multiple line hover`
md`## Move hover to a separate function`
external_hover_function = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "display");
const circles = svg
.selectAll("circle")
.data(state_data)
.join("circle")
.attr("r", 5)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("opacity", .3);
const tip = svg
.append("g") // append a group of stuff
.style("pointer-events", "none")
.style("text-anchor", "middle");
// Add a hover
circles.on("mouseenter", event => {
const value = event.target.__data__;
const pointer = d3.pointer(event, this);
const text = [value.name, "City: " + value.city];
tip.call(hover, pointer, text);
});
circles.on("mouseout", event => {
tip.selectAll("*").remove();
});
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
return svg.node();
}
hover = (tip, pos, text) => {
const side_padding = 3;
tip
.style("text-anchor", "middle")
.style("pointer-events", "none")
.attr("transform", `translate(${pos[0]}, ${pos[1]})`)
.selectAll("text")
.data(text)
.join('text')
.style("dominant-baseline", "ideographic")
.text(d => d)
.attr("y", (d, i) => (i - (text.length - 1)) * 15)
.style("font-weight", (d, i) => (i === 0 ? "bold" : "normal"));
const bbox = tip.node().getBBox();
// Add a rectangle (as background)
tip
.append("rect")
.attr("y", bbox.y)
.attr("x", bbox.x - side_padding)
.attr("width", bbox.width + side_padding * 2)
.attr("height", bbox.height)
.style("fill", "white")
.style("stroke", "#d3d3d3")
.lower();
// Reposition the full g element to make sure it doesn't go offscreen
let x = pos[0];
let y = pos[1];
// Make sure it doesn't go beyond the left of the chart
if (x + bbox.x < margin.left) {
x = margin.left + bbox.width / 2 + side_padding;
}
// Make sure it doesn't go beyond the right of the chart
else if (x - bbox.x > width - margin.right) {
x = width - margin.right - bbox.width / 2;
}
// Make sure it doesn't go over the top of the chart
if (y + bbox.y < 0) {
y = margin.top + bbox.height + 10;
}
tip.attr("transform", `translate(${x}, ${y})`);
}
// Working version
voronoi_chart_and_points = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const circles = svg
.selectAll("circle")
.data(state_data)
.join("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 5);
// Voronoi diagram for hovers (but don't show it!)
const cells = svg
.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.selectAll("path")
.data(state_data)
.join("path")
.attr("d", (d, i) => voronoi.renderCell(i));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
const tip = svg.append("g").style("pointer-events", "none");
cells
.on("mouseenter", event => {
const value = event.target.__data__;
const pointer = [x(value.x), y(value.y)];
const text = [value.name, "City: " + value.city];
tip.call(hover, pointer, text);
})
.on("mouseout", event => {
tip.selectAll("*").remove();
});
return svg.node();
}
x = d3
.scaleLinear()
.domain(d3.extent(state_data, d => +d.x))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(state_data, d => +d.y))
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
margin = ({top: 20, right: 30, bottom: 30, left: 40})
height = 500
d3 = require("d3@6")
md`## Appendix`
data = await d3.csv(
"https://raw.githubusercontent.com/WSJ/measles-data/master/all-measles-rates.csv",
d3.auto
)
import { render_data_table, table_styles } from "@uw-info474/utilities"
table_styles
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.