2b:null 2c:["$","title",null,{"children":"Redlining in St. Paul | Daniel Lim | Observable"}] 31:T54b,surfaceTemperature = { // we create an SVG with the width and height specified const svg = d3.create("svg") .attr("width", width) .attr("height", height) var title = svg.append('title'); //screen reader will read aloud title (must be first child of svg!) title.text("Choropleth map of surface temperature in Saint Paul neighborhoods. Neighborhoods are colored on a sequential scale where the darkest red corresponds to the highest surface temperature and the lighest red corresponds to the lowest surface temperature."); svg.append("g") .selectAll("path") .data(neighborhoods.features) .join("path") // This line renders our population data .attr("fill", d => surfaceTempColor(surfaceTempByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))) .attr("d", path) .append("title") .text(d => `Surface Temperature is ${d3.format(".1f")(surfaceTempByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))} °F`); // this part renders the census borders over top svg.append("path") .datum(neighborhoods) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }32:T483,redlined_and_surfaceTemperature = { // we create an SVG with the width and height specified const svg = d3.create("svg") .attr("width", width) .attr("height", height) svg.append("g") .selectAll("path") .data(neighborhoods.features) .join("path") // This line renders our population data .attr("fill", d => surfaceTempColor(surfaceTempByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))) .attr("d", path) .append("title") .text(d => `Surface Temperature (°F): ${d3.format(".1f")(surfaceTempByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`); // this part renders the redlining borders over top svg.append("g") .selectAll("path") .data(redlinedNeighborhoods.features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none") .attr("stroke-linejoin", "round") .attr("stroke-width", 2) .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }33:T454,redlining_airQuality = { // we create an SVG with the width and height specified const svg = d3.create("svg") .attr("width", width) .attr("height", height) svg.append("g") .selectAll("path") .data(neighborhoods.features) .join("path") // This line renders our population data .attr("fill", d => airQualityColor(airQualityByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))) .attr("d", path) .append("title") .text(d => `Air Quality Score: ${airQualityByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))}`); // this part renders the census borders over top svg.append("g") .selectAll("path") .data(redlinedNeighborhoods.features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none") .attr("stroke-width", "2px") .attr("stroke-linejoin", "round") .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }34:T450,redline_and_income = { // we create an SVG with the width and height specified const svg = d3.create("svg") .attr("width", width) .attr("height", height) svg.append("g") .selectAll("path") .data(neighborhoods.features) .join("path") // This line renders our population data .attr("fill", d => incomeColor(incomeByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))) .attr("d", path) .append("title") .text(d => `Median Household Income ($): ${incomeByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))}`); // this part renders the redlining borders over top svg.append("g") .selectAll("path") .data(redlinedNeighborhoods.features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none") .attr("stroke-width", "2px") .attr("stroke-linejoin", "round") .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }35:T46d,redlined_and_whitePop = { // we create an SVG with the width and height specified const svg = d3.create("svg") .attr("width", width) .attr("height", height) svg.append("g") .selectAll("path") .data(neighborhoods.features) .join("path") // This line renders our population data .attr("fill", d => whitePopColor(whitePopByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))) .attr("d", path) .append("title") .text(d => `White Population (%): ${d3.format(".1f")(whitePopByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`); // this part renders the redlining borders over top svg.append("g") .selectAll("path") .data(redlinedNeighborhoods.features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none") .attr("stroke-width", "2px") .attr("stroke-linejoin", "round") .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }36:T461,redlined_and_treeCover = { // we create an SVG with the width and height specified const svg = d3.create("svg") .attr("width", width) .attr("height", height) svg.append("g") .selectAll("path") .data(neighborhoods.features) .join("path") // This line renders our population data .attr("fill", d => treeCoverColor(treeCoverByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))) .attr("d", path) .append("title") .text(d => `Tree Cover (%): ${d3.format(".1f")(treeCoverByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`); // this part renders the redlining borders over top svg.append("g") .selectAll("path") .data(redlinedNeighborhoods.features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none") .attr("stroke-width", "2px") .attr("stroke-linejoin", "round") .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }37:T489,redlined_and_imperviousSurfaceArea = { // we create an SVG with the width and height specified const svg = d3.create("svg") .attr("width", width) .attr("height", height) svg.append("g") .selectAll("path") .data(neighborhoods.features) .join("path") // This line renders our population data .attr("fill", d => imperviousAreaColor(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))) .attr("d", path) .append("title") .text(d => `Impervious Surface Area (%): ${d3.format(".1f")(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`); // this part renders the redlining borders over top svg.append("g") .selectAll("path") .data(redlinedNeighborhoods.features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.holc_grade == "D" ? "white" : "none") .attr("stroke-width", "2px") .attr("stroke-linejoin", "round") .attr("d", path); // we need to return a DOM element. // the .node() function returns the DOM element corresponding to the d3 selection. return svg.node(); }38:[{"id":"90ae9e32b24fe36aef8103cf4851169e689e596ce49d06a4f81d526f6c474831092a7e054ec35d5aaff2a33df1b0373341ce47d6f2e1a52dff4ed9ef14c79c38","href":"https://static.observableusercontent.com/files/90ae9e32b24fe36aef8103cf4851169e689e596ce49d06a4f81d526f6c474831092a7e054ec35d5aaff2a33df1b0373341ce47d6f2e1a52dff4ed9ef14c79c38","name":"a9_final.geojson","type":"application/geo+json","lastModified":1639646321292.516,"size":371155},{"id":"4117a13d08d1002c933f151f5fb66bc0460c25b7444e462617e3cb73db13e62f40fabc9d471f9eee499d121d128ffefd856bf17864e88da52b3732025734f5fb","href":"https://static.observableusercontent.com/files/4117a13d08d1002c933f151f5fb66bc0460c25b7444e462617e3cb73db13e62f40fabc9d471f9eee499d121d128ffefd856bf17864e88da52b3732025734f5fb","name":"cartodb-query.json","type":"application/json","lastModified":1639646321292.516,"size":59760},{"id":"8161672a9182b96552432caf0e46476ddc299edd54d010d6a78e6abfdd3c2888ec831ef7a21cd3d55384d54b9cfb78895f902f09547eba89e700db7e97aea6bd","href":"https://static.observableusercontent.com/files/8161672a9182b96552432caf0e46476ddc299edd54d010d6a78e6abfdd3c2888ec831ef7a21cd3d55384d54b9cfb78895f902f09547eba89e700db7e97aea6bd","name":"merged_and_cleaned.csv","type":"text/csv","lastModified":1639646321292.516,"size":756168}] 2f:{"id":"94c20658bf7f3ffd","slug":"redlining-in-st-paul","title":"Redlining in St. Paul","thumbnail":"68c829c66f13bdd8c34038422d5605d90d612b505d20532cc63a4b625783fe65","access_level":"public","create_time":"$D2021-12-16T09:18:41.292Z","update_time":"$D2021-12-16T11:21:33.610Z","view_time":null,"first_public_time":"$D2021-12-16T09:19:11.440Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"6478918e57d6637d","login":"9a849ed5a351d187","name":"Daniel Lim","avatar_url":"https://avatars-next.observableusercontent.com/75dc58e0e8a6b07fae86c44f35e1aa9cab125c48c47b80a56e3bc013b06e5cf8","tier":"starter_2024"},"version":1251,"publish_version":1251,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a849ed5a351d187","login":"9a849ed5a351d187","name":"Daniel Lim","avatar_url":"https://avatars-next.observableusercontent.com/75dc58e0e8a6b07fae86c44f35e1aa9cab125c48c47b80a56e3bc013b06e5cf8","tier":null}],"members":[{"type":"individual","id":"9a849ed5a351d187","login":"9a849ed5a351d187","name":"Daniel Lim","avatar_url":"https://avatars-next.observableusercontent.com/75dc58e0e8a6b07fae86c44f35e1aa9cab125c48c47b80a56e3bc013b06e5cf8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Redlining in St. Paul","cells":[{"id":0,"value":"# Redlining in St. Paul","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":867,"value":"## Redlined Neighborhoods","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":874,"value":"redlined = {\n \n // we create an SVG with the width and height specified\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(neighborhoods.features)\n .join(\"path\")\n // This line renders our population data\n .attr(\"fill\", \"black\")\n .attr(\"d\", path);\n \n // this part renders the redlining borders over top\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(redlinedNeighborhoods.features)\n .join(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", d => redliningColor(d.properties.holc_grade))\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-width\", 2)\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `HOLC Grade: ${d.properties.holc_grade}`);\n // we need to return a DOM element.\n // the .node() function returns the DOM element corresponding to the d3 selection.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":993,"value":"legend({\n title: \"HOLC Grade\",\n color: d3\n .scaleOrdinal()\n .range([\"#228B22\", \"#FFE733\" , \"#FF8C01\", \"#ED2938\"]) \n .domain(redlinedNeighborhoods.features.map(d => d.properties.holc_grade))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"## Surface Temperature","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":135,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":759,"value":"legend({\n color: surfaceTempColor, width: width - 20, tickFormat: \",d\", ticks: 7,\n title: \"Surface Temperature (°F)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":729,"value":"## Redlining and Surface Temperature","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":774,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":946,"value":"legend({\n color: surfaceTempColor, width: width - 20, tickFormat: \",d\", ticks: 7,\n title: \"Surface Temperature (°F)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":607,"value":"## Air Quality","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":578,"value":"airQuality = {\n \n // we create an SVG with the width and height specified\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(neighborhoods.features)\n .join(\"path\")\n // This line renders our population data\n .attr(\"fill\", d => airQualityColor(airQualityByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `Air Quality Score: ${airQualityByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))}`);\n\n // this part renders the census borders over top\n svg.append(\"path\")\n .datum(neighborhoods)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n // we need to return a DOM element.\n // the .node() function returns the DOM element corresponding to the d3 selection.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":640,"value":"legend({\n color: airQualityColor, width: width - 20, tickFormat: \",d\", ticks: 7,\n title: \"Air Quality (MCPA Rating 0-5)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"## Income","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":484,"value":"Income = {\n \n // we create an SVG with the width and height specified\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(neighborhoods.features)\n .join(\"path\")\n // This line renders our population data\n .attr(\"fill\", d => incomeColor(incomeByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `Median Household Income ($): ${incomeByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))}`);\n\n // this part renders the census borders over top\n svg.append(\"path\")\n .datum(neighborhoods)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n // we need to return a DOM element.\n // the .node() function returns the DOM element corresponding to the d3 selection.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":534,"value":"legend({\n color: incomeColor, width: width - 20, tickFormat: \",d\", ticks: 7,\n title: \"Median Household Income ($)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1080,"value":"## Redlining and Income","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1111,"value":"html `

\n Income\n White\n Tree\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"## White Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":565,"value":"whitePopulation = {\n \n // we create an SVG with the width and height specified\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(neighborhoods.features)\n .join(\"path\")\n // This line renders our population data\n .attr(\"fill\", d => whitePopColor(whitePopByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `White Population (%): ${d3.format(\".1f\")(whitePopByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);\n\n // this part renders the census borders over top\n svg.append(\"path\")\n .datum(neighborhoods)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n // we need to return a DOM element.\n // the .node() function returns the DOM element corresponding to the d3 selection.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":573,"value":"legend({\n color: whitePopColor, width: width - 20, tickFormat: \",d\", ticks: 7,\n title: \"White Population (%)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"## Redlining and White Population","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"## Tree Coverage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":650,"value":"treeCover = {\n \n // we create an SVG with the width and height specified\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(neighborhoods.features)\n .join(\"path\")\n // This line renders our population data\n .attr(\"fill\", d => treeCoverColor(treeCoverByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `Tree Cover (%): ${d3.format(\".1f\")(treeCoverByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);\n\n // this part renders the census borders over top\n svg.append(\"path\")\n .datum(neighborhoods)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n // we need to return a DOM element.\n // the .node() function returns the DOM element corresponding to the d3 selection.\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":723,"value":"legend({\n color: treeCoverColor, width: width - 20, tickFormat: \",d\", ticks: 7,\n title: \"Tree Coverage (%)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1093,"value":"## Redlining and Tree Coverage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1099,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":684,"value":"## Impervious Surface Area","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":690,"value":"imperviousSurfaceArea = {\n \n // we create an SVG with the width and height specified\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(neighborhoods.features)\n .join(\"path\")\n // This line renders our population data\n .attr(\"fill\", d => imperviousAreaColor(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, ''))))\n .attr(\"d\", path)\n .append(\"title\")\n .text(d => `Impervious Surface Area (%): ${d3.format(\".1f\")(imperviousAreaByNeighborhood.get(d.properties.TRACTCE.replace(/^0+/, '')))}`);\n\n // this part renders the census borders over top\n svg.append(\"path\")\n .datum(neighborhoods)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n // we need to return a DOM element.\n // the .node() function returns the DOM element corresponding to the d3 selection.\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":726,"value":"legend({\n color: imperviousAreaColor, width: width - 20, tickFormat: \",d\", ticks: 7,\n title: \"Impervious Surface Area (%)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1103,"value":"## Redlining and Impervious Surface Area ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1107,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1216,"value":"bi_variate = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, 975, 610]);\n\n svg.append(legend)\n .attr(\"transform\", \"translate(870,450)\");\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(topojson.feature(neighborhoods.features)\n .join(\"path\")\n .attr(\"fill\", d => color(data.get(d.id)))\n .attr(\"d\", path)\n// .append(\"title\")\n// .text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}\n// ${format(data.get(d.id))}`);\n\n svg.append(\"path\")\n .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1235,"value":"test = {\n let rows = allVars.map(row => [String(d3.format(\"\")(row[\"TRACTCE (a9 final.geojson1)\"])), Number((row[\"_Median (A9 Final.Geojson1)\"]-273.15)*(9/5)+32), Number(row[\"MCPA rating (Pollution Data - Sheet1.csv1)\"])])\n return new Map(rows)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1218,"value":"surfaceTemp_AirQual = Object.assign(new Map(neighborhoods.features.properties), ({TRACTCE, _Median (A9 Final.Geojson1), [\"MCPA rating (Pollution Data - Sheet1.csv1)\"]}) => [[\"TRACTCE\"], [+[\"_Median (A9 Final.Geojson1)\"], +[\"MCPA rating (Pollution Data - Sheet1.csv1)\"]]])), {title: [\"Surface Temperature\", \"Air Quality\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":580,"value":"## Important Commands","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":315,"value":"neighborhoods.features[1].properties.TRACTCE.replace(/^0+/, '')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"d3.format(\".1f\")(surfaceTempByNeighborhood.get(\"980000\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"surfaceTempByNeighborhood.get(neighborhoods.features[11].properties.TRACTCE.slice(1))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1052,"value":"merged_data = FileAttachment(\"merged_and_cleaned.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"#### Geographic Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":286,"value":"neighborhoods = FileAttachment(\"a9_final.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"redlinedNeighborhoods = FileAttachment(\"cartodb-query.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":149,"value":"#### Variable Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":937,"value":"##### NOTE: allVars is the merged dataset, and the other allVars with numbers are filtered for each visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":183,"value":"allVars = FileAttachment(\"merged_and_cleaned.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":894,"value":"allVars5 = allVars.filter(function(d){ return d[\"_Median (A9 Final.Geojson1)\"] != 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":901,"value":"allVars6 = allVars.filter(function(d){ return d[\"Median Hou (A9 Final.Geojson1)\"] != 0 && d[\"Median Hou (A9 Final.Geojson1)\"] != -666666666})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":630,"value":"allVars2 = allVars.filter(function(d){ return d[\"MCPA rating (Pollution Data - Sheet1.csv1)\"] != 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":668,"value":"allVars3 = allVars.filter(function(d){ return d[\"Percent tree cover\"] != 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":699,"value":"allVars4 = allVars.filter(function(d){ return d[\"Percent impervious area\"] != 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"surfaceTempByNeighborhood = {\n let rows = allVars5.map(row => [String(d3.format(\"\")(row[\"TRACTCE (a9 final.geojson1)\"])), Number((row[\"_Median (A9 Final.Geojson1)\"]-273.15)*(9/5)+32)])\n return new Map(rows)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"incomeByNeighborhood = {\n let rows = allVars6.map(row => [String(d3.format(\"\")(row[\"TRACTCE (a9 final.geojson1)\"])), Number(row[\"Median Hou (A9 Final.Geojson1)\"])])\n return new Map(rows)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"whitePopByNeighborhood = {\n let rows = allVars.map(row => [String(d3.format(\"\")(row[\"TRACTCE (a9 final.geojson1)\"])), Number((row[\"White Popu (A9 Final.Geojson1)\"]/row[\"Total Popu (A9 Final.Geojson1)\"])*100)])\n return new Map(rows)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"airQualityByNeighborhood = {\n let rows = allVars2.map(row => [String(d3.format(\"\")(row[\"TRACTCE (a9 final.geojson1)\"])), Number(row[\"MCPA rating (Pollution Data - Sheet1.csv1)\"])])\n return new Map(rows)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":661,"value":"treeCoverByNeighborhood = {\n let rows = allVars3.map(row => [String(d3.format(\"\")(row[\"TRACTCE (a9 final.geojson1)\"])), Number(row[\"Percent tree cover\"])])\n return new Map(rows)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":694,"value":"imperviousAreaByNeighborhood = {\n let rows = allVars4.map(row => [String(d3.format(\"\")(row[\"TRACTCE (a9 final.geojson1)\"])), Number(row[\"Percent impervious area\"])])\n return new Map(rows)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1044,"value":"Income_and_Temp_chart = Scatterplot(merged_data, {\n x: d => d['_Median (A9 Final.Geojson1)'],\n y: d => d['Median Hou (A9 Final.Geojson1)'] -273.15 *(9/5)+32 ,\n \n xLabel: \"Income →\",\n yLabel: \"↑ Surface Temperature\",\n stroke: \"steelblue\",\n width,\n height: 600,\n \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1249,"value":"Plot.plot(merged_data{\n y: {\n label: \"↑ Temperature (°F)\",\n transform: f => f -273.15 *(9/5)+32 // convert Celsius to Fahrenheit\n },\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"// The smallest and biggest surface temps give us the \"domain\" for our color scale\nsurfaceTempExtent = d3.extent(surfaceTempByNeighborhood, d=> +d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"// The smallest and biggest surface temps give us the \"domain\" for our color scale\nincomeExtent = d3.extent(incomeByNeighborhood, d=> +d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":556,"value":"// The smallest and biggest surface temps give us the \"domain\" for our color scale\nwhitePopExtent = d3.extent(whitePopByNeighborhood, d=> +d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":596,"value":"airQualityExtent = d3.extent(airQualityByNeighborhood, d=> +d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":673,"value":"treeCoverExtent = d3.extent(treeCoverByNeighborhood, d=> +d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":711,"value":"imperviousAreaExtent = d3.extent(imperviousAreaByNeighborhood, d=> +d[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":239,"value":"// We use a log color scale \nsurfaceTempColor = d3.scaleSequentialLog(surfaceTempExtent, d3.interpolateReds)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":526,"value":"incomeColor = d3.scaleSequentialLog(incomeExtent, d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":559,"value":"whitePopColor = d3.scaleSequentialLog(whitePopExtent, d3.interpolatePurples)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"airQualityColor = d3.scaleSequentialLog(airQualityExtent, d3.interpolateOranges)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":678,"value":"treeCoverColor = d3.scaleSequentialLog(treeCoverExtent, d3.interpolateGreens)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":715,"value":"imperviousAreaColor = d3.scaleSequentialLog(imperviousAreaExtent, d3.interpolateGreys)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":955,"value":"redliningColor = d3.scaleOrdinal()\n .domain(redlinedNeighborhoods.features.map(d => d.properties.holc_grade))\n .range([\"#228B22\", \"#FFE733\" , \"#FF8C01\", \"#ED2938\"]) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"value":"## d3.geo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":259,"value":"projection = d3.geoMercator()\n.fitSize([width, height], neighborhoods)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"height = width * 0.6256410256410256","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"## Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":84,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1182,"value":"Red_Line_and_Demographic_chart = PieChart(merged_data, {\n name: d => d['Holc Grade'] == \"D\" ,\n value: d => d.whitePopByNeighborhood,\n .append(\"title\")\n .text(d => `White Population (%): ${d3.format(\".1f\"));\n width,\n height: 500\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"import {PieChart} from \"@d3/pie-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1042,"value":"import {Scatterplot} from \"@d3/scatterplot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"