31:T505,chart = { const width = 975; const height = 610; const margin = 30; const svg = d3 .create("svg") .attr("viewBox", [-margin, 0, width + margin, height + margin]); // County Fill svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("class", "county") .attr("fill", d => color(data.get(d.id))) .attr("d", path) .append("title"); // State Fill 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); // Tooltip const tooltip = svg.append("g"); svg .selectAll(".county") .on("touchmove mousemove", function(event, d) { tooltip.call( callout, `${format(data.get(d.id))} ${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}` ); tooltip.attr("transform", `translate(${d3.pointer(event, this)})`); d3.select(this) .attr("stroke", "black") .raise(); }) .on("touchend mouseleave", function() { tooltip.call(callout, null); d3.select(this) .attr("stroke", null) .lower(); }); return svg.node(); }32:T68a,{ const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); const brush = vl.selectInterval().resolve('union') .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .zoom(null); const subPlot = (field, note) => vl.layer( vl.markPoint({color: 'black', filled: true}) .params(panzoom, brush) .encode( vl.x().fieldQ(field).title(`${note}`).axis({ format: ',s' }), vl.y().fieldQ('vacancy_rate_excluding_seasonal').title('Vacancy Rate (%)').axis({ format: ',s' }), vl.size().fieldQ('population_2019').scale({range: [5, 1000]}).title("Population (2019)"), vl.color().value('grey').if(brush, vl.color().value('black')), vl.opacity().if(brush, vl.value(0.4)).value(0.1), vl.tooltip(['county', 'state']) ), vl.markLine({type: 'line', color: 'firebrick'}) .transform(vl.loess('vacancy_rate_excluding_seasonal').on(field).as('x', 'y').bandwidth(0.8)) .encode( vl.x().fieldQ('x'), vl.y().fieldQ('y') ) ); return vl.hconcat( subPlot('pop_change_10_to_19', 'Poulation Change (2010 to 2019)').width(200).height(200), subPlot('bachelors_or_higher_25up', 'Bachelors Degree+ (%)').width(200).height(200), subPlot('median_income', 'Median Household Income (2019)').width(200).height(200) ) .data(series) .transform(vl.filter('datum.pop_change_10_to_19 < 60'), vl.filter('datum.unemployment_rate > 1')) .render(); }33:T63c,{ const panzoom = vl.selectInterval().bind('scales') .translate('[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!') .zoom('wheel!'); const brush = vl.selectInterval().resolve('union') .on('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .translate('[mousedown[event.shiftKey], window:mouseup] > window:mousemove!') .zoom(null); const subPlot = (field, note) => vl.layer( vl.markPoint({color: 'black', filled: true}) .params(panzoom, brush) .encode( vl.x().fieldQ(field).title(`${note}`).axis({ format: ',s' }), vl.y().fieldQ('vacancy_rate_excluding_seasonal').title('Vacancy Rate (%)').axis({ format: ',s' }), vl.size().fieldQ('population_2019').scale({range: [5, 1000]}).title("Population (2019)"), vl.color().value('grey').if(brush, vl.color().value('black')), vl.opacity().if(brush, vl.value(0.4)).value(0.1), vl.tooltip(['county', 'state']) ), vl.markLine({type: 'line', color: 'firebrick'}) .transform(vl.loess('vacancy_rate_excluding_seasonal').on(field).as('x', 'y').bandwidth(0.6)) .encode( vl.x().fieldQ('x'), vl.y().fieldQ('y') ) ); return vl.hconcat( subPlot('unemployment_rate', 'Unemployment Rate (2019)').width(200).height(200), subPlot('dem_margin', 'Dem Margin (2020)').width(200).height(200), subPlot('total_housing_units_per_person', 'Housing Units / Person').width(200).height(200) ) .data(series) .transform(vl.filter('datum.unemployment_rate > 1')) .render(); }34:[{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1622419642514.583,"size":795407},{"id":"320294f70a30df809af1c69d2274c5bdab2ded575967c78a6868743132451256c06772084439770d7feacc1986d074de7f16eb3bdb1515ca3afc9dd23843236d","href":"https://static.observableusercontent.com/files/320294f70a30df809af1c69d2274c5bdab2ded575967c78a6868743132451256c06772084439770d7feacc1986d074de7f16eb3bdb1515ca3afc9dd23843236d","name":"vacancy - full_data6@1.csv","type":"text/csv","lastModified":1623002350346.215,"size":856544},{"id":"76f2d27dd812cd54145fe98f6c446baad930f6cd95352bf5854c0c57719f6ee8384387bee40171e856495d3a29252e5d07961bc8786bb4ee27a731ccb19271cc","href":"https://static.observableusercontent.com/files/76f2d27dd812cd54145fe98f6c446baad930f6cd95352bf5854c0c57719f6ee8384387bee40171e856495d3a29252e5d07961bc8786bb4ee27a731ccb19271cc","name":"vacancy - full_data.csv","type":"text/csv","lastModified":1622484515500.173,"size":520789},{"id":"716eb6f71f48f87e3f104773d4264e8fbc4437859af22d89a0c9e424cf9610caf34986ea31575f73c8831654ce675a5e6ddb43d93572faf30d50663b2859ccbe","href":"https://static.observableusercontent.com/files/716eb6f71f48f87e3f104773d4264e8fbc4437859af22d89a0c9e424cf9610caf34986ea31575f73c8831654ce675a5e6ddb43d93572faf30d50663b2859ccbe","name":"vacancy - full_data2.csv","type":"text/csv","lastModified":1622603714656.503,"size":660012},{"id":"f82b1628db1d6064c84912739e8065c88d25b9a311cf5f5a08aefa0dcf9b1341b6278251a4e23ef7a274f3119883358f51a60f7e090022c9b2c1f343d2eaeabd","href":"https://static.observableusercontent.com/files/f82b1628db1d6064c84912739e8065c88d25b9a311cf5f5a08aefa0dcf9b1341b6278251a4e23ef7a274f3119883358f51a60f7e090022c9b2c1f343d2eaeabd","name":"vacancy - full_data3.csv","type":"text/csv","lastModified":1622682978696.38,"size":671937},{"id":"816feb64bf6c2097a87046d23b7f82489f664487bb2a473a02f33b4574475d2815ec082daa257563425c57e3bf528395851f6ddc10a26545c6792f8ce3943f9f","href":"https://static.observableusercontent.com/files/816feb64bf6c2097a87046d23b7f82489f664487bb2a473a02f33b4574475d2815ec082daa257563425c57e3bf528395851f6ddc10a26545c6792f8ce3943f9f","name":"vacancy - full_data5.csv","type":"text/csv","lastModified":1622686469005.785,"size":686281},{"id":"816feb64bf6c2097a87046d23b7f82489f664487bb2a473a02f33b4574475d2815ec082daa257563425c57e3bf528395851f6ddc10a26545c6792f8ce3943f9f","href":"https://static.observableusercontent.com/files/816feb64bf6c2097a87046d23b7f82489f664487bb2a473a02f33b4574475d2815ec082daa257563425c57e3bf528395851f6ddc10a26545c6792f8ce3943f9f","name":"vacancy - full_data5@1.csv","type":"text/csv","lastModified":1622686477737.928,"size":686281},{"id":"320294f70a30df809af1c69d2274c5bdab2ded575967c78a6868743132451256c06772084439770d7feacc1986d074de7f16eb3bdb1515ca3afc9dd23843236d","href":"https://static.observableusercontent.com/files/320294f70a30df809af1c69d2274c5bdab2ded575967c78a6868743132451256c06772084439770d7feacc1986d074de7f16eb3bdb1515ca3afc9dd23843236d","name":"vacancy - full_data6.csv","type":"text/csv","lastModified":1623002340065.173,"size":856544}] 2f:{"title":"Vacancy Rate by US County","cells":[{"id":0,"value":"md`# Vacancy Rate by US County\n\nACS 5-year estimate, 2019, Tables [B25004](https://data.census.gov/cedsci/table?g=0100000US.050000_0400000US08_0500000US08001,08031&tid=ACSDT5Y2019.B25004) & [B25001](https://data.census.gov/cedsci/table?g=0100000US.050000_0400000US08_0500000US08001,08031&tid=ACSDT5Y2019.B25004), Excludes seasonal vacancy, Unemployment Rate data from [BLS](https://www.bls.gov/lau/#tables).` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"legend({color, title: data.title, width: 260, height: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"md`\n

\n### Predictors of Vacancy Rate\n\n_Click-drag and scroll to pan and zoom. Hold the shift key and click-drag for brushing._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"md`\n

\n### More Variables...`","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"md` \n

\n### Code and Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = Object.assign(new Map(d3.csvParse(await FileAttachment(\"vacancy - full_data6@1.csv\").text(), ({id, vacancy_rate_excluding_seasonal}) => [id, +vacancy_rate_excluding_seasonal])), {title: \"Vacancy Rate (%)\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"series = Object.assign(d3.csvParse(await FileAttachment(\"vacancy - full_data6.csv\").text()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"color = d3.scaleQuantize([2, 34], d3.schemeReds[8])","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"format = d => `${d}%`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g\n .style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"12px sans-serif\");\n\n const path = g.selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"opacity\", \"0.9\")\n .attr(\"stroke\", \"black\");\n\n const text = g.selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text => text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => i ? null : \"bold\")\n .text(d => d));\n\n const {x, y, width: w, height: h} = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\"d\", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"import {vl} from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}