29:null 2a:["$","title",null,{"children":"Subminimum wage project | RISEI | Observable"}] 2f:T5bb,submin_map = { const margin = {top: 0, right: 0, bottom: 0, left: 0}; const path = d3.geoPath(); const format = d3.format("$.2f"); const submin_elim = submin_wage_dat.filter((d) => new Date(d.year_effective).toISOString().slice(0, 10) <= `${selectedYear}-01-01`); const valuemap = new Map(submin_elim.map(d => [d.state_fips, d.year_effective])); // The topojson file has already been preprojected to a 975 x 610 sized map. // Since I wanted the legend to be above the map, I have to make the svg // taller, i.e., height of map + height of legend (which from dev tools is 50px). const svg = d3.create("svg") .attr("width", 975) // .attr("height", 660) .attr("viewBox", [0, 0, 975, 660]) .attr("style", "max-width: 100%; height: auto;"); // const legend = svg.append("g") // .append(() => Legend(color, {title: "Minimum wage ($)", tickFormat: format, width: 260})); const mapcontainer = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); mapcontainer.append("g") // .attr("transform", "translate(0, 50)") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("class", d => `state ${d.properties.name.replace(/ /g, "_")}`) .attr("fill", d => valuemap.has(d.id) ? "#4E2A84" : "#EBEBEB") .attr("stroke", "#FFFFFF") .attr("stroke-linejoin", "round") .attr("d", path) return svg.node(); }30:T17fa,map = { const width = 560; const height = width * 0.75; const margin = {top: 25, right: 0, bottom: 0, left: 0}; const purples = ["#E4E0EE", "#B6ACD1", "#836EAA", "#4E2A84", "#30104E"]; const color = d3.scaleThreshold([10, 12, 14, 16], purples); const format = d3.format("$.2f"); const geo = topojson.feature(us, us.objects.states); const path = d3.geoPath(); const [[x0, y0], [x1, y1]] = path.bounds(geo); const valuemap = new Map(min_wage_2025.map(d => [d.fips, d.min_wage])); // The topojson file has already been preprojected to a 975 x 610 sized map // so I need to rescale (and translate) it to fit my SVG const mapWidth = x1 - x0; const mapHeight = y1 - y0; const scale = Math.min(width / mapWidth, height / mapHeight); const translateX = (width - scale * (x0 + x1)) / 2; const translateY = (height - scale * (y0 + y1)) / 2; const transform = d3.zoomIdentity .translate(translateX, translateY) .scale(scale); const svg = d3.create("svg") .attr("width", 560) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); // To create a tooltip using HTML, // We wrap the SVG with a container that has the html element above it const container = html`

${svg.node()}

` const tooltip = d3.select(container).select(".tooltip"); const legend = svg.append("g") .append(() => Legend(color, {title: "Minimum wage in 2025", tickFormat: format, width: 260})); const mapcontainer = svg.append("g") .attr("transform", `translate(${translateX}, ${translateY + margin.top}) scale(${scale})`); mapcontainer .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("class", d => `state ${d.properties.name.replace(/ /g, "_")}`) .attr("fill", d => valuemap.has(d.id) ? color(valuemap.get(d.id)) : "#EBEBEB") .attr("stroke", d => (d.properties.name === selectedState || d.properties.name === comparisonState) ? "orange" : "white") .attr("stroke-linejoin", "round") .attr("stroke-width", d => (d.properties.name === selectedState || d.properties.name === comparisonState) ? "3px" : "1px") .attr("d", path) .on("pointerenter pointermove", function(evt, d) { const [cx, cy] = path.centroid(d); const [sx, sy] = transform.apply([cx, cy]); d3.select("div.tooltip h3.stateName").text(d.properties.name); d3.select("div.tooltip p.year").text("2025"); d3.select("div.tooltip p.minWage").text(valuemap.has(d.id) ? format(valuemap.get(d.id)) : `${d.properties.name} does not have a state minimum wage law.`); tooltip.style("visibility", "visible"); // Position tooltip so it doesn't overflow past the // edge of the SVG // Measure tooltip size after populating text const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; // Desired position (centered above the state) let left = sx; let top = sy; // Clamp to window or SVG boundaries // Flip the tooltip to the left of the pointer // when the tooltip is pretty far to the right const padding = 5; if(sx + padding + tooltipWidth > width) { left = sx - tooltipWidth; } const maxTop = height - tooltipHeight - padding; top = Math.max(padding, Math.min(top, maxTop)); tooltip .style("left", `${left}px`) .style("top", `${top}px`) .style("visibility", "visible"); // Highlight state when it's hovered over d3.select(this) .raise() .attr("stroke", "orange") .attr("stroke-width", "3px"); }) .on("pointerleave", function(evt, d) { tooltip.style("visibility", "hidden"); if(d.properties.name !== selectedState && d.properties.name !== comparisonState) { d3.select(this) .attr("stroke", "white") .attr("stroke-width", "1px"); } mapcontainer.select(`.state.${selectedState.replace(/ /g, "_")}`).raise(); if(comparisonState) mapcontainer.select(`.state.${comparisonState.replace(/ /g, "_")}`).raise(); }) .on("pointerdown", function(evt, d) { if(valuemap.has(d.id)) { mutable selectedState = d.properties.name; } }); // Make sure selected states appear on top mapcontainer.select(`.state.${selectedState.replace(/ /g, "_")}`).raise(); if(comparisonState) mapcontainer.select(`.state.${comparisonState.replace(/ /g, "_")}`).raise(); // return svg.node(); return container; }31:T1be0,chart = { // Specify the chart’s dimensions. const width = 560; const height = (width * 0.75) - 31; // need to account for the height of the legend which is ~30px const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 50; const colors = ["#4E2A84", "#B6ACD1"]; const format = d3.format("$.2f"); // Create the positional scales. const xScale = d3.scaleUtc() .domain(d3.extent(min_wage_dat, d => d.observation_date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, d3.max(min_wage_dat, d => d.min_wage)]).nice() .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; overflow: visible;"); const container = html`

${selectedState}

${comparisonState}

${svg.node()}

` // Hide second legend item if there is no comparison state selected if(comparisonState && comparisonState !== null && comparisonState !== selectedState) { d3.select(container).select(".legend-item.item2").style("visibility", "visible"); } else { d3.select(container).select(".legend-item.item2").style("visibility", "hidden"); } // Add the horizontal axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0)); // Add the vertical axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickFormat(format).tickSize(-(width - marginLeft - marginRight))) .call(g => g.select(".domain").remove()); // .call(g => g.append("text") // .attr("class", "axis-title") // .attr("x", -marginLeft) // .attr("y", 0) // .attr("fill", "currentColor") // .attr("text-anchor", "start") // .text("Minimum wage")); // Filter dataset to selected state(s) const selected_dat = min_wage_dat.filter(d => d.state === selectedState || d.state === comparisonState); // Compute the points in pixel space as [x, y, z], where z is the name of the series. const points = selected_dat.map((d) => [xScale(d.observation_date), y(d.min_wage), d.state]); // Group the points by series. const groups = d3.rollup(points, v => Object.assign(v, {z: v[0][2]}), d => d[2]); // Draw the lines. const line = d3.line().curve(d3.curveStepAfter); const path = svg.append("g") .attr("fill", "none") .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(groups.values()) .join("path") .style("stroke", d => d[0][2] === selectedState ? colors[0] : colors[1]) .style("mix-blend-mode", "multiply") .attr("d", line); // Add a vertical line for the tooltip const tooltip = d3.select(container).select(".tooltip"); const tip_line = svg.append("line") .attr("y1", marginTop) .attr("y2", height - marginBottom) .style("stroke", "#d2d2d2") .attr("display", "none"); svg .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); return container; // When the pointer moves, find the closest point and update the tooltip. function pointermoved(event) { const chartContainer = d3.select(".line-chart").node(); const [xm, ym] = d3.pointer(event, chartContainer); const i = d3.leastIndex(points, ([x, y]) => Math.abs(x - xm)); const [x, y, k] = points[i]; // get data to populate tooltip with const tip_yr = selected_dat[i].observation_date.toISOString().slice(0, 4); const selected_tip_data = selected_dat.filter(d => d.observation_date.toISOString().slice(0,4) === tip_yr && d.state === selectedState); d3.select(".tooltip h3.year").text(tip_yr); // Hide state in tooltip when there is no data for that year for that state if(selected_tip_data.length === 0) { d3.select(".tooltip div.tooltip-item.item1").style("display", "none"); } else { d3.select(".tooltip h3.stateName.state1").text(selectedState); d3.select(".tooltip p.minWage.state1").text(format(selected_tip_data[0].min_wage)); d3.select(".tooltip div.tooltip-item.item1").style("display", "block"); } if(comparisonState) { const comparison_tip_data = selected_dat.filter(d => d.observation_date.toISOString().slice(0,4) === tip_yr && d.state === comparisonState); if(comparison_tip_data.length === 0) { d3.select(".tooltip div.tooltip-item.item2").style("display", "none"); } else { d3.select(".tooltip h3.stateName.state2").text(comparisonState); d3.select(".tooltip p.minWage.state2").text(format(comparison_tip_data[0].min_wage)); d3.select(".tooltip div.tooltip-item.item2").style("display", "block"); } } tip_line .attr("x1", x) .attr("x2", x); const xpos_2010 = xScale(new Date("2010-01-01")); tooltip .style("left", x < xpos_2010 ? `${x + 4}px` : `${x - 124}px`); tooltip.style("visibility", "visible"); } function pointerentered() { tip_line.attr("display", null); tooltip.style("visibility", "hidden"); } function pointerleft() { tip_line.attr("display", "none"); tooltip.style("visibility", "hidden"); } }32:[{"id":"84d603ad002dc7621f0954461addc4e58b9de155b7fe5cf42d1d414d09b56e93cb8fbc46ea530cb5094539e34d6580b0db22aa266f89ce9761460a1a1c2b258a","href":"https://static.observableusercontent.com/files/84d603ad002dc7621f0954461addc4e58b9de155b7fe5cf42d1d414d09b56e93cb8fbc46ea530cb5094539e34d6580b0db22aa266f89ce9761460a1a1c2b258a","name":"min_wage.csv","type":"text/csv","lastModified":1764882222906.801,"size":95742},{"id":"c74315f468aa78eb255d904635a45c331c22ff73ce5d50b0d5b55404ea6a16dfd3ab4c97edfd4969a372a5f9b62fc318ed0345825654194e038a0366846d96d9","href":"https://static.observableusercontent.com/files/c74315f468aa78eb255d904635a45c331c22ff73ce5d50b0d5b55404ea6a16dfd3ab4c97edfd4969a372a5f9b62fc318ed0345825654194e038a0366846d96d9","name":"submin_elim@1.csv","type":"text/csv","lastModified":1764882222906.801,"size":688},{"id":"1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","href":"https://static.observableusercontent.com/files/1ec3edc43ba66c0db419744c479d1b5118bb405587189f3ad739a10853f6f933d86824e809f4b4ad18053ab33fb5dc7c5f3d6bc601654c8ea976afd5b321f517","name":"counties-albers-10m.json","type":"application/json","lastModified":1764882222906.801,"size":795407}] 2d:{"id":"708c8ca12f63535b","slug":null,"title":"Subminimum wage project","thumbnail":"6eee05987ad1e5eb16ad2a2088ff6e7a1a4bc8ff965c8e87c1913a42b519b350","access_level":"unlisted","create_time":"$D2025-12-04T21:03:42.906Z","update_time":"$D2025-12-04T21:03:42.906Z","view_time":null,"first_public_time":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"17ba14f4dc96d10a","login":"risei","name":"RISEI","avatar_url":"https://avatars-next.observableusercontent.com/067e4d9b05e8a90157d7b0cc7982177006c5bf6b8ce635d1b72cb70a4e7ccde9","tier":"starter_2024"},"version":397,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"71b66a3e782d544e","login":"michelle-yin","name":"Michelle Yin","avatar_url":"https://avatars-next.observableusercontent.com/81dc7845bf385200e69f4e2508bbd99dfaee10f61b797b3c0c0c08b1ba86a990","tier":null}],"members":[{"type":"individual","id":"71b66a3e782d544e","login":"michelle-yin","name":"Michelle Yin","avatar_url":"https://avatars-next.observableusercontent.com/81dc7845bf385200e69f4e2508bbd99dfaee10f61b797b3c0c0c08b1ba86a990","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Subminimum wage project","cells":[{"id":0,"value":"# Subminimum wage project","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":213,"value":"## Minimum wage over time, by state\n1968 - 2025","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":104,"value":"stateSelectors = htl.html`\n

\n ${viewof stateSelect}\n ${viewof comparisonState}\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"min_wage_viz = htl.html`\n

\n ${map}\n ${chart}\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":263,"value":"## Subminimum wage elimination over time","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":265,"value":"viewof selectedYear = Scrubber(d3.range(2015, 2030 + 1, 1), {\n delay: 750,\n loop: true,\n loopDelay: 500,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"submin_wage_summary = htl.html`\n

In ${selectedYear}, ${num_elim_states} ${num_elim_states === 1 ? \"state\" : \"states\"} ${selectedYear < 2026 ? \"\" : \"will have\"} eliminated the subminimum wage.

\n Eliminated subminimum wage\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"mutable selectedState = \"Alaska\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"viewof stateSelect = {\n const sel = Inputs.select(states, {\n label: \"Select a state\",\n value: selectedState,\n width: 200,\n });\n\n\n sel.addEventListener(\"input\", e => {\n mutable selectedState = e.target.selectedOptions[0].textContent;\n });\n\n return sel;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"viewof comparisonState = Inputs.select([null, ...states], {label: \"Select a comparison state (optional)\", width: 200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":270,"value":"num_elim_states = submin_wage_dat.filter((d) => new Date(d.year_effective).toISOString().slice(0, 10) <= `${selectedYear}-01-01`).length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"Bring in minimum wage data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"min_wage_dat = (await FileAttachment(\"min_wage.csv\").csv()).map(d => \n ({...d, \n observation_date: new Date(d.observation_date), \n min_wage: +d.min_wage\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"Filter down to 2025 data for the map:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":9,"value":"min_wage_2025 = min_wage_dat.filter((d) => new Date(d.observation_date).toISOString().slice(0, 10) === \"2025-01-01\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"Bring in subminimum wage elimination data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":255,"value":"submin_wage_dat = (await FileAttachment(\"submin_elim@1.csv\").csv()).map(d => \n ({...d, \n year_enacted: new Date(d.year_enacted), \n year_effective: new Date(d.year_effective),\n })\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"Get a list of states that we can use for the dropdown:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":12,"value":"states = [... new Set(min_wage_dat.map((d) => d.state))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"Import TopoJSON of US states:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"Set global styles:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"htl.html`\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"

{State name}

YYYY