2b:null 2c:["$","title",null,{"children":"Final Unemployment | Yong-Yeol Ahn | Observable"}] 31:T9b8,chart = { const svg = d3.create("svg") .attr("viewBox", [-25, 10, 1100, 650]); yield svg.node(); svg.append("g") .attr("transform", "translate(610, 20)") .append(() => legend({ color, title: "Unemployment Count", width: 260, ticks: 10, tickFormat: ".1f" }) );; svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", function(d) { return color(d.properties.name);}) .attr("d", path) .append("title") .text(d => `${d.properties.name} ${d.Rate}`); svg.append("g") .attr("class", "states-names") .selectAll("text") .data(topojson.feature(us, us.objects.states).features) .enter() .append("svg:text") .attr("x", function(d){ return path.centroid(d)[0]; }) .attr("y", function(d){ return path.centroid(d)[1]; }) .attr("text-anchor","middle") .attr('fill', 'white') .style("font-size", "10px") .style("font","Georgia"); svg .selectAll("place") .enter() .append("circle") .attr("class", "place") .attr("fill","none") .attr("opacity",.2) .attr("stroke-width","1px") .attr("stroke","#000") .attr("r", 2.0) .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }); svg .selectAll(".place-label") .enter() .append("text") .attr("class", "place-label") .attr("font-size","6px") .attr("opacity",.6) .attr("color","#000") .attr("text-shadow","text-shadow: 1px 1px 0 white,1px -1px 0 white,-1px 1px 0 white,-1px -1px 0 white") .attr("font-family","helvetica, arial, sans-serif") .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.properties.NAME; }) .attr("x", function(d) { return d.geometry.coordinates[0] > -1 ? 6 : -6; }) .style("text-anchor", function(d) { return d.geometry.coordinates[0] > -1 ? "start" : "end"; }); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }32:T1523,// namemap = new Map(states.features.map(d => [d.properties.name, d.id])) function legend({ color, backgroundColour = "white", opacity = 1, title, tickSize = 6, width = 320, height = 44, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = 100, tickFormat, tickValues } = {}) { function ramp(color, n = 256) { const canvas = DOM.canvas(n, 1); const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = color(i / (n - 1)); context.fillRect(i, 0, 1, 1); } return canvas; } const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color .copy() .rangeRound( d3.quantize(d3.interpolate(marginLeft, width - marginRight), n) ); svg .append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr( "xlink:href", ramp( color.copy().domain(d3.quantize(d3.interpolate(0, 1), n)) ).toDataURL() ); } // Sequential else if (color.interpolator) { x = Object.assign( color .copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), { range() { return [marginLeft, width - marginRight]; } } ); svg .append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3 .range(n) .map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3 .scaleLinear() .domain([1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => backgroundColour); svg .append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d) .attr("opacity", opacity); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3 .scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color) .attr("opacity", opacity); svg .append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", backgroundColour); tickAdjust = () => {}; } svg .append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call( d3 .axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues) ) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g .append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("class", "title") .text(title) ); return svg.node(); }33:[{"id":"88050ea3eff82cf03167dd5a5d9332f8e3e1d0372b9ccc4297e1a5aadc188c5f488c6d7b8e12c6051f1a0cbd67f1b4babadaa6948483577729d0df0a95adf661","href":"https://static.observableusercontent.com/files/88050ea3eff82cf03167dd5a5d9332f8e3e1d0372b9ccc4297e1a5aadc188c5f488c6d7b8e12c6051f1a0cbd67f1b4babadaa6948483577729d0df0a95adf661","name":"unemp.csv","type":"text/csv","lastModified":1674236275907.873,"size":518642},{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1674236275907.873,"size":82031}] 2f:{"id":"ef5eafac62b435a2","slug":null,"title":"Final Unemployment","thumbnail":"1a775f816bbba2dd6b3632769a9b16b861b854638c00519ec0a431ad0017aafa","access_level":"public","create_time":"$D2023-01-20T17:37:55.907Z","update_time":"$D2023-01-20T17:37:55.907Z","view_time":null,"first_public_time":"$D2023-01-20T17:37:55.907Z","has_unpublished_edits":null,"fork":{"id":"c25f00aaa1af987e","slug":null,"title":"Unemployment Rate in the United States","owner":{"id":"3a271d379e265e5c","login":"riyashetty15","name":"Riya Shetty"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7e3deefd441dfac8","login":"yy","name":"Yong-Yeol Ahn","avatar_url":"https://avatars-next.observableusercontent.com/d9f0665012b97707c77077500cb3393a43a3cd7b0315fb5ccb3f841b348e7d82","tier":"starter_2024"},"version":289,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"793fc29e8628c4a7","login":"yy","name":"Yong-Yeol Ahn","avatar_url":"https://avatars-next.observableusercontent.com/d9f0665012b97707c77077500cb3393a43a3cd7b0315fb5ccb3f841b348e7d82","tier":null}],"members":[{"type":"individual","id":"793fc29e8628c4a7","login":"yy","name":"Yong-Yeol Ahn","avatar_url":"https://avatars-next.observableusercontent.com/d9f0665012b97707c77077500cb3393a43a3cd7b0315fb5ccb3f841b348e7d82","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Final Unemployment","cells":[{"id":0,"value":"md`# Final Unemployment`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof state = Inputs.select(statenames, {label: \"States\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"viewof occupation = Inputs.select(occupations, {label: \"Occupation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"viewof year = Inputs.range([2018,2019,2020], {step: 1, label: \"Year\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof month = Inputs.range(months, {step: 1, label: \"Month\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"viewof rate = Inputs.range([2, 7], {step: .01, label: \"Unemployment Rate in Percent\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"

Data Import

Data Definitions

Map Pre-req

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3-geo@2\", \"d3-dsv\", \"d3@6\", \"d3-svg-legend@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"us = FileAttachment(\"states-albers-10m.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"projection = d3.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"

Map Requisites

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"color = d3.scaleQuantize([10, 4000], d3.schemeBlues[6]) //adjust the distribution on the legend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"

Imports

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"import {aq, op} from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 30:"$2f:body"