Maps, Infovis, Code
plot = {
let svg = Plot.plot({
y: {
domain: [0,850],
inset: 10,
label: "PPI",
labelAnchor: "center"
},
x: {
tickFormat: x => x,
domain: [2000, 2020],
inset: 30,
label: "Year",
labelAnchor: "center"
},
grid: true,
marks: [
//Plot.frame(),
Plot.dot(data, {
filter: d => d.year < 2021,
x: "year",
y: "ppi",
fill: "rgba(0,0,0,1)",
title: d => d.model + " (" + d.ppi + "ppi)",
}),
Plot.tickY(selectedPhones, {
y: "ppi",
stroke: "#009999",
strokeDasharray: "5 5"
}),
Plot.dot(selectedPhones, {
x: "year",
y: "ppi",
r: 4,
stroke: "#009999",
strokeWidth: 3,
fill: "#000000",
title: d => d.model + " (" + d.ppi + "ppi)",
}),
Plot.dot(highlightPhones, {
x: "year",
y: "ppi",
r: 4,
fill: "#B35959",
title: d => d.model + " (" + d.ppi + "ppi)",
}),
// display labels in scatterplot
Plot.text(selectedPhones, {
text: "label",
fontSize: 11,
x: "year",
y: "ppi",
dx: 10,
dy: -7,
fontWeight: "bold",
}),
// display labels on the right
Plot.text(selectedPhones, {
text: "label",
fontSize: 11,
x: 2021,
y: "ppi",
dx: 10,
dy: 3,
fontWeight: "bold",
}),
Plot.text(highlightPhones, {
filter: d => d.align != "left",
text: "model",
fontSize: 8,
x: "year",
y: "ppi",
dx: 0,
dy: -9
}),
Plot.text(highlightPhones, {
filter: d => d.align == "left",
text: "model",
fontSize: 8,
x: "year",
y: "ppi",
textAnchor: "start",
dx: 6,
dy: -6
}),
]
});
// word / emf doesn't like alpha channel, so convert to light grey
d3.selectAll(svg.querySelectorAll(".tick :nth-child(2)"))
.attr("stroke-opacity", 1.0)
.attr("stroke-width", 0.4)
.attr("stroke", "#aaaaaa");
return svg;
}
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.
