2f:T50a,// finalmap = { // const container = DOM.element('div'); // container.style.display = 'flex'; // container.appendChild(await chart); // container.appendChild(await chart1); // container.appendChild(await chart2); // return container; // } finalmap = { const container = document.createElement('div'); container.style.display = 'inline-block'; container.style.margin = 'auto'; container.style.justifyContent = 'center'; // center the third chart horizontally container.style.alignItems = 'center'; // center the third chart vertically container.style.width = '1000px'; // set the container width container.style.textAlign = 'center'; // aligns the 3rd map to the center container.style.height = '500px'; const chartElement = await chart; chartElement.setAttribute('width', '500px'); chartElement.setAttribute('height', '500px'); container.appendChild(chartElement); const chart1Element = await chart1; chart1Element.setAttribute('width', '500px'); chart1Element.setAttribute('height', '500px'); container.appendChild(chart1Element); const chart2Element = await chart2; chart2Element.setAttribute('width', '500px'); chart2Element.setAttribute('height', '500px'); container.appendChild(chart2Element); return container; }30:Ta38,chart = { const svg = d3.create("svg") .attr("viewBox", [-25, 10, 1100, 650]); yield svg.node(); svg.append("g") .attr("transform", "translate(610, 20)") .append(() => unemp_rate_legend({ state_unemp_color, title: "State Unemployment Rate (%)", 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 state_unemp_color(unemp_rate.get(d.properties.name));}) .attr("d", path) .attr("stroke", "#444") .append("title") .text(d => `${d.properties.name} ${unemp_rate.get(d.properties.name)}`); 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("state_unemp_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(); }31:Ta31,chart1 = { const svg = d3.create("svg") .attr("viewBox", [-25, 10, 1100, 650]); yield svg.node(); svg.append("g") .attr("transform", "translate(610, 20)") .append(() => unemp_count_legend({ unemp_count_color, title: "Unemployment Count (Numbers)", width: 300, ticks: 10, tickFormat: ".1f" }) );; svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", function(d) { return unemp_count_color(unemp_count.get(d.properties.name));}) .attr("d", path) .attr("stroke", "#444") .append("title") .text(d => `${d.properties.name} ${unemp_count.get(d.properties.name)}`); 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:Ta30,chart2 = { const svg = d3.create("svg") .attr("viewBox", [-25, 10, 1100, 650]); yield svg.node(); svg.append("g") .attr("transform", "translate(610, 20)") .append(() => unemp_risk_legend({ unemp_risk_color, title: "Occupation Unemployment Risk (%)", width: 300, ticks: 10, tickFormat: ".03f" }) ); svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", function(d) { return unemp_risk_color(unemp_risk.get(d.properties.name));}) .attr("d", path) .attr("stroke", "#444") .append("title") .text(d => `${d.properties.name} ${unemp_risk.get(d.properties.name)}`); 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(); }33:T171c,// namemap = new Map(states.features.map(d => [d.properties.name, d.id])) function unemp_rate_legend({ state_unemp_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(state_unemp_color, n = 256) { const canvas = DOM.canvas(n, 1); const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = state_unemp_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", "flex") ; ; let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (state_unemp_color.interpolate) { const n = Math.min(state_unemp_color.domain().length, state_unemp_color.range().length); x = state_unemp_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( state_unemp_color.copy().domain(d3.quantize(d3.interpolate(0, 1), n)) ).toDataURL() ); } // Sequential else if (state_unemp_color.interpolator) { x = Object.assign( state_unemp_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(state_unemp_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(state_unemp_color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (state_unemp_color.invertExtent) { const thresholds = state_unemp_color.thresholds ? state_unemp_color.thresholds() // scaleQuantize : state_unemp_color.quantiles ? state_unemp_color.quantiles() // scaleQuantile : state_unemp_color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3 .scaleLinear() .domain([1, state_unemp_color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(state_unemp_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(state_unemp_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(state_unemp_color.domain()) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(state_unemp_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", state_unemp_color) .attr("opacity", opacity) ; svg .append("g") .selectAll("rect") .data(state_unemp_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) .selectAll('.tick').selectAll('text') .style('font-size', '15px'); 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") .attr("font-size", 16) .text(title) ) .selectAll('.tick').selectAll('text') .style('font-size', '15px'); return svg.node(); }34:T167a,function unemp_count_legend({ unemp_count_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(unemp_count_color, n = 256) { const canvas = DOM.canvas(n, 1); const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = unemp_count_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 (unemp_count_color.interpolate) { const n = Math.min(unemp_count_color.domain().length, unemp_count_color.range().length); x = unemp_count_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( unemp_count_color.copy().domain(d3.quantize(d3.interpolate(0, 1), n)) ).toDataURL() ); } // Sequential else if (unemp_count_color.interpolator) { x = Object.assign( unemp_count_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(unemp_count_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(unemp_count_color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (unemp_count_color.invertExtent) { const thresholds = unemp_count_color.thresholds ? unemp_count_color.thresholds() // scaleQuantize : unemp_count_color.quantiles ? unemp_count_color.quantiles() // scaleQuantile : unemp_count_color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3 .scaleLinear() .domain([1, unemp_count_color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(unemp_count_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(unemp_count_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(unemp_count_color.domain()) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(unemp_count_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", unemp_count_color) .attr("opacity", opacity); svg .append("g") .selectAll("rect") .data(state_unemp_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("font-size", 16) .attr("class", "title") .text(title) ) .selectAll('.tick').selectAll('text') .style('font-size', '15px'); return svg.node(); }35:T1692,function unemp_risk_legend({ unemp_risk_color, backgroundColour = "white", opacity = 1, title, tickSize = 12, width = 320, // 320 height = 50, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = ticks, tickFormat, tickValues } = {}) { function ramp(unemp_risk_color, n = 256) { const canvas = DOM.canvas(n, 1); const context = canvas.getContext("2d"); for (let i = 0; i < n; ++i) { context.fillStyle = unemp_risk_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 (unemp_risk_color.interpolate) { const n = Math.min(unemp_risk_color.domain().length, unemp_risk_color.range().length); x = unemp_risk_color .copy() .rangeRound( d3.quantize(d3.interpolate(marginLeft, width - marginRight), n) // n was used here ); 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( unemp_risk_color.copy().domain(d3.quantize(d3.interpolate(0, 1), n)) // n was used here ).toDataURL() ); } // Sequential else if (unemp_risk_color.interpolator) { x = Object.assign( unemp_risk_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(unemp_risk_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(unemp_risk_color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (unemp_risk_color.invertExtent) { const thresholds = unemp_risk_color.thresholds ? unemp_risk_color.thresholds() // scaleQuantize : unemp_risk_color.quantiles ? unemp_risk_color.quantiles() // scaleQuantile : unemp_risk_color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3 .scaleLinear() .domain([1, unemp_risk_color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(unemp_risk_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(unemp_risk_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(unemp_risk_color.domain()) .rangeRound([marginLeft, width - marginRight]); svg .append("g") .selectAll("rect") .data(unemp_risk_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", unemp_risk_color) .attr("opacity", opacity); svg .append("g") .selectAll("rect") .data(unemp_risk_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") .attr("font-size", 16) .text(title) ) .selectAll('.tick').selectAll('text') .style('font-size', '14px'); return svg.node(); }36:[{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1674070567063.876,"size":795407},{"id":"88050ea3eff82cf03167dd5a5d9332f8e3e1d0372b9ccc4297e1a5aadc188c5f488c6d7b8e12c6051f1a0cbd67f1b4babadaa6948483577729d0df0a95adf661","href":"https://static.observableusercontent.com/files/88050ea3eff82cf03167dd5a5d9332f8e3e1d0372b9ccc4297e1a5aadc188c5f488c6d7b8e12c6051f1a0cbd67f1b4babadaa6948483577729d0df0a95adf661","name":"unemp.csv","type":"text/csv","lastModified":1674070745021.415,"size":518642},{"id":"0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","href":"https://static.observableusercontent.com/files/0d8fa65dce2397df03b75fb4fabbc7d79e2794ef64f018bdd1dd43460bc3795743e69dbf1d7456791cbef424e272d5cd33f49e3e445ce78f9a53ef5e5755e16e","name":"states-albers-10m.json","type":"application/json","lastModified":1674153643413.245,"size":82031},{"id":"83ae867ad7af36bc8e59a1a45ab7e2eb65b40199859532d65cbbe08dcf59c218f2822496c3a99d2d5c4122d552d6a87cab4d766a65dd5683eed6a80bc328202a","href":"https://static.observableusercontent.com/files/83ae867ad7af36bc8e59a1a45ab7e2eb65b40199859532d65cbbe08dcf59c218f2822496c3a99d2d5c4122d552d6a87cab4d766a65dd5683eed6a80bc328202a","name":"df.csv","type":"text/csv","lastModified":1682619301838.457,"size":12743212}] 2d:{"title":"Unemployment Rate in the United States","cells":[{"id":0,"value":"md`# Unemployment Rate in the United States`","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"

Suggestions

\n1. The font size makes it difficult to read the color axis labels.\n2. The color axis limits for the unemployment risk map are too restrictive on the high end; they deafen some of the variability across states.\n3. Align the 3rd map to the center.\n4. State borders should be darker;\n5. Include a slider to change the upper limit of the color axis\n6. include more months and more years","pinned":false,"hidden":false,"mode":"md"},{"id":1171,"value":"

Sliders

","pinned":false,"hidden":false,"mode":"md"},{"id":684,"value":"viewof yearSelect = Inputs.range(d3.extent(data, d => d.year), \n {label: \"Year:\", step: 1, value: d3.max(data, d => d.year)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":697,"value":"viewof monthSelect = Inputs.range(d3.extent(data, d => d.month), \n {label: \"Month:\", step: 1, value: d3.max(data, d => d.month)})","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"viewof occupation = Inputs.select(data.map(d => d.occupation), {label: \"Occupation\", sort: true, unique: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1175,"value":"

Maps

","pinned":false,"hidden":false,"mode":"md"},{"id":824,"value":"

State Unemployment Rate

","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":826,"value":"

Occupation Unemployment

","pinned":false,"hidden":false,"mode":"md"},{"id":833,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"

Occupation Unemployment Risk

","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"

Data Import

","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"data = FileAttachment(\"df.csv\").csv().then(data => data.filter(d => d.Rate !== \"\").map(d => ({\n state: d.state,\n occupation: d.occupation,\n month: +d.month,\n year: +d.year,\n risk: +d.UnemploymentRisk,\n rate: +d.UnemploymentRate,\n count: +d.UnemploymentCount\n})))","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":272,"value":"// years = [...new Set([...data.values(\"year\")])]\ndata_year = data.filter(d => d.year === yearSelect)","pinned":false,"hidden":false,"mode":"ojs"},{"id":251,"value":"// months = [...new Set([...data.values(\"month\")])]\ndata_month = data_year.filter(d => d.month === monthSelect)","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"// occupations = [...new Set([...data.values(\"Occupation\")])]\noccupations = data_month.filter(d => d.occupation === occupation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"

Data Mapping

","pinned":false,"hidden":false,"mode":"md"},{"id":749,"value":"unemp_rate = new Map(occupations.map(({state, rate}) => [state, rate]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"unemp_count = new Map(occupations.map(({state, count}) => [state, count]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"unemp_risk = new Map(occupations.map(({state, risk}) => [state, risk]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"

Legends Definition

","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":901,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"

Color definitions

","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"state_unemp_color = d3.scaleQuantize([2, 6], d3.schemeBlues[6]) //adjust the distribution on the legend","pinned":false,"hidden":false,"mode":"ojs"},{"id":865,"value":"unemp_count_color = d3.scaleQuantize([0, 3000], d3.schemePurples[9])","pinned":false,"hidden":false,"mode":"ojs"},{"id":908,"value":"unemp_risk_color = d3.scaleQuantize([0.0001, 0.001], d3.schemeOranges[9]) // changes in the legend size","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"

Map Requisites

","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"// states = topojson.feature(us, us.objects.states, (a, b) => a !== b) //previously used topojson.mesh\nstates = topojson.mesh(us, us.objects.states)","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":208,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"height = 800","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":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"import { rangeSlider as rangeSlider } from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":575,"value":"import {slider as slide} from \"@lorenries/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"import {try_it} from \"@observablehq/notes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"

Tried Methods

","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"// year = date.slice(0,4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":375,"value":"// month = date.slice(5,7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"// startmonth = sdate.slice(5,7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"// duration = d3.timeDays(startdate, enddate)","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"// data = aq.fromCSV(await FileAttachment(\"unemp.csv\").text(), d3.autoType)\n// data = d3.csvParse(await FileAttachment(\"unemp.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"// formatDate = d3.timeFormat(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":563,"value":"// month = date.slice(5,7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"// startdate = d3.timeDay(new Date(2018, 0, 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"// startyear = sdate.slice(0,4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"// enddate = d3.timeDay(new Date(2020, 11, 31))","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"// edate = formatDate(d3.timeDay.offset(startdate, slider[1] + 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"// endmonth = edate.slice(5,7)","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"// endyear = edate.slice(0,4)","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"// viewof slider = slide({\n// min: 0,\n// max: d3.timeDay.count(startdate, duration[duration.length - 1]),\n// step: 1,\n// format: date => formatDate(d3.timeDay.offset(startdate, date)),\n// title: 'Choose the date:'\n// })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"// sdate = formatDate(d3.timeDay.offset(startdate, slider[0] + 1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"// viewof nthDay = Inputs.range([0, duration], {\n// step: 1,\n// label: \"Choose a date\"\n// })","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"// timeScale = d3\n// .scaleTime()\n// .domain([\n// d3.utcParse(\"%Y-%m-%d\")(begindate),\n// d3.utcParse(\"%Y-%m-%d\")(enddate)\n// ])\n// .range([0, duration])","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"// Chart of dates\n\n// viewof datePicked = Inputs.text({\n// type: \"date\",\n// label: html`Chart Date`,\n// value: begindate\n// })\n\n// Show the selected date\n// date = d3.utcFormat(\"%Y-%m-%d\")(timeScale.invert(nthDay)) // Convert from nth Day to html valid date YYYY-mm-dd","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":307,"value":"// begindate = \"2018-01-01\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"// duration = d3.timeDay.count(\n// d3.utcParse(\"%Y-%m-%d\")(start),\n// d3.utcParse(\"%Y-%m-%d\")(end)\n// )","pinned":false,"hidden":false,"mode":"ojs"},{"id":309,"value":"// enddate = \"2020-12-31\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1116,"value":"// html`

\n// ${chart}\n// ${chart1}\n// ${chart2}\n//

`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}