Public
Edited
Feb 18
import {vl} from "@vega/vega-lite-api-v5"
import {fromColumns, printTable} from "@uwdata/data-utilities"
jobs = FileAttachment("jobs.json").json()
printTable(jobs.slice(0, 50))
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.barY(
d3.rollups(
jobs.filter(d => d.count > 0),
v => new Set(v.map(d => d.job)).size,
d => d.year
).map(([year, distinctJobs]) => ({ year, distinctJobs })),
{ x: "year", y: "distinctJobs", tip: true }
)
],
width: 600,
height: 400,
x: { label: "Year" },
y: { label: "Number of Distinct Jobs" }
})
vl.markBar()
.data(jobs)
.encode(
vl.x().fieldQ('year').title('Year'),
vl.y().fieldQ('count').title('Count'),
vl.color().fieldN('job').title('Job')
)
.render()
chartZeroCountJobs = vl.markBar()
.data(jobs)
.transform(
// Filter jobs where the total count is zero
vl.filter('datum.perc === 0')
)
.transform(
// Count the number of distinct jobs with count = 0 per year
vl.aggregate([{ op: 'distinct', field: 'job', as: 'zeroCountJobs' }])
.groupby(['year'])
)
.encode(
vl.x().fieldO('year').title('Year'),
vl.y().fieldQ('zeroCountJobs').title('Number of Jobs with Count 0'),
vl.tooltip([vl.fieldO('year'), vl.fieldQ('zeroCountJobs')])
)
.width(600)
.height(400)
.render();
vl.markLine()
.data(jobs)
.transform(
vl.filter("datum.sex === 'women'")
)
.encode(
vl.x().fieldQ('year').title('Year'),
vl.y().aggregate('sum').field('count').title('Total Women in Workforce'),
vl.color().value('red')
)
.width(800)
.render()
Plot.plot({
marks: [
Plot.ruleY([0]),
// Step 1: Filter jobs containing "Apprentice"
Plot.line(
d3.rollups(
jobs.filter(d => d.job.includes("Apprentice")), // Step 2: Filter jobs containing "Apprentice"
v => d3.sum(v, d => d.count), // Step 3: Sum count of apprentice jobs per year
d => d.year // Group by year
).map(([year, totalApprentices]) => ({ year, totalApprentices })), // Convert to array for plotting
{ x: "year", y: "totalApprentices", stroke: "green", strokeWidth: 2, tip: true }
)
],
width: 600,
height: 400,
x: { label: "Year" },
y: { label: "Total Apprentices" }
})
vl.markLine({ color: "green" })
.data(jobs)
.transform(
vl.filter("indexof(datum.job, 'Apprentice') > -1")
)
.transform(
vl.aggregate([{ op: "sum", field: "count", as: "totalApprentices" }])
.groupby(["year"])
)
.encode(
vl.x().fieldQ("year").title("Year"),
vl.y().fieldQ("totalApprentices").title("Total Apprentices")
)
.width(600)
.height(400)
.render()
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.
