29:null 2a:["$","title",null,{"children":"U.S. Education Dashboard | 🪦 dis-2024-fall | Observable"}] 2f:T661,funding = { const plot = Plot.plot({ title: "Funding Gap by State", subtitle: "Funding gap is defined as the gap in state education funding between actual spending and required spending per student.", projection: "albers-usa", width, color: { legend: true, type: "diverging", scheme: "PuOr", label: "Education Funding", tickFormat: (d) => { if (d === -0.2) return "Underfunded"; if (d === 0) return "On Target"; if (d === 0.2) return "Overfunded"; return d; } }, caption: "Displaying data for 2019", marks: [ Plot.geo(nation), Plot.geo(statesFundingTopoJoinedWithEducationData, { fill: (d) => d.properties.necm_fundinggap_state, tip: true, strokeOpacity: 0.25, strokeWidth: 1, title: (d) => `${d.properties.name}` }), Plot.dot(imagesDataset, {x: "lon", y: "lat", r: 5, fill: "white", stroke: "black", className: "imageDots"}), Plot.text(imagesDataset, {x: "lon", y: "lat", text: "name", fill: "black", stroke: "white", paintOrder: "stroke", textAnchor: "middle", dy: -15}), ] }) // After rendering, add event listeners to the dots //set timeout to 0 ms ensures that this code block runs after the chart is there setTimeout(() => { d3.selectAll(".imageDots circle") .style("cursor", "pointer") .on("mouseenter", (event, index) => { mutable tooltipContent = { url: imagesDataset[index].url, pageX: event.pageX, pageY: event.pageY }; }) .on("mouseleave", () => { mutable tooltipContent = null; }) }, 0); return plot; }30:T438,districts = Plot.plot({ title: "Outcome Gap by School District and Enrollment", subtitle: "Outcome gap is defined as the gap in test scores between the district average and the national average. Bubble size corresponds to enrollment.", projection: "albers-usa", width, color: { legend: true, type: "diverging", scheme: "RdBu", label: "Student Outcome", tickFormat: (d) => { if (d === -1) return "Below Average"; if (d === 0) return "Average"; if (d === 1) return "Above Average"; return d; } }, caption: "Displaying data for 2019", marks: [ Plot.geo(nation), Plot.geo(states), Plot.geo(counties, { strokeOpacity: 0.01, strokeWidth: 2, }), Plot.dot(countydataWithDotLatLon.filter(f => f.year === 2019), { y: "INTPTLAT", x: "INTPTLON", r: "enroll", fill: "outcomegap", stroke: "black", paintOrder: "stroke", strokeOpacity: 0.6, strokeWidth: 1, tip: true, title: (d) => `${d.state_name}\nDistrict: ${d.district}` }) ] });31:[{"id":"c57ee0b1e47466358b3bf2c113d8fe91ea48a02036bea136563665689a802409ff3f6cb10b8f0dd6fd4f004f188b4fdff1c4ce31186860eac6ba891034e71fa5","href":"https://static.observableusercontent.com/files/c57ee0b1e47466358b3bf2c113d8fe91ea48a02036bea136563665689a802409ff3f6cb10b8f0dd6fd4f004f188b4fdff1c4ce31186860eac6ba891034e71fa5","name":"county_data.csv","type":"text/csv","lastModified":1733589787951.115,"size":33332494},{"id":"a45415b720f9b0f85624bdba3dd81863b61b7b5386c4f212cab6cb9f013ec963a9845df4b292dbb0e4acd90c3d7479f3f600975afe4629602861753811a70f50","href":"https://static.observableusercontent.com/files/a45415b720f9b0f85624bdba3dd81863b61b7b5386c4f212cab6cb9f013ec963a9845df4b292dbb0e4acd90c3d7479f3f600975afe4629602861753811a70f50","name":"EDGE_SCHOOLDISTRICT_TL_23_SY2223(1).json","type":"application/json","lastModified":1733589787951.115,"size":10791065},{"id":"beab98571b30b9312932b7a3085ca62bf6560a3064925fc8b0c362d0420b33847041ae5e6a2ebebbd7716124c7ea3d2878341a81ec6296e0aff2574689560e67","href":"https://static.observableusercontent.com/files/beab98571b30b9312932b7a3085ca62bf6560a3064925fc8b0c362d0420b33847041ae5e6a2ebebbd7716124c7ea3d2878341a81ec6296e0aff2574689560e67","name":"EDGE_SCHOOLDISTRICT_TL_23_SY2223.csv","type":"text/csv","lastModified":1733589787951.115,"size":1717126},{"id":"c002bb9fce821036c18be5def4cf5f0438af1f91cccb9184c68426e31166d25dde66bf90580d8be703a11bea676d3c2023710eb55931e8c4182c9d3be37ebac4","href":"https://static.observableusercontent.com/files/c002bb9fce821036c18be5def4cf5f0438af1f91cccb9184c68426e31166d25dde66bf90580d8be703a11bea676d3c2023710eb55931e8c4182c9d3be37ebac4","name":"indicator.csv","type":"text/csv","lastModified":1733589787951.115,"size":1077592}] 2d:{"id":"e6483b7b48fef43f","slug":null,"title":"U.S. Education Dashboard","thumbnail":"b3ee4ca6f32ebdd2a4838218d2564b96ee2db6b4950dddaa28939a630ae932f6","access_level":"public","create_time":"$D2024-12-07T16:43:07.951Z","update_time":"$D2024-12-07T17:12:58.472Z","view_time":null,"first_public_time":"$D2025-01-16T14:46:09.425Z","fork":{"id":"f2b78cd06c61909b","slug":null,"title":"U.S. Education Dashboard (OLD)","owner":{"id":"c9e6070fd9224ac1","login":"dis-2024-fall","name":"🪦 dis-2024-fall"}},"stars":1,"starred":false,"owner":{"type":"team","id":"c9e6070fd9224ac1","login":"dis-2024-fall","name":"🪦 dis-2024-fall","avatar_url":"https://avatars-next.observableusercontent.com/71df23f8dbebe46a8246fa2cd15f75fba2173c7a9264e208f4bd503bf79212c1","tier":"pro_2024"},"version":1419,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4437aac6f2413f4e","login":"maddy-brown2","name":"Maddy Brown","avatar_url":"https://avatars-next.observableusercontent.com/82a711721fd71e6e19503953f70035901d16a6f05a48c3e7e981b1f3825a71e3","tier":null}],"members":[{"type":"team","id":"c9e6070fd9224ac1","login":"dis-2024-fall","name":"🪦 dis-2024-fall","avatar_url":"https://avatars-next.observableusercontent.com/71df23f8dbebe46a8246fa2cd15f75fba2173c7a9264e208f4bd503bf79212c1","tier":"pro_2024","role":"editor"},{"type":"individual","id":"4437aac6f2413f4e","login":"maddy-brown2","name":"Maddy Brown","avatar_url":"https://avatars-next.observableusercontent.com/82a711721fd71e6e19503953f70035901d16a6f05a48c3e7e981b1f3825a71e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"U.S. Education Dashboard","cells":[{"id":1108,"value":"html`\n

U.S. Education Dashboard

${funding}

${outcome}

${districts}

\n ${tooltipImage}\n

By: Amelia Perry, Audra Bosak-Harper, and Maddy Brown

Course: Data Visualization, DIS Stockholm Fall 2024

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"**Dataset:** School Finance Indicators Database\nhttps://www.schoolfinancedata.org/download-data/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"education_data = await FileAttachment(\"indicator.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"education_data","database":"$undefined"},{"id":213,"value":"county_data = await FileAttachment(\"county_data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"county_data","database":"$undefined"},{"id":1323,"value":"**Data Preparation**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":827,"value":"missingStateNames = education_data.filter(d => !d.state_name);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"state = education_data.map(d => d.state_name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"year = education_data.map(d => d.necm_outcomegap_state)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"columnType = typeof education_data[0].state_name;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1168,"value":"imagesDataset = [\n {\n lat: 47.63722,\n lon: -122.52438,\n url: \"https://corsproxy.io/?https%3A%2F%2Fwww.nwpart.com%2Fwp-content%2Fuploads%2F2016%2F11%2FNWP-Projects-Bainbridge-HS-03-1-1024x583.jpg\",\n name: \"Maddy's High School\"\n },\n {\n lat: 45.53914,\n lon: -122.62654,\n url: \"https://www.pps.net/cms/lib/OR01913224/Centricity/ModuleInstance/9661/GHS.jpeg\",\n name: \"Amelia's High School\"\n },\n {\n lat: 43.97943, \n lon: -71.12576,\n url: \"https://bloximages.newyork1.vip.townnews.com/conwaydailysun.com/content/tncms/assets/v3/editorial/4/fe/4fe90412-2b75-11eb-941f-e3265f6d30d2/5fb831b3843a4.image.jpg?resize=1200%2C737\",\n name: \"Audra's Middle School\"\n },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"mutable tooltipContent = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {us} from \"@observablehq/us-geographic-data\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"counties = topojson.feature(us, us.objects.counties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"states = topojson.feature(us, us.objects.states)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"// convert education_data array to a map, this is only needed for faster search\n// search in Map is O(1), which means constant time\n// search in Array is O(n), where n is the number of elements in array, means you would need to go through elements one by one\n\n// conversion happens with new Map() kind of instruction, but it needs a nesed array as an input\neducationDataMapState = new Map(\n education_data\n //only keep one year for now\n .filter(f => f.year === 2019) // 2019 for necm_fundinggap_state\n // converts your original array into a nested array [[state, value],[state, value]], as expected by new Map()\n .map(d => [d.statefip, d.necm_outcomegap_state, d.state_name])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"//grouped = d3.group(educationDataMapState, d => d.statefip)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":921,"value":"educationDataMapState","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"statesOutcomeTopoJoinedWithEducationData = topojson.feature(us, us.objects.states).features.map(feature => {\n feature.properties.necm_outcomegap_state = educationDataMapState.get(+feature.id)\n return feature;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":912,"value":"filteredData = education_data.map(d => ({state_name: d.state_name, outcome_gap: d.necm_outcomegap_state}));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"statesFundingTopoJoinedWithEducationData = topojson.feature(us, us.objects.states).features.map(feature => {\n feature.properties.necm_fundinggap_state = educationDataMapState.get(+feature.id)\n return feature;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"// convert education_data array to a map, this is only needed for faster search\n// search in Map is O(1), which means constant time\n// search in Array is O(n), where n is the number of elements in array, means you would need to go through elements one by one\n\n// conversion happens with new Map() kind of instruction, but it needs a nesed array as an input\neducationDataMapCounty = new Map(\n county_data\n //only keep one year for now\n .filter(f => f.year === 2019) // 2019 for necm_fundinggap_state\n // converts your original array into a nested array [[state, value],[state, value]], as expected by new Map()\n .map(({leaid, outcomegap}) => [leaid, outcomegap])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"countiesTopoJoinedWithEducationData = topojson.feature(us, us.objects.counties).features.map(feature => {\n feature.properties.outcomegap = educationDataMapCounty.get(+feature.id)\n return feature;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"countydataWithDotLatLon","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":996,"value":"scaleLink = d3.scaleLinear(d3.extent(countydataWithDotLatLon, d => d.enroll), [1,5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"districtGeo = FileAttachment(\"EDGE_SCHOOLDISTRICT_TL_23_SY2223.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"districtGeoDB = aq.from(districtGeo).select([\"GEOID\",\"INTPTLAT\",\"INTPTLON\"]).rename({\"GEOID\": \"leaid\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"countydataWithDotLatLon = aq.from(county_data).join(districtGeoDB).objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1019,"value":"districtMap = FileAttachment(\"EDGE_SCHOOLDISTRICT_TL_23_SY2223(1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"districtMapGeojson = topojson.feature(districtMap, districtMap.objects.EDGE_SCHOOLDISTRICT_TL_23_SY2223);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1034,"value":"countyDataLookup = d3.group(county_data, d => d.year, d => d.leaid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"**Individual Map Components**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":837,"value":"outcome = Plot.plot({\n title: \"Outcome Gap by State\",\n subtitle: \"Outcome gap is defined as the gap in test scores between the state average and the national average.\",\n projection: \"albers-usa\",\n width: 1000,\n color: {\n legend: true,\n type: \"diverging\",\n scheme: \"PiYG\",\n label: \"Student Outcome\",\n tickFormat: (d) => {\n if (d === -0.2) return \"Below Average\";\n if (d === 0) return \"Average\";\n if (d === 0.2) return \"Above Average\";\n return d;\n }\n },\n caption: \"Displaying data for 2019\",\n marks: [\n Plot.geo(nation),\n Plot.geo(statesOutcomeTopoJoinedWithEducationData, {\n fill: (d) => d.properties.necm_outcomegap_state,\n strokeOpacity: 0.25,\n strokeWidth: 1,\n tip: true,\n title: (d) => `${d.properties.name}`\n }),\n ]\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1181,"value":"tooltipImage = {\n if (tooltipContent) {\n const { pageX, pageY, url } = tooltipContent;\n // Adjust the position to account for the notebook layout\n const tooltipStyle = `\n position: absolute;\n top: 20%;\n left: 20%;\n background: white;\n border: 1px solid black;\n padding: 5px;\n z-index: 1000; /* Ensure it appears above other elements */\n `;\n return html`\n

\n $\"Image\"$ \n

\n `;\n } else {\n return html`

`; // No tooltip to display\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"