3f:null 40:["$","title",null,{"children":"Sheriff overtime records | Alexiah Olsen | Observable"}] 46:T7e5,PayBreakdown = { return Plot.plot({ width: 800, height: 400, margin: 50, margintop: 1000, marginbottom: 20, marginLeft: 160, title: "Highest overtime pay for Sheriff's employees", subtitle: "See the compensation breakdown for the highest overtime pay earned from Sheriff's officials in 2025", x: { domain: [0, 380000], label: "Total Pay", tickFormat: "$,d", }, y: { padding: 0.3 }, marks: [ // 2. Explicitly add the axis as a mark to unlock layout controls Plot.axisY({ tickFormat: (name) => { const row = highest_ot_breakdown.find((d) => d["Name"] === name); return row ? `${name} (${row["Position"]})` : name;}, lineWidth: 12, // Forces the stacked text blocks to align nicely against the axis line textAnchor: "end", fontSize: 10 }), Plot.axisX({ frontsize: 2000 }), Plot.barX(highest_ot_breakdown, { x: (d) => Number(d["Total Pay"]), y: "Name", fill: "#004D40", title: (row) => `${row["Name"]}\n${row["Position"]}\nTotal Annual Pay: ${d3.format("$,.0f")(row["Total Pay"])}` }), Plot.ruleX([0]), Plot.barX(highest_ot_breakdown, { x: (d) => Number(d["Overtime Pay"]), y: "Name", sort: { y: "x", order: "descending" }, fill: "#D81B60", title: (row) => `${row["Name"]}\n${row["Position"]}\nOvertime Pay: ${d3.format("$,.0f")(row["Overtime Pay"])}` }), Plot.ruleX([0]), Plot.ruleX([0]), Plot.barX(highest_ot_breakdown, { x: (d) => Number(d["Other Pay"]), y: "Name", fill: "#FFC107", title: (row) => `${row["Name"]}\n${row["Position"]}\nOther Pay: ${d3.format("$,.0f")(row["Other Pay"])}` }), Plot.ruleX([0]), Plot.ruleX([0]), Plot.barX(highest_ot_breakdown, { x: (d) => Number(d["Lump Sum Pay"]), y: "Name", fill: "#1E88E5", title: (row) => `${row["Name"]}\n${row["Position"]}\nLump Sum Pay: ${d3.format("$,.0f")(row["Lump Sum Pay"])}` }), ] }) }47:Tcb0,bubbleChart = { const width = 600; const height = 550; const format = d3.format(",d"); const top50Data = OT_hours .slice() .sort((a, b) => Number(b["All Codes Total"]) - Number(a["All Codes Total"])) .slice(0, 50); const color = d3.scaleSequential() .domain(d3.extent(top50Data, (d) => Number(d["All Codes Total"] || 0))) .interpolator(d3.interpolateRgb("#146EDB", "#06BF0C")); const root = d3.pack() .size([width - 2, height - 80]) .padding(0) (d3.hierarchy({ children: top50Data }) .sum((d) => Math.pow(Number(d["All Codes Total"] || 0), 2.5))); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", `${width}px`) .style("height", `${height}px`) .style("max-width", "100%") .style("height", "auto") .attr("font-size", 10) .attr("font-family", "var(--sans-serif)"); // --- HEADER GROUP --- const headerGroup = svg.append("g") .attr("class", "chart-header"); headerGroup.append("text") .attr("x", 20) .attr("y", 30) .attr("text-anchor", "start") .attr("font-size", "21px") .attr("font-weight", "bold") .attr("fill", "#111") .text("Sheriff's employees who logged the most overtime hours"); headerGroup.append("text") .attr("x", 20) .attr("y", 52) .attr("text-anchor", "start") .attr("font-size", "15px") .attr("fill", "#111") .text("This data is from 2025 SLO County records"); // --- CIRCLES & PACK DATA --- const leaf = svg.selectAll("g.leaf") .data(root.leaves()) .join("g") .attr("class", "leaf") .attr("transform", (d) => `translate(${d.x + 1},${d.y + 60})`); leaf.append("title") .text((d) => `${d.data["Employee name"]}\n${d.data["Position"]}\nOvertime Hours: ${format(Number(d.data["All Codes Total"] || 0))} hours`); leaf.append("circle") .attr("id", (d) => (d.leafUid = DOM.uid("leaf")).id) .attr("r", (d) => d.r) .attr("fill-opacity", 0.7) .attr("fill", (d) => color(d.data["All Codes Total"])); leaf.append("clipPath") .attr("id", (d) => (d.clipUid = DOM.uid("clip")).id) .append("use") .attr("xlink:href", (d) => d.leafUid.href); leaf.append("text") .attr("text-anchor", "middle") .style("pointer-events", "none") .attr("clip-path", (d) => d.clipUid) .style("display", (d) => (d.r < 29.5 ? "none" : "block")) .selectAll("tspan") .data((d) => { const rawName = String(d.data["Employee name"] || ""); let nameLine = rawName.length > 14 ? rawName.split(/\s+/) : [rawName]; const rawPos = String(d.data["Position"] || ""); let positionLines = rawPos.length > 12 ? rawPos.split(/\s+/) : [rawPos]; return [ ...nameLine.map((line) => ({ text: line, type: "name" })), ...positionLines.map((line) => ({ text: line, type: "position" })) ]; }) .join("tspan") .attr("x", 0) .attr("y", (d, i, nodes) => `${(i - (nodes.length - 1) / 2) * 1.05}em`) .attr("font-size", "0.9em") .attr("fill-opacity", (d) => (d.type === "position" ? 0.75 : 1)) .attr("font-weight", (d) => (d.type === "name" ? "bold" : "normal")) .text((d) => d.text); return svg.node(); }48:Tc22,myPlot = { const start = new Date(Date.UTC(2024, 11, 1)); // Dec 1, 2024 const end = new Date(Date.UTC(2025, 11, 20)); return Plot.plot({ width: 600, // Smaller width reduces tile widths height: 450, // Smaller height reduces tile heights marginTop: 30, marginBottom: 30, axis: null, // 3 Month columns across fx: { domain: [0, 1, 2], padding: 0.12 }, // 5 Rows down fy: { domain: [0, 1, 2, 3, 4], reverse: false, padding: 0.25 // Increase for larger gaps between month blocks }, // 31 slots for days 1 through 31 x: { type: "band", domain: [0, 1, 2, 3, 4,], paddingInner: 0.08 // 15% horizontal gap between day columns }, // Single row strip per month y: { type: "band", domain: [0, 1, 2, 3, 4, 5], reverse: false, paddingInner: 0.2, // 15% vertical gap between week rows }, color: { type: "threshold", domain: [100, 225, 350, 450], // Step cutoffs for your employee counts range: [ "#80D45F", // Bin 1 (<200): Almost white / softest mint "#5FD480", // Bin 2 (200-300): Very pale pastel green "#5FD4C8", // Bin 3 (300-400): Soft sage green "#5F90D4" // Bin 4 (>400): Light muted green (still soft & light) ], legend: true, label: "Number of employees who logged overtime per day", width: 250, // Shrinks the length/width of the legend bar (default ~500) ticks: 4, // Reduces the number of text label ticks to keep it compact tickSize: 3, // Shrinks height of small tick marks className: "custom-calendar-legend" }, marks: [ Plot.cell( Employees_per_day, calendar({ date: "Date", fill: "Employee count", inset: 0.05 }) ), // Month headers Plot.text( d3.utcMonths(start, end), calendar({ text: d3.utcFormat("%B %Y"), frameAnchor: "top", // Anchor to left edge of the grid x: 2, // Align with Sunday (Column 0) y: 0, // Align with Week 0 dx: 0, dy: -16, // Shift strictly 16px above the top cell of EVERY month fill: "#111111", fontSize: 12, fontWeight: "bold", textAnchor: "middle" }) ), // Day of month numbers (1, 2, 3...) Plot.text( Employees_per_day, calendar({ date: "Date", text: (d) => { const dateVal = d.Date instanceof Date ? d.Date : new Date(d.Date); return d3.utcFormat("%-d")(dateVal); }, fill: "#000000", fontSize: 9 }) ), // 4. NEW: Interactive Hover Tooltip Plot.tip( Employees_per_day, Plot.pointer( calendar({ date: "Date", title: (d) => { const dateVal = d.Date instanceof Date ? d.Date : new Date(d.Date); const formattedDate = d3.utcFormat("%B %d, %Y")(dateVal); return `${formattedDate}\nEmployees Worked: ${d["Employee count"]}`; } }) ) ) ] }); } 49:T87c,function calendar({ date = "Date", inset = 0.5, ...options } = {}) { let D; // Safely parse raw Date objects (from d3.utcMonths/Days) or row objects const parseToDate = (v) => { if (!v) return null; let d = v; if (typeof v === "object" && !(v instanceof Date)) { d = v[date] || v.Date || v.date; } if (d instanceof Date) { return isNaN(d) ? null : new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate())); } if (typeof d === "string") { const parts = d.split("T")[0].split("-"); if (parts.length === 3) { return new Date(Date.UTC(+parts[0], +parts[1] - 1, +parts[2])); } } const parsed = new Date(d); return isNaN(parsed) ? null : parsed; }; // Month indexing (Dec 2024 = 0; Jan 2025 = 1, ..., Dec 2025 = 12) const getIndex = (d) => { const yearDiff = d.getUTCFullYear() - 2024; const idx = yearDiff * 12 + d.getUTCMonth() - 11; if (idx < 0 || idx > 12) return null; return idx; }; const getRow = (idx) => (idx === null ? null : idx === 0 ? 0 : Math.floor((idx - 1) / 3) + 1); const getCol = (idx) => (idx === null ? null : idx === 0 ? 0 : (idx - 1) % 3); return { fx: { transform: (data) => (D = Plot.valueof(data, (d) => parseToDate(d), Array)) .map((d) => { const idx = d ? getIndex(d) : null; return idx !== null ? getCol(idx) : null; }) }, fy: { transform: () => D.map((d) => { const idx = d ? getIndex(d) : null; return idx !== null ? getRow(idx) : null; }) }, // x: Day position across 7 columns (0 to 6) x: { transform: () => D.map((d) => { const idx = d ? getIndex(d) : null; return idx !== null ? (d.getUTCDate() - 1) % 7 : null; }) }, // y: Row index based on day of month (Days 1-7 = Row 0, Days 8-14 = Row 1, etc.) y: { transform: () => D.map((d) => { const idx = d ? getIndex(d) : null; return idx !== null ? Math.floor((d.getUTCDate() - 1) / 7) : null; }) }, inset, ...options }; }4a:[{"id":"30fd658d744f9aa0292cceb98fdcefa55d2eb380aa2a6efeb89240b49f55e3edd1dadc95b648e843d7a0f35c669d1eb5a30a3784eb645b84d4d6eb58c0e671de","href":"https://static.observableusercontent.com/files/30fd658d744f9aa0292cceb98fdcefa55d2eb380aa2a6efeb89240b49f55e3edd1dadc95b648e843d7a0f35c669d1eb5a30a3784eb645b84d4d6eb58c0e671de","name":"Updated 2025 sheriff pay - highest ot breakdown (2).csv","type":"text/csv","lastModified":1789770354192,"size":776},{"id":"6572b065033081261ad9e9224a80e1d951c8b5c08d94fdde77c99ad267ff38fa548dbe6956d902d7a389a87f532f3ea4b99f644341af9e700b00ce5289367888","href":"https://static.observableusercontent.com/files/6572b065033081261ad9e9224a80e1d951c8b5c08d94fdde77c99ad267ff38fa548dbe6956d902d7a389a87f532f3ea4b99f644341af9e700b00ce5289367888","name":"Updated 2025 sheriff hours - employees per day.csv","type":"text/csv","lastModified":1790093639186.123,"size":5470},{"id":"8d0ca59a777acd656e208246d5f0a01ed3e24e978b345bd6bc19b0b8677bf1662f24145b176f2a862b993ed9795270d68be0e924b46a15d8c8789b20fc4bccb1","href":"https://static.observableusercontent.com/files/8d0ca59a777acd656e208246d5f0a01ed3e24e978b345bd6bc19b0b8677bf1662f24145b176f2a862b993ed9795270d68be0e924b46a15d8c8789b20fc4bccb1","name":"Updated 2025 sheriff hours - total OT hours (1).csv","type":"text/csv","lastModified":1789767825950,"size":25002},{"id":"30fd658d744f9aa0292cceb98fdcefa55d2eb380aa2a6efeb89240b49f55e3edd1dadc95b648e843d7a0f35c669d1eb5a30a3784eb645b84d4d6eb58c0e671de","href":"https://static.observableusercontent.com/files/30fd658d744f9aa0292cceb98fdcefa55d2eb380aa2a6efeb89240b49f55e3edd1dadc95b648e843d7a0f35c669d1eb5a30a3784eb645b84d4d6eb58c0e671de","name":"Updated 2025 sheriff pay - highest ot breakdown (1).csv","type":"text/csv","lastModified":1789769544208,"size":776}] 44:{"id":"7edd9c14b10accb6","slug":"sheriff-overtime-records","title":"Sheriff overtime records","thumbnail":"4d5c4e66103039c2758bb290e325de27daa0569bef997c36b36ea5a28cc8bc0a","access_level":"public","create_time":"$D2026-09-15T20:55:06.992Z","update_time":"$D2026-09-22T19:29:26.374Z","view_time":null,"first_public_time":"$D2026-09-18T21:51:00.575Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"33333e7f200bdbdc","login":"alexiah-olsenn","name":"Alexiah Olsen","avatar_url":"https://avatars-next.observableusercontent.com/1f16310472144633a1f73283a5e093b3d5b7a2baf680c78d911be32bdd50bffb","tier":"free_2026","bio":"","following":false},"version":680,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b83e6a13c50f2e5c","login":"alexiah-olsenn","name":"Alexiah Olsen","avatar_url":"https://avatars-next.observableusercontent.com/1f16310472144633a1f73283a5e093b3d5b7a2baf680c78d911be32bdd50bffb","tier":null,"bio":"Service journalism reporter for the San Luis Obispo Tribune","following":false}],"members":[{"type":"team","id":"33333e7f200bdbdc","login":"alexiah-olsenn","name":"Alexiah Olsen","avatar_url":"https://avatars-next.observableusercontent.com/1f16310472144633a1f73283a5e093b3d5b7a2baf680c78d911be32bdd50bffb","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Sheriff overtime records","cells":[{"id":1,"value":"# Sheriff overtime records","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"highest_ot_breakdown = FileAttachment(\"Updated 2025 sheriff pay - highest ot breakdown (2).csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"OT_hours = FileAttachment(\"Updated 2025 sheriff hours - total OT hours (1).csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"Employeesday = FileAttachment(\"Updated 2025 sheriff hours - employees per day.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"Employees_per_day = Employeesday.map(d => ({\n ...d,\n Date: new Date(d.Date)\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"// Cell 1: Title\ntitleCell = html`

\n Number of Sheriffs Deputies who logged overtime hours per day\n

\n This data comes from 2025 overtime data.\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"class MonthLine extends Plot.Mark {\n static defaults = {stroke: \"currentColor\", strokeWidth: 1};\n constructor(Employees_per_day, options = {}) {\n const {x, y, fy} = options;\n super(\n Employees_per_day, \n {\n x: {value: x, scale: \"x\"}, \n y: {value: y, scale: \"y\"},\n fy: {value: fy, scale: \"fy\"}\n }, \n options, \n MonthLine.defaults\n );\n }\n render(index, {x, y}, {x: X, y: Y}, dimensions) {\n const {marginTop, marginBottom, height} = dimensions;\n const dx = x.bandwidth(), dy = y.bandwidth();\n return htl.svg` `${Y[i] > marginTop + dy * 1.5\n ? `M${X[i] + dx},${marginTop}V${Y[i]}h${-dx}` \n : `M${X[i]},${marginTop}`}V${height - marginBottom}`)\n .join(\"\")\n }>`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"2"}} 45:"$44:body"