2f: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(); }30: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(); }31:[{"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}] 2d:{"title":"Final Unemployment","cells":[{"id":0,"value":"md`# Final Unemployment`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof state = Inputs.select(statenames, {label: \"States\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof occupation = Inputs.select(occupations, {label: \"Occupation\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof year = Inputs.range([2018,2019,2020], {step: 1, label: \"Year\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"viewof month = Inputs.range(months, {step: 1, label: \"Month\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"viewof rate = Inputs.range([2, 7], {step: .01, label: \"Unemployment Rate in Percent\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"

Data Import

","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"data = aq.fromCSV(await FileAttachment(\"unemp.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"data.view()","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"

Data Definitions

","pinned":false,"hidden":false,"mode":"md"},{"id":147,"value":"statenames = [...new Set([...data.values(\"state\")])]","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"occupations = [...new Set([...data.values(\"Occupation\")])]","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"months = [...new Set([...data.values(\"month\")])]","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"years = [...new Set([...data.values(\"year\")])]","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"

Map Pre-req

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

Map Requisites

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

Imports

","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"import {aq, op} from '@uwdata/arquero'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}