import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query"; import { useMemo, useState, useEffect, useRef, Fragment } from "react"; import { ResponsiveContainer, LineChart, Line, AreaChart, Area, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, } from "recharts"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/dumky_public/a8d6be32-84dd-4aa4-87d8-1e577be8a3c4', alias: 'dumky_public' } ]; const N = (v) => (v != null ? Number(v) : 0); const TOKENS = { sand: "#F4EFEA", sandGrey: "#ECE6DF", ink: "#383838", white: "#FFFFFF", sky: "#6FC2FF", skyDark: "#2BA5FF", sun: "#FFDE00", sunDark: "#BFA800", garden: "#16AA98", gardenDark: "#068475", watermelon: "#FF7169", watermelonDark: "#E23F35", duck: "#FF9538", muted: "#888888", rule: "#D6CDBE", }; const STYLE_BLOCK = ` @import url('https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); @font-face { font-family: 'Aeonik Mono'; font-weight: 400; font-style: normal; font-display: swap; src: local('Aeonik Mono'), local('AeonikMono-Regular'), url('./fonts/AeonikMono-Regular.woff2') format('woff2'), url('/fonts/AeonikMono-Regular.woff2') format('woff2'), url('/AeonikMono-Regular.woff2') format('woff2'); } @font-face { font-family: 'Aeonik Mono'; font-weight: 700; font-style: normal; font-display: swap; src: local('Aeonik Mono Bold'), local('AeonikMono-Bold'), url('./fonts/AeonikMono-Bold.woff2') format('woff2'), url('/fonts/AeonikMono-Bold.woff2') format('woff2'), url('/AeonikMono-Bold.woff2') format('woff2'); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body, #root { background: ${TOKENS.sand}; color: ${TOKENS.ink}; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; min-height: 100vh; } .dash { padding: 24px 36px 40px; display: flex; flex-direction: column; gap: 20px; max-width: 1400px; margin: 0 auto; } .dash-chrome { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid ${TOKENS.ink}; padding-bottom: 12px; font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: ${TOKENS.ink}; } .dash-chrome .right { color: ${TOKENS.muted}; } .dash-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .dash-title { font-family: 'Aeonik Mono', 'Cousine', monospace; font-weight: 400; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: ${TOKENS.ink}; } .dash-subtitle { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.45; color: ${TOKENS.ink}; max-width: 64ch; margin-top: 8px; } .section-marker { display: flex; justify-content: space-between; align-items: center; font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: ${TOKENS.ink}; } .section-marker .marker { color: ${TOKENS.watermelon}; margin-right: 8px; } .section-marker .right { color: ${TOKENS.muted}; } /* Unified card */ .card { background: ${TOKENS.white}; border: 2px solid ${TOKENS.ink}; border-radius: 14px; box-shadow: -8px 8px 0 ${TOKENS.ink}; } .card--filters { padding: 12px 16px; } .card--topics { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } .card--chart { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; } .card--table { overflow: hidden; } .chart-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 900px) { .chart-grid-2 { grid-template-columns: 1fr; } } /* Filter row */ .filter-row-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; row-gap: 10px; } .section-tag { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: ${TOKENS.ink}; margin-right: 4px; } .section-tag .marker { color: ${TOKENS.watermelon}; margin-right: 6px; } .vsep { width: 2px; align-self: stretch; background: ${TOKENS.rule}; margin: 0 4px; } .inline-label { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: ${TOKENS.muted}; } /* Multi-select */ .ms { position: relative; display: inline-block; } .ms-trigger { display: inline-flex; align-items: center; gap: 8px; background: ${TOKENS.sand}; color: ${TOKENS.ink}; border: 2px solid ${TOKENS.ink}; border-radius: 999px; padding: 6px 14px; font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 80ms ease; } .ms-trigger:hover { background: ${TOKENS.sandGrey}; } .ms-trigger.open { background: ${TOKENS.ink}; color: ${TOKENS.white}; } .ms-trigger .ms-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; background: ${TOKENS.ink}; color: ${TOKENS.white}; padding: 1px 7px; border-radius: 999px; letter-spacing: 0; } .ms-trigger.open .ms-count { background: ${TOKENS.white}; color: ${TOKENS.ink}; } .ms-chev { font-size: 9px; line-height: 1; opacity: 0.7; } .ms-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 100; min-width: 240px; max-width: 320px; max-height: 340px; overflow: hidden; background: ${TOKENS.white}; border: 2px solid ${TOKENS.ink}; border-radius: 14px; box-shadow: -8px 8px 0 ${TOKENS.ink}; display: flex; flex-direction: column; } .ms-panel-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 2px solid ${TOKENS.ink}; background: ${TOKENS.sand}; font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: ${TOKENS.muted}; } .ms-panel-header .actions { display: inline-flex; gap: 12px; } .ms-panel-header button { background: none; border: none; color: ${TOKENS.watermelon}; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; padding: 0; text-decoration: underline; } .ms-panel-body { overflow-y: auto; padding: 6px; } .ms-opt { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 7px 10px; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 14px; color: ${TOKENS.ink}; text-align: left; cursor: pointer; } .ms-opt:hover { background: ${TOKENS.sand}; } .ms-check { width: 16px; height: 16px; border: 2px solid ${TOKENS.ink}; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; background: ${TOKENS.white}; flex-shrink: 0; } .ms-opt.checked .ms-check { background: ${TOKENS.ink}; color: ${TOKENS.white}; } /* Pill toggle */ .pill-toggle { border: 2px solid ${TOKENS.ink}; border-radius: 999px; display: inline-flex; overflow: hidden; font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .pill-toggle button { background: ${TOKENS.sand}; color: ${TOKENS.ink}; border: none; padding: 6px 14px; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; } .pill-toggle button + button { border-left: 2px solid ${TOKENS.ink}; } .pill-toggle button.active { background: ${TOKENS.ink}; color: ${TOKENS.white}; } .pill-toggle--small { font-size: 11px; } .pill-toggle--small button { padding: 5px 12px; } /* Quick category buttons */ .cat-btn { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 12px; background: ${TOKENS.sand}; color: ${TOKENS.ink}; border: 2px solid ${TOKENS.ink}; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background 80ms ease; } .cat-btn:hover { background: ${TOKENS.sandGrey}; } .cat-btn.active-sky { background: ${TOKENS.sky}; } .cat-btn.active-garden { background: ${TOKENS.garden}; } .cat-btn.active-sun { background: ${TOKENS.sun}; } .cat-btn.active-watermelon { background: ${TOKENS.watermelon}; } .cat-btn .sign { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; opacity: 0.5; } .cat-btn.active-sky .sign, .cat-btn.active-garden .sign, .cat-btn.active-sun .sign, .cat-btn.active-watermelon .sign { opacity: 0.85; } .clear-btn { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: none; color: ${TOKENS.watermelon}; cursor: pointer; text-decoration: underline; padding: 0 4px; } /* Topic picker pills */ .topics-hint { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: ${TOKENS.muted}; display: flex; justify-content: space-between; align-items: center; } .topics-pills { display: flex; flex-wrap: wrap; gap: 6px; } .topic-pill { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; background: ${TOKENS.sand}; color: ${TOKENS.ink}; border: 1.5px solid ${TOKENS.rule}; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: background 80ms ease; } .topic-pill:hover { background: ${TOKENS.sandGrey}; border-color: ${TOKENS.ink}; } .topic-pill .count { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; color: ${TOKENS.muted}; letter-spacing: 0; } .topic-pill.selected { border: 2px solid ${TOKENS.ink}; } .topic-pill.selected .count { color: ${TOKENS.ink}; font-weight: 500; } .topic-pill.selected.tier-1 { background: ${TOKENS.watermelon}; } .topic-pill.selected.tier-2 { background: ${TOKENS.sun}; } .topic-pill.selected.tier-3 { background: ${TOKENS.sky}; } .topic-pill.selected.tier-4 { background: ${TOKENS.garden}; } /* Chart cards */ .chart-title { font-family: 'Aeonik Mono', 'Cousine', monospace; font-weight: 400; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: ${TOKENS.ink}; } .chart-subtitle { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13px; color: ${TOKENS.muted}; } .chart-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } /* Data table */ .table-title { font-family: 'Aeonik Mono', 'Cousine', monospace; font-weight: 400; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; color: ${TOKENS.ink}; padding: 16px 20px 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .table-title .sub { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13px; color: ${TOKENS.muted}; text-transform: none; letter-spacing: 0; } .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: ${TOKENS.ink}; padding: 10px 16px; background: ${TOKENS.sand}; border-top: 2px solid ${TOKENS.ink}; border-bottom: 2px solid ${TOKENS.ink}; white-space: nowrap; } .data-table th.num { text-align: right; } .data-table td { padding: 10px 16px; border-bottom: 1px solid ${TOKENS.rule}; font-size: 13px; color: ${TOKENS.ink}; vertical-align: top; } .data-table tr:last-child td { border-bottom: none; } .data-table tr.clickable { cursor: pointer; } .data-table tr.clickable:hover td { background: ${TOKENS.sand}; } .data-table tr.row-open td { background: ${TOKENS.sand}; } .data-table .row-num, .data-table .num { font-family: 'JetBrains Mono', monospace; font-weight: 500; } .data-table .row-num { color: ${TOKENS.muted}; width: 40px; } .data-table .num { text-align: right; white-space: nowrap; } .data-table .title { font-family: 'Inter', sans-serif; font-weight: 500; color: ${TOKENS.ink}; } .data-table .topics { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: ${TOKENS.muted}; line-height: 1.4; } .data-table td.chev { width: 32px; text-align: center; color: ${TOKENS.muted}; font-size: 12px; font-family: 'JetBrains Mono', monospace; } .data-table tr.expand-row td { padding: 0; background: ${TOKENS.sand}; border-bottom: 2px solid ${TOKENS.ink}; } .data-table tr.expand-row:last-child td { border-bottom: none; } /* Sample list inside expand row */ .samples-wrap { padding: 8px 22px 14px; } .sample-row { padding: 14px 0; border-bottom: 1px solid ${TOKENS.rule}; } .sample-row:last-child { border-bottom: none; } .sample-row .sample-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .sample-row .sample-company { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: ${TOKENS.watermelon}; } .sample-row .sample-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: ${TOKENS.muted}; } .sample-row .sample-summary { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 13px; line-height: 1.55; color: ${TOKENS.ink}; margin-bottom: 8px; } .sample-row .sample-topics { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: ${TOKENS.muted}; line-height: 1.5; } .sample-row .sample-topics .label { font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: ${TOKENS.ink}; margin-right: 6px; } .pagination { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 4px; border-top: 1px solid ${TOKENS.rule}; margin-top: 6px; font-family: 'Aeonik Mono', 'Cousine', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: ${TOKENS.muted}; } .pagination button { background: ${TOKENS.white}; color: ${TOKENS.ink}; border: 2px solid ${TOKENS.ink}; border-radius: 999px; padding: 5px 12px; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } .pagination button:hover:not(:disabled) { background: ${TOKENS.sand}; } .pagination button:disabled { opacity: 0.35; cursor: not-allowed; background: ${TOKENS.sand}; } .skeleton { background: ${TOKENS.sandGrey}; border-radius: 6px; animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .empty { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 14px; color: ${TOKENS.muted}; padding: 30px 20px; text-align: center; } .error { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: ${TOKENS.watermelonDark}; padding: 14px; background: ${TOKENS.sand}; border: 2px solid ${TOKENS.watermelonDark}; border-radius: 4px; } .recharts-cartesian-axis-tick text, .recharts-legend-item-text { font-family: 'Aeonik Mono', 'Cousine', monospace !important; font-size: 11px !important; letter-spacing: 0.04em; text-transform: uppercase; fill: ${TOKENS.ink} !important; } .recharts-tooltip-wrapper .recharts-default-tooltip { background: ${TOKENS.white} !important; border: 2px solid ${TOKENS.ink} !important; border-radius: 2px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 12px !important; padding: 10px 12px !important; } `; // ---------------------------- Config ---------------------------- const DB = `"dumky_public"."data_jobs"."data_jobs_2025"`; const CITY_OPTIONS = [ "london", "new_york", "san_francisco", "singapore", "paris", "amsterdam", "sydney", "berlin", "tokyo", "madrid", "tel_aviv", "switzerland", "rio_de_janeiro", "copenhagen", ]; const JOB_TYPE_OPTIONS = [ "analyst", "data_scientist", "data_engineer", "analytics_engineer", "machine_learning_engineer", "chief", "other", ]; const DEFAULT_CITIES = ["london", "new_york", "san_francisco", "amsterdam", "singapore"]; const DEFAULT_JOB_TYPES = JOB_TYPE_OPTIONS; const CITY_PALETTE = [ "#2BA5FF", "#FF7169", "#068475", "#FFDE00", "#FF9538", "#E23F35", "#6FC2FF", "#16AA98", "#BFA800", "#383838", "#888888", "#50C7B7", "#97D4FF", "#F9EE3E", ]; const JOB_TYPE_PALETTE = [ "#2BA5FF", "#FF7169", "#068475", "#FFDE00", "#FF9538", "#E23F35", "#888888", ]; const CATEGORIES = [ { id: "databases", label: "Databases", color: "sky", topics: ["databricks", "snowflake", "oracle", "bigquery", "redshift", "postgres", "sql_server", "mysql", "mongodb", "dynamodb"], }, { id: "languages", label: "Languages", color: "garden", topics: ["sql", "python", "r_language", "golang", "c_language", "java", "javascript", "scala", "cpp", "typescript"], }, { id: "viz", label: "Viz tools", color: "sun", topics: ["powerbi", "tableau", "looker", "qlik", "grafana", "looker_studio", "quicksight", "metabase", "matplotlib", "superset"], }, { id: "etl", label: "ETL tools", color: "watermelon", topics: ["dbt", "airflow", "informatica", "azure_data_factory", "alteryx", "aws_glue", "fivetran", "talend", "ssis", "dagster"], }, ]; const TOPIC_LIMIT = 20; const PAGE_SIZE = 5; // ---------------------------- Helpers ---------------------------- const sanitize = (v) => String(v).replace(/'/g, "''"); const sqlIn = (vals) => vals.length === 0 ? "''" : vals.map((v) => `'${sanitize(v)}'`).join(","); const prettify = (s) => s.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()); const fmt = (n) => { if (n == null) return "0"; if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + "M"; if (n >= 1_000) return (n / 1_000).toFixed(1) + "K"; return n.toLocaleString(); }; function normalize(rows, keys) { return rows.map((row) => { let sum = 0; for (const k of keys) sum += N(row[k]); if (sum === 0) return { ...row }; const out = { week: row.week }; for (const k of keys) out[k] = (N(row[k]) / sum) * 100; return out; }); } function pivot(rows, categoryKey, valueKey, allCats) { const map = new Map(); for (const r of rows) { const w = r.week; if (!map.has(w)) map.set(w, { week: w }); map.get(w)[r[categoryKey]] = N(r[valueKey]); } const weeks = [...map.keys()].sort(); return weeks.map((w) => { const row = map.get(w); for (const c of allCats) if (row[c] == null) row[c] = 0; return row; }); } // ---------------------------- MultiSelect ---------------------------- function MultiSelect({ label, options, selected, onChange, format }) { const [open, setOpen] = useState(false); const ref = useRef(null); useEffect(() => { if (!open) return; const onDocClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; const onKey = (e) => { if (e.key === "Escape") setOpen(false); }; document.addEventListener("mousedown", onDocClick); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDocClick); document.removeEventListener("keydown", onKey); }; }, [open]); const toggle = (v) => onChange(selected.includes(v) ? selected.filter((x) => x !== v) : [...selected, v]); const fmtLabel = format || ((s) => s); return (

{open && ( )}

); } // ---------------------------- Component ---------------------------- export default function DataJobs2025() { const [cities, setCities] = useDiveState("cities", DEFAULT_CITIES); const [jobTypes, setJobTypes] = useDiveState("jobTypes", DEFAULT_JOB_TYPES); const [traded, setTraded] = useDiveState("traded", "all"); const [selectedTopics, setSelectedTopics] = useDiveState("topics", []); const [cityMode, setCityMode] = useDiveState("cityMode", "abs"); const tradedClause = traded === "public" ? "AND combined_stock_symbols IS NOT NULL AND combined_stock_symbols <> ''" : traded === "private" ? "AND (combined_stock_symbols IS NULL OR combined_stock_symbols = '')" : ""; const topicClause = selectedTopics.length > 0 ? `AND list_has_any(topics, [${selectedTopics.map((t) => `'${sanitize(t)}'`).join(",")}])` : ""; const where = `WHERE city IN (${sqlIn(cities)}) AND job_type IN (${sqlIn(jobTypes)}) ${tradedClause} ${topicClause}`; const whereBase = `WHERE city IN (${sqlIn(cities)}) AND job_type IN (${sqlIn(jobTypes)}) ${tradedClause}`; const enabled = cities.length > 0 && jobTypes.length > 0; // Weekly by city (line / 100% stacked area) const perCityQ = useSQLQuery( `SELECT strftime(date_trunc('week', listed_at), '%Y-%m-%d') AS week, city, count(*) AS jobs FROM ${DB} ${where} GROUP BY 1, 2 ORDER BY 1, 2`, { enabled } ); // Job-type distribution for the whole filtered period (horizontal bar) const jobsByTypeQ = useSQLQuery( `SELECT job_type, count(*) AS jobs FROM ${DB} ${where} GROUP BY 1 ORDER BY jobs DESC`, { enabled } ); // Top-10 topics (whole year, ignores the topic filter) const topTopicsQ = useSQLQuery( `WITH t AS ( SELECT unnest(topics) AS topic FROM ${DB} ${whereBase} ) SELECT topic, count(*) AS jobs FROM t WHERE topic IS NOT NULL AND topic <> '' GROUP BY 1 ORDER BY jobs DESC LIMIT 10`, { enabled } ); // Topics picker (with the user's selection always included) const selectedTopicsLiteral = selectedTopics.length > 0 ? `[${selectedTopics.map((t) => `'${sanitize(t)}'`).join(",")}]` : "[]"; const topicsQ = useSQLQuery( `WITH unnested AS ( SELECT unnest(topics) AS topic FROM ${DB} ${whereBase} ), agg AS ( SELECT topic, count(*) AS jobs FROM unnested WHERE topic IS NOT NULL AND topic <> '' GROUP BY 1 ), top_n AS ( SELECT topic, jobs FROM agg ORDER BY jobs DESC LIMIT ${TOPIC_LIMIT} ), must_include AS ( SELECT topic, jobs FROM agg WHERE list_contains(${selectedTopicsLiteral}, topic) ) SELECT topic, jobs FROM top_n UNION SELECT topic, jobs FROM must_include ORDER BY jobs DESC`, { enabled } ); // Top job titles (no samples_json anymore - lazy loaded per row) const titlesQ = useSQLQuery( `WITH base AS ( SELECT job_title, applies, topics FROM ${DB} ${where} AND job_title IS NOT NULL ), expanded AS ( SELECT job_title, unnest(topics) AS topic FROM base WHERE topics IS NOT NULL ), topic_freq AS ( SELECT job_title, topic, count(*) AS n FROM expanded WHERE topic IS NOT NULL AND topic <> '' GROUP BY 1, 2 ), ranked AS ( SELECT job_title, topic, n, row_number() OVER (PARTITION BY job_title ORDER BY n DESC) AS rn FROM topic_freq ), top_topics AS ( SELECT job_title, string_agg(topic, ', ' ORDER BY rn) AS top_topics FROM ranked WHERE rn <= 5 GROUP BY 1 ), stats AS ( SELECT job_title, count(*) AS jobs, length(list_distinct(flatten(list(topics)))) AS distinct_topics FROM base GROUP BY 1 ) SELECT s.job_title, s.jobs, s.distinct_topics, COALESCE(t.top_topics, '') AS top_topics FROM stats s LEFT JOIN top_topics t USING (job_title) ORDER BY s.jobs DESC LIMIT 15`, { enabled } ); // Expand state + lazy sample query (paginated) const [expandedTitle, setExpandedTitle] = useState(null); const [expandedPage, setExpandedPage] = useState(0); useEffect(() => { setExpandedPage(0); }, [expandedTitle]); const samplesQ = useSQLQuery( `SELECT company_name, job_description_summary, COALESCE(array_to_string(topics, ', '), '') AS topics_str, applies FROM ${DB} ${where} AND job_title = '${sanitize(expandedTitle || "")}' AND job_description_summary IS NOT NULL AND job_description_summary <> '' ORDER BY applies DESC NULLS LAST, listed_at DESC LIMIT ${PAGE_SIZE + 1} OFFSET ${expandedPage * PAGE_SIZE}`, { enabled: enabled && !!expandedTitle } ); // ---- derived data ---- const cityChartData = useMemo(() => { const rows = Array.isArray(perCityQ.data) ? perCityQ.data : []; return pivot(rows, "city", "jobs", cities); }, [perCityQ.data, cities]); const cityDisplay = useMemo( () => cityMode === "share" ? normalize(cityChartData, cities) : cityChartData, [cityMode, cityChartData, cities] ); const jobsByTypeData = useMemo(() => { const rows = Array.isArray(jobsByTypeQ.data) ? jobsByTypeQ.data : []; return rows.map((r) => ({ job_type: r.job_type, label: prettify(r.job_type), jobs: N(r.jobs), })); }, [jobsByTypeQ.data]); const topTopicsData = useMemo(() => { const rows = Array.isArray(topTopicsQ.data) ? topTopicsQ.data : []; return rows.map((r) => ({ topic: r.topic, label: prettify(r.topic), jobs: N(r.jobs), })); }, [topTopicsQ.data]); const topicsRows = Array.isArray(topicsQ.data) ? topicsQ.data : []; const orderedTopicRows = useMemo(() => { const sel = topicsRows.filter((r) => selectedTopics.includes(r.topic)); const unsel = topicsRows.filter((r) => !selectedTopics.includes(r.topic)); return [...sel, ...unsel]; }, [topicsRows, selectedTopics]); const maxTopicCount = topicsRows.length ? N(topicsRows[0].jobs) : 0; const titlesRows = Array.isArray(titlesQ.data) ? titlesQ.data : []; const samplesData = Array.isArray(samplesQ.data) ? samplesQ.data : []; const visibleSamples = samplesData.slice(0, PAGE_SIZE); const hasMoreSamples = samplesData.length > PAGE_SIZE; // ---- handlers ---- const toggleTopic = (t) => setSelectedTopics((prev) => prev.includes(t) ? prev.filter((x) => x !== t) : [...prev, t] ); const applyCategory = (topics) => { const allOn = topics.every((t) => selectedTopics.includes(t)); if (allOn) { setSelectedTopics((prev) => prev.filter((t) => !topics.includes(t))); } else { setSelectedTopics((prev) => Array.from(new Set([...prev, ...topics]))); } }; const cityColor = (c) => CITY_PALETTE[CITY_OPTIONS.indexOf(c) % CITY_PALETTE.length]; const typeColor = (t) => JOB_TYPE_PALETTE[JOB_TYPE_OPTIONS.indexOf(t) % JOB_TYPE_PALETTE.length]; const topicTier = (count) => { if (!maxTopicCount) return 0; const r = N(count) / maxTopicCount; if (r > 0.66) return 1; if (r > 0.33) return 2; if (r > 0.15) return 3; return 4; }; return ( <>

$ DATA JOBS · 2025

DUMKY_PUBLIC · DATA_JOBS · DATA_JOBS_2025

A YEAR OF DATA JOBS.

109,135 listings across 14 cities and 7 role families. Filter by location, role, public-market status, and topic to see how hiring moved through 2025.

{/* Filters */}

%01 FILTERS

Companies

{[ { id: "all", label: "All" }, { id: "public", label: "Public" }, { id: "private", label: "Private" }, ].map((o) => ( ))}

Quick topics {CATEGORIES.map((cat) => { const allOn = cat.topics.every((t) => selectedTopics.includes(t)); return ( ); })}

{!enabled && (

Select at least one city and one job type to see results.

)} {/* Topic picker */}

% {selectedTopics.length === 0 ? `Pick individual topics · top ${TOPIC_LIMIT}` : `${selectedTopics.length} selected · top ${TOPIC_LIMIT} shown`} {selectedTopics.length > 0 && ( )}

{topicsQ.isLoading && (

{Array.from({ length: 12 }).map((_, i) => (

))}

)} {topicsQ.isError &&

{String(topicsQ.error)}

} {!topicsQ.isLoading && !topicsQ.isError && enabled && (

{orderedTopicRows.map((r) => { const c = N(r.jobs); const tier = topicTier(c); const isSel = selectedTopics.includes(r.topic); return ( ); })} {orderedTopicRows.length === 0 &&

No topics for this selection.

}

)}

{/* Weekly by city */}

%02 JOBS PER WEEK · BY CITY {cities.length} SERIES

Weekly listings by city

{cityMode === "share" ? "Share of weekly listings per city (%)." : "Count of jobs listed each ISO week."}

{perCityQ.isLoading &&

} {perCityQ.isError &&

{String(perCityQ.error)}

} {!perCityQ.isLoading && !perCityQ.isError && enabled && ( {cityMode === "share" ? ( `${Math.round(v)}%`} domain={[0, 100]} /> `${N(v).toFixed(1)}%`} /> {cities.map((c) => ( ))} ) : ( {cities.map((c) => ( ))} )} )}

{/* Two bar charts side-by-side */}

%03 DISTRIBUTION · WHOLE PERIOD CURRENT FILTERS

{/* Job type bar */}

By job type

Total listings per role family.

{jobsByTypeQ.isLoading &&

} {jobsByTypeQ.isError &&

{String(jobsByTypeQ.error)}

} {!jobsByTypeQ.isLoading && !jobsByTypeQ.isError && enabled && ( fmt(N(v))} /> {jobsByTypeData.map((d, i) => ( ))} )}

{/* Top topics bar */}

N°	Job title	Jobs	Distinct topics	Top 5 topics
{String(i + 1).padStart(3, "0")}	{r.job_title}	{fmt(N(r.jobs))}	{fmt(N(r.distinct_topics))}	{String(r.top_topics \|\| "").split(", ").map(prettify).join(" · ")}	{isOpen ? "▴" : "▾"}
{samplesQ.isLoading && ( )} {samplesQ.isError && ( {String(samplesQ.error)} )} {!samplesQ.isLoading && !samplesQ.isError && ( <> {visibleSamples.length === 0 ? ( No description summaries on this page. ) : ( visibleSamples.map((s, si) => { const topics = String(s.topics_str \|\| "") .split(", ") .filter(Boolean) .slice(0, 10); return ( {s.company_name \|\| "Unknown company"} {fmt(N(s.applies))} applies {s.job_description_summary} {topics.length > 0 && ( Topics {topics.map(prettify).join(" · ")} )} ); }) )} Page {expandedPage + 1} · showing {visibleSamples.length} of ≥{expandedPage * PAGE_SIZE + visibleSamples.length}{hasMoreSamples ? "+" : ""} )}
No titles for this selection.

Data jobs 2025 — a year of hiring

Comments