Unlisted
Edited
Sep 9, 2024
change_by_state_counts = FileAttachment(
"change_2022_2034_by_state_wide@2.csv"
).csv({ typed: true })
changePercStates = {
// const lcast_occ_data_change_soc2_filtered = lcast_occ_data_change_soc2.filter(
// (d) => d.description !== "Unclassified Occupation" //&& d.description !== "Overall"
// );
return addTooltips(
Plot.plot({
width,
//height: "auto",
projection: "identity",
color: {
type: "quantize",
n: 10,
//ticks: d3.range(0, 0.5, 0.2),
// domain: [0, 0.3],
scheme: "RdBu",
label: "Change in Jobs from 2022 to 2034 (%)",
legend: true,
tickFormat: (d) => `${(d * 100).toFixed(0)}%`
},
caption: caption(
"Data Source: [Powered by Lightcast Data](http://www.lightcast.io)"
),
marks: [
Plot.geo(
states,
Plot.centroid({
tip: false,
// channels: {
// County: (d) => d.properties.name,
// State: (d) => statemap.get(d.id.slice(0, 2)).properties.name
// },
fill: (d) => change2034perc.get(d.id),
// title: (d) => statemap.get(d.id.slice(0, 2)).properties.name
title: (d) => {
const stateName = statemap.get(d.id.slice(0, 2)).properties.name;
const changeLabel = change2034.get(d.id);
const changePercentage = change2034perc.get(d.id);
const jobs2022label = jobs2022.get(d.id);
const jobs2034label = jobs2034.get(d.id);
return `${stateName}\nJobs (2022): ${Math.round(
jobs2022label
).toLocaleString()}\nJobs (2034): ${Math.round(
jobs2034label
).toLocaleString()}\nChange: ${Math.round(
changeLabel
).toLocaleString()}\n Percentage Change: ${(
changePercentage * 100
).toFixed(1)}%`;
}
})
),
Plot.geo(states, { stroke: "grey", strokeWidth: 1 })
]
}),
{
// fill: (d) => d.Variable,
// opacity: 0.5,
stroke: "black",
"stroke-width": "3px"
// stroke: (d) => d.Variable
}
);
}
embed = (url, {height = 400} = {}) => {
const iframe = html`<iframe width="100%" frameborder="0" src="${url}"></iframe>`;
// The Embedly protocol is to send the height as part of a stringified object.
// In this example, the resize message is the only message being sent; however,
// the checks are good practice, lest we try to interpret unrelated messages as
// resize events.
function onMessage(msg) {
let {data} = msg;
if (msg.source === iframe.contentWindow && typeof data === "string") {
try {
// Try to parse
data = JSON.parse(data);
} catch {
// The message wasn't valid JSON, so it must not be our resize event
return;
}
}
// Make sure it's the resize event
if (data.context === "iframe.resize") {
const {height} = data;
iframe.style.height = height + "px";
}
}
// Attach our listener for the message from the iframe
window.addEventListener("message", onMessage);
return iframe;
}
us = FileAttachment("counties-albers-10m.json").json()
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
hierarchy = createHierarchy(data)
{
const hierarchy = createHierarchy(data);
// Create pack layout
const width = 800;
const height = 800;
const pack = d3.pack().size([width, height]).padding(3);
const root = pack(hierarchy);
// Prepare data for plotting
const circles = root.descendants().map((d) => ({
x: d.x,
y: d.y,
r: d.r,
depth: d.depth,
data: d.data
}));
// Create the plot
return Plot.plot({
width,
height,
margin: 1,
style: {
fontFamily: "sans-serif",
fontSize: 10
},
marks: [
Plot.dot(circles, {
x: "x",
y: "y",
r: "r",
fill: (d) => d3.schemeCategory10[d.depth],
fillOpacity: 0.7,
stroke: "#ccc",
title: (d) =>
`${d.data.domain}\nSOC: ${d.data.soc}\nJobs: ${d.data.jobs}`
}),
Plot.text(circles, {
x: "x",
y: "y",
text: (d) => d.data.domain,
fontSize: (d) => Math.max(8, Math.min(2 * d.r, 24)),
clip: true,
overflow: "hidden",
width: (d) => d.r * 2,
height: (d) => d.r * 2
})
]
});
}
import {Sunburst} from "@d3/sunburst"
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.
