2b:null 2c:["$","title",null,{"children":"Racial equity map | McKinsey CRC | Observable"}] 31:T843,dashboard = { const svg = d3.select("#map").append("svg"); // d3.select(DOM.svg(width, height)); let projection = geoAlbersUsaPr(); let geoGenerator = d3.geoPath().projection(projection); // Join the FeatureCollection's features array to path elements let u = svg .append("g") .selectAll("path") .data(data.features) .join("path") .attr("d", geoGenerator) .attr("stroke", "#cecece") .attr("stroke-width", 0.3) .attr("fill", scales(column) == null ? "url(#crosshatch)" : scales(column)) // code for on hover .on("touchmove mousemove", function (event, d) { d3.select(event.currentTarget) .attr("stroke", "#575757") .attr("stroke-width", 1.5); // console.log(d.properties.fips); // const active_fips = d.properties.fips; // side_panel(d.properties.fips); }) // code for "off hover" .on("touchend mouseleave", function (event, d) { d3.select(event.currentTarget) .attr("stroke", "#cecece") .attr("stroke-width", "0.3"); // return side_panel(d.properties.fips); }) // code for onclick .on("touch click", function (event, d) { return side_panel(d.properties.fips); }); // code for zooming and panning // =========================================================================== const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); svg.call(zoom); function zoomed(event) { const { transform } = event; u.attr("transform", transform); u.attr("stroke-width", 0.2); } // =========================================================================== // return svg.node(); return html`

Population:	$Hello, World!
Hello, World!

`; }32:[] 2f:{"id":"9a4d3bd64480dd09","slug":null,"title":"Racial equity map","thumbnail":"0f8f0312f46a7135cf044dc9da5c55abf7eb588540c4ee5a6a15e7b84ea070d4","access_level":"public","create_time":"$D2023-06-29T20:20:02.917Z","update_time":"$D2023-07-20T20:31:27.631Z","view_time":null,"first_public_time":"$D2023-07-20T19:37:34.619Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d95a79bbf45d3125","login":"mckinsey-crc","name":"McKinsey CRC","avatar_url":"https://avatars-next.observableusercontent.com/ded2c89bc9b13414aa56ed539b9f78f8baf7bbf429dc5346687403785f4fb3ff","tier":"pro","bio":"Interactive data displays to inform decisions on protecting lives and livelihoods amid the COVID-19 crisis"},"version":1112,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16d1a97215fda001","login":"vivrao9","name":"Vivek Rao","avatar_url":"https://avatars-next.observableusercontent.com/bef3b5fc8c76d305b837832196006da09e14e5ff3812149e979a7f004178f2bf","tier":null,"bio":"I like charts and maps!"}],"members":[{"type":"team","id":"d95a79bbf45d3125","login":"mckinsey-crc","name":"McKinsey CRC","avatar_url":"https://avatars-next.observableusercontent.com/ded2c89bc9b13414aa56ed539b9f78f8baf7bbf429dc5346687403785f4fb3ff","tier":"pro","role":"editor"},{"type":"individual","id":"16d1a97215fda001","login":"vivrao9","name":"Vivek Rao","avatar_url":"https://avatars-next.observableusercontent.com/bef3b5fc8c76d305b837832196006da09e14e5ff3812149e979a7f004178f2bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Racial equity map","cells":[{"id":63,"value":"# Racial equity map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"viewof df = Inputs.file({label: \"File\", accept: [\".geojson\"], required: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"data = df.json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"## Side panel","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":687,"value":"function side_panel(fips) {\n const panel_data = fips == null ? data : fips_filter(fips);\n // document\n // .querySelector(\"#td1\")\n // .append();\n\n return htl.html`\n\n \n \n \n \n\n \n \n \n

Population:	${d3.sum(panel_data.map((d) => d.properties.population_total))}
${population_stripe(fips)}

\n\n\n \n \n \n \n\n \n \n \n

BIPOC %:	${panel_data.map((d) =>\n Math.round(\n (d.properties.population_nonwhite / d.properties.population_total) *\n 100,\n 2\n )\n )}%
${bipoc_spark_histogram(fips)}

\n\n\n \n \n \n \n\n \n \n \n

Income ratio:	${panel_data.map((d) =>\n Number(d.properties.multiplier).toFixed(2)\n )}
${panel__income_ratio(fips)}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"fips_filter = (fips) => {\n return data.features.filter((d) => d.properties.fips === fips);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"population_stripe = (fips) => {\n const strokeCol = (fips_) => {\n return fips_ === fips ? \"#cc0000\" : \"steelblue\";\n };\n\n const strokeWidth = (fips_) => {\n return fips_ === fips ? 5 : 1;\n };\n\n const opacCalc = (fips_) => {\n return fips_ === fips ? 1 : 0.15;\n };\n\n return Plot.plot({\n marks: [\n Plot.tickX(\n data.features.map((d) => d.properties),\n {\n x: \"population_total\",\n stroke: data.features.map((d) => strokeCol(d.properties.fips)),\n strokeWidth: data.features.map((d) => strokeWidth(d.properties.fips)),\n opacity: data.features.map((d) => opacCalc(d.properties.fips))\n }\n )\n ],\n width: 750,\n height: 50\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1060,"value":"panel__income_ratio = (fips) => {\n return Plot.plot({\n y: { grid: true },\n marks: [\n Plot.rectY(\n data.features.map((d) => d.properties),\n Plot.binX({ y: \"count\" }, { x: \"multiplier\" })\n ),\n Plot.ruleY([0])\n ],\n x: { domain: [0, 15], label: \"Income ratio\" },\n width: 750,\n height: 125\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"bipoc_spark_histogram = (fips) => {\n const fillCol = (fips_) => {\n return fips_ === fips ? \"#cc0000\" : \"steelblue\";\n };\n\n return Plot.plot({\n marks: [\n Plot.rectY(\n data.features,\n Plot.binX(\n { y: \"count\" },\n {\n x: data.features.map(\n (d) =>\n d.properties.population_nonwhite / d.properties.population_total\n )\n // fill: data.features.map((d) => fillCol(d.properties.fips))\n }\n )\n ),\n // Plot.ruleY([0]),\n Plot.ruleX({\n x: fips_filter(fips).map(\n (d) =>\n d.properties.population_nonwhite / d.properties.population_total\n )[0],\n strokeOpacity: 1,\n strokeColor: \"#cc0000\",\n height: 600\n })\n ],\n width: 750,\n height: 125\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"panel_test = side_panel(\"06037\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"viewof active_fips = Inputs.select(\n data.features.map((d) => d.properties.fips),\n { label: \"Select one\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"active_fips","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"### Select a column to visualize","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"viewof column = Inputs.select([\"Multiplier\",\n \"Funding amount received\",\n \"Total funding per capita\",\n \"Nonwhite funding per capita\",\n \"Funding deficit\"], {label: \"Select one\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"legends(column)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"function scales(column) {\n if (column === \"Multiplier\") {\n return d => multiplierScale(+d.properties.multiplier);\n } else if (column === \"Funding amount received\") {\n return d => fundingScale(+d.properties.funding_amount);\n } else if (column === \"Total funding per capita\") {\n return d => fundingPerCapScale(+d.properties.funding_per_capita_total);\n } else if (column === \"Nonwhite funding per capita\") {\n return d => fundingPerCapNonwhiteScale(+d.properties.funding_per_capita_nonwhite);\n } else if (column === \"Funding deficit\") {\n return d => deficitScale(+d.properties.fdef_sort_w50);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"function legends(column) {\n if (column === \"Multiplier\") {\n return Legend(multiplierScale, {\n title: \"Income multiplier\",\n tickSize: 0,\n width: 250\n });\n\n // funding amount received\n } else if (column === \"Funding amount received\") {\n return Legend(fundingScale, {\n title: \"Funding amount received\",\n tickSize: 0,\n width: 250\n });\n\n // funding amount received\n } else if (column === \"Total funding per capita\") {\n return Legend(fundingPerCapScale, {\n title: \"Total funding per capita\",\n tickSize: 0,\n width: 250\n });\n\n // non-white funding per capita\n } else if (column === \"Nonwhite funding per capita\") {\n return Legend(fundingPerCapNonwhiteScale, {\n title: \"Nonwhite funding per capita\",\n tickSize: 0,\n width: 250\n });\n\n // funding deficit\n } else if (column === \"Funding deficit\") {\n return Legend(deficitScale, {\n title: \"Funding deficit\",\n tickSize: 0,\n width: 250\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"## Color scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"multiplierScale = d3\n .scaleLog()\n .domain(\n // range from the second smallest values (smallest is zero)\n [\n d3.sort(\n data.features.map((d) => +d.properties.multiplier).filter((d) => d != 0)\n )[0],\n\n // to the largest\n d3.max(data.features.map((d) => +d.properties.multiplier))\n ]\n )\n\n // old function\n // d3.extent(data.features.map(d => +d.properties.multiplier)))\n .range([\"#fef0d9\", \"#990000\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"fundingScale = d3\n .scaleSequentialLog()\n .domain(\n // range from the second smallest values (smallest is zero)\n [\n d3.sort(\n data.features\n .map((d) => +d.properties.funding_amount)\n .filter((d) => d != 0)\n )[0],\n\n // to the largest\n d3.max(data.features.map((d) => +d.properties.funding_amount))\n ]\n )\n\n // old function\n // d3.extent(data.features.map(d => +d.properties.funding_amount)))\n .range([\"#f7fcb9\", \"#2ca25f\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"fundingPerCapScale = d3\n .scaleSequentialLog()\n .domain(\n // range from the second smallest values (smallest is zero)\n [\n d3.sort(\n data.features\n .map((d) => +d.properties.funding_per_capita_total)\n .filter((d) => d != 0)\n )[0],\n\n // to the largest\n d3.max(data.features.map((d) => +d.properties.funding_per_capita_total))\n ]\n )\n\n // old function\n // d3.extent(data.features.map(d => +d.properties.funding_per_capita_total)))\n .range([\"#f7fcb9\", \"#2ca25f\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"fundingPerCapNonwhiteScale = d3\n .scaleSequentialLog()\n .domain(\n // range from the second smallest values (smallest is zero)\n [\n d3.sort(\n data.features\n .map((d) => +d.properties.funding_per_capita_nonwhite)\n .filter((d) => d != 0)\n )[0],\n\n // to the largest\n d3.max(\n data.features.map((d) => +d.properties.funding_per_capita_nonwhite)\n )\n ]\n )\n\n // old function\n // d3.extent(data.features.map(d => +d.properties.funding_per_capita_nonwhite)))\n .range([\"#f7fcb9\", \"#2ca25f\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"fundingDeficitExtent = d3.extent(\n data.features.map((d) => +d.properties.fdef_sort_w50)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"deficitScale = d3\n .scaleDivergingPow()\n .exponent(0.15)\n .domain([fundingDeficitExtent[0], 0, fundingDeficitExtent[1]])\n // .interpolator(d3.interpolatePiYG)\n .range([\"#f1a340\", \"#f7f7f7\", \"#998ec3\"])\n\n// [\n// \"#67001f\",\n// \"#b2182b\",\n// \"#d6604d\",\n// \"#f4a582\",\n// \"#fddbc7\",\n// \"#f7f7f7\",\n// \"#d1e5f0\",\n// \"#92c5de\",\n// \"#4393c3\",\n// \"#2166ac\",\n// \"#053061\"\n// ])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"## Scratch","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":756,"value":"Plot.plot({\n y: { grid: true },\n marks: [\n Plot.rectY(\n data.features.map((d) => d.properties),\n Plot.binX({ y: \"count\" }, { x: \"funding_per_capita_total\" })\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"Plot.plot({\n y: { grid: true },\n marks: [\n Plot.rectY(\n data.features.map((d) => d.properties),\n Plot.binX({ y: \"count\" }, { x: \"multiplier\" })\n ),\n Plot.ruleY([0])\n ],\n x: { domain: [0, 15], label: \"Income ratio\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"## Reading in other things","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"// read in data\n// counties = FileAttachment(\"gz_2010_us_050_00_5m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"height= 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"import {geoAlbersUsaPr} from \"@d3/u-s-map-with-puerto-rico\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":708,"value":"margin = ({\n top: 15,\n bottom: 15,\n left: 10,\n right: 10\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"