Professor of Mathematics and Computer Science at a small liberal arts college in Kentucky, USA.
Public
Edited
Nov 23, 2023
import {aq, op} from "@uwdata/arquero"
import {m111survey} from "@homerhanumat/bcscr"
import {CPS85} from "@homerhanumat/mosaicdata"
survey = aq.from(m111survey)
Plot.plot({
x: {label: "fastest speed ever driven (mph)"},
y: {label: "grade-point average"},
color: {legend: true},
marginTop: 25,
marginBottom: 35,
inset: 10,
title: "GPA and Speed are Not Strongly Related",
subtitle: "(but the males tend to drive faster, and to have slightly lower GPAs)",
caption: "Figure: Scatterplot of GPA vs fastes speed ever dirven, by sex`.",
nice: true,
marks: [
Plot.frame({fill: "#eaeaea"}),
Plot.gridY({stroke: "white", strokeOpacity: 1}),
Plot.gridX({stroke: "white", strokeOpacity: 1}),
Plot.dot(m111survey, Plot.pointer({x: "fastest", y: "GPA", r: 6, fill: "sex", fillOpacity: 0.5})),
Plot.dot(m111survey, {x: "fastest", y: "GPA", fill: "sex"}),
Plot.crosshair(m111survey, {x: "fastest", y: "GPA", ruleStrokeWidth: 1.5, maxRadius: 20})
]
})
viewof m = Inputs.range([1, m111survey.length], {label: "Number of observations", step: 1, value: 1})
Plot.plot({
marks: [
Plot.dot(m111survey, {x: "height", y: "ideal_ht", fill: "currentColor", fillOpacity: 0.2}),
Plot.dot(m111survey.slice(0, m), {x: "height", y: "ideal_ht"}),
Plot.linearRegressionY(m111survey.slice(0, m), {x: "height", y: "ideal_ht", stroke: "red"})
]
})
Plot.plot({
marks: [
Plot.barY(m111survey, Plot.groupX({y: "count"}, {x: "sex", fill: "weight_feel"})),
Plot.ruleY([0])
]
})
weightFeelBySex = survey
.groupby("sex", "weight_feel")
.count()
.orderby("sex", "weight_feel")
weightFeelBySex.view()
Plot.plot({
marks: [
Plot.barY(weightFeelBySex, {x: "sex", y: "count", fill: "weight_feel"}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barY(m111survey, Plot.stackY(Plot.groupX({y: "count"}, {x: "sex", fill: "weight_feel"}))),
Plot.ruleY([0])
]
})
Plot.plot({
//marginBottom: 30,
fx: {padding: 0, label: null, tickRotate: 0, tickSize: 10},
x: {axis: null, paddingOuter: 0.2},
y: {grid: true},
color: {legend: true},
marks: [
Plot.barY(m111survey, Plot.groupX({y2: "count"}, {x: "weight_feel", fx: "sex", fill: "weight_feel"})),
Plot.ruleY([0])
]
})
Plot.plot({
fx: {padding: 0, label: null, tickRotate: 0, tickSize: 10},
x: {label: null, tickPadding: 6, tickSize: 0},
color: {legend: true},
marks: [
Plot.ruleX(
weightFeelBySex,
{x: "weight_feel", y: "count", strokeWidth: 2, fx: "sex", stroke: "weight_feel"}
),
Plot.dot(weightFeelBySex, {x: "weight_feel", y: "count", fx: "sex", fill: "weight_feel", r: 4})
]
})
Plot.plot({
marks: [
Plot.boxY(CPS85.filter(d => d.wage < 40), {x: "sex", y: "wage", fill: "burlywood"})
]
})
Plot.plot((() => {
const CPSsmall = CPS85.filter(d => d.wage < 40);
const n = 3; // number of facet columns
const keys = Array.from(d3.union(CPSsmall.map((d) => d.sector)));
const index = new Map(keys.map((key, i) => [key, i]));
const fx = (key) => index.get(key) % n;
const fy = (key) => Math.floor(index.get(key) / n);
return {
height: 600,
//axis: null,
y: {insetTop: 10},
x: {label: null},
fx: {axis: null, padding: 0.03},
fy: {axis: null},
marks: [
Plot.boxY(CPSsmall, {
x: "sex",
y: "wage",
fill: "burlywood",
fx: (d) => fx(d.sector),
fy: (d) => fy(d.sector)
}),
Plot.text(keys, {fx, fy, frameAnchor: "top-left", dx: 6, dy: 6}),
Plot.frame()
]
};
})())
Plot.plot({
y: {grid: true},
marks: [
Plot.rectY(m111survey, Plot.binX({y: "count"}, {x: "fastest", fill: "skyblue"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {domain: [0,20]},
marks: [
Plot.frame({fill: "#eaeaea"}),
Plot.rectY(m111survey, Plot.binX({y: "count"}, {x: "fastest", thresholds: 15, fill: "skyblue"})),
Plot.gridY({interval: 2, stroke: "black", strokeOpacity: 0.3}),
Plot.ruleY([0])
]
})
Plot.plot({
insetBottom: 17,
y: {grid: true},
marks: [
Plot.rectY(m111survey, Plot.binX({y: "count"}, {x: "fastest", thresholds: 15, fill: "skyblue"})),
Plot.spike(m111survey, {
x: (d, i) => d["fastest"] + jitter[i],
frameAnchor: "bottom",
opacity: 0.2,
stroke: "orangered"
}),
Plot.ruleY([0])
]
})
thresholds = d3.ticks(...d3.nice(...d3.extent(m111survey.map(d => d.fastest)), 10), 40)
function kde(kernel, thresholds, data) {
return thresholds.map(t => [t, d3.mean(data, d => kernel(t - d))]);
}
function epanechnikov(bandwidth) {
return x => Math.abs(x /= bandwidth) <= 1 ? 0.75 * (1 - x * x) / bandwidth : 0;
}
density = kde(epanechnikov(bandwidth), thresholds, m111survey.map(d => d.fastest))
viewof bandwidth = Inputs.range([1, 20], {value: 7, step: 0.1, label: "Bandwidth"})
Plot.plot({
marks: [
Plot.frame(),
Plot.areaY(density, {x: d => d[0], y: d => d[1], fill: "skyblue", curve: "basis"}),
Plot.line(density, {curve: "basis"}),
Plot.spike(m111survey, {
x: (d, i) => d["fastest"] + jitter[i],
frameAnchor: "bottom",
opacity: 0.2,
stroke: "red"
}),
Plot.ruleY([0])
]
})
function() {
const jitter = Float32Array.from(
{ length: m111survey.length },
() => Math.random() - 0.5
);
function seatToNumber(val) {
switch (val) {
case "1_front":
return 1;
case "2_middle":
return 2;
case "3_back":
return 3;
}
}
function numberToLevel(numb) {
switch (numb) {
case 1:
return "front";
case 2:
return "middle";
case 3:
return "back";
default:
return "";
}
}
return Plot.plot({
x: {domain: [0.75, 3.25]},
marginTop: 25,
marginBottom: 30,
inset: 10,
title: "Use the dot Mark",
subtitle: "(play with tickFormat in axisX mark)",
caption: "Figure 1. A chart with a title, subtitle, and caption.",
nice: true,
marks: [
Plot.dot(
m111survey,
{
x: (d, i) => seatToNumber(d["seat"]) + 0.5 * jitter[i],
y: "fastest",
fill: "orangered",
fillOpacity: 0.5
}),
Plot.axisX({
dy: 6,
tickSize: 0,
tickFormat: d => numberToLevel(d)
}),
Plot.frame()
]
})
}();
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
