21:null 22:["$","title",null,{"children":"Percent Changes in D.C. Public Elementary School Budgets 2017-2020 | mbschissell | Observable"}] 27:[] 25:{"id":"a974f2d84ddc67ec","slug":"changes-in-d-c-public-elementary-school-budgets-2017-2018-vi","title":"Percent Changes in D.C. Public Elementary School Budgets 2017-2020","thumbnail":"5bb42cec2b11f34983deb006522d2a7d55354880c6ccd64d7198c8793f5f743f","access_level":"public","create_time":"$D2019-05-02T21:51:57.866Z","update_time":"$D2019-05-09T22:52:39.113Z","view_time":null,"first_public_time":"$D2019-05-02T22:19:34.392Z","has_unpublished_edits":null,"fork":{"id":"c61b41fb2eb2658a","slug":"changes-in-d-c-public-elementary-school-budgets-2017-2018-iv","title":"Changes in D.C. Public Elementary School Budgets 2017-2018 VI","owner":{"id":"801c2f61e7096b3e","login":"mbschissell","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"801c2f61e7096b3e","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":"starter_2024","bio":""},"version":536,"publish_version":536,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa5b7e29c53870f6","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":null,"bio":""}],"members":[{"type":"individual","id":"aa5b7e29c53870f6","login":"mbschissell","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5b7f73b7c3326d5f055212bc0ac2958f75a1e1f283f9a7593d4a867802a25bb1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Percent Changes in D.C. Public Elementary School Budgets 2017-2020","cells":[{"id":0,"value":"md`# Percent Changes in D.C. Public Elementary School Budgets 2017-2020`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`### Project Goal\n\nThe goal of this project is to produce a map that will visualize the changes in D.C. public elementary school budgets over the four year period between 2017 and 2020. Users are able to interact with the map in 2 ways: 1) selecting which fiscal year will be displayed on the map, and 2) clicking on school locations for more information such as school name and budget amount. This will allow the user to quickly see differences in budget amounts from year to year. \n\nUltimately the map will serve to compare the relative budgets of each school and explore what this might mean in terms of school location, median income, and demographics. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"//radio buttons allow user to toggle between fiscal years and corresponding budgets\n\nviewof year = radio({\n title: 'Select a Fiscal Year',\n options: [\n { label: \"FY17-FY18\", //arbitrary label for radio button\n value: \"fy_delta3\", }, //location of budget data in schools array\n \n { label: \"FY18-FY19\", \n value: \"fy_delta2\", },\n \n { label: \"FY19-FY20\", \n value: \"fy_delta1\", },\n ],\n value: 'fy_delta3' \n})\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"(map) ? md`${ schoolName } budget ${ total > 0 ? 'increased' : 'decreased' } ${d3.format(\".1f\")(total)}%` : md`Click on a school for details.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"target = html`

`;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"md` ### Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"html`\n\n\n

Budget Decrease

Budget Increase

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"function legend(data) {\n // This function returns a multi-item legend in Observable\n return html`${data.map(d => `

${d.label}

`)}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"md` ### Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"color = function(values) {\n let n = values.length;\n let colors = d3.schemeYlOrRd[n + 1].slice(1, n + 2); // trim the first color (too light)\n \n let myScale = d3.scaleLinear().domain(values).range(d3.range(8));\n let myColor = d3.scaleQuantize().domain([0, n - 1]).range(colors);\n return function(d) { return myColor( myScale(d) ) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"// Get the feature when you click on the map\n\nschoolName = {\n let feature = targetValue[0];\n return feature ? feature.getProperties().NAME : 'Click on a school'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"//get budget details when you click on the school\ntotal = {\n let feature = targetValue[0];\n return feature ? feature.getProperties().fy_delta3 : 'Click on a school'\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"targetValue = Generators.input(target)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"map = {\n width;\n \n target.dispatchEvent(new CustomEvent(\"input\"));\n \n let tileLayer = new ol.layer.Tile({\n source: new ol.source.OSM()\n });\n \n const map = new ol.Map({\n layers: [ tileLayer, schoolLayer ],\n target: target,\n view: new ol.View({\n center: ol.proj.fromLonLat (dc), \n zoom: 11\n }),\n controls: ol.control.defaults().extend([ new ol.control.ScaleLine() ]),\n })\n \n // Add custom interaction to the map\n target.value = []; // Initial empty selection.\n const select = new ol.interaction.Select();\n select.on(\"select\", event => {\n target.value = select.getFeatures().getArray();\n target.dispatchEvent(new CustomEvent(\"input\"));\n })\n map.addInteraction(select);\n target.dispatchEvent(new CustomEvent(\"input\"));\n invalidation.then(() => map.dispose());\n \n return map;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"styleFunction = function(feature) {\n let colors = d3.schemeCategory10;\n let stroke = new ol.style.Stroke({ color: 'yellow', width: 1 });\n let x = feature.getProperties()[year]; //create an object 'x' that contains budget data based on year selected\n \n let Circle = new ol.style.Circle({\n radius: Radius( Math.abs(x) ), //specify that the size of each bubble corresponds to the budget amount\n opacity: .5,\n fill: new ol.style.Fill({color: x > 0 ? 'black':'red'}),}); //specify that when x increases, bubble will be rendered black, if x decreases then bubble will be rendered red\n \n let style = new ol.style.Style({ image: Circle });\n \n return style;\n\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"//create a scale by which budget data will be displayed in a manageable number of pixels\nRadius = d3.scaleLinear().range([4,50]).domain([0, 100]); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"schoolLayer = {\n\n //specify the original and final projections\n let options = { \n dataProjection: 'EPSG:4326', // default data projection: WGS84\n featureProjection: 'EPSG:3857', // map projection\n }; \n \n //read the GeoJSON into a vector source\n let vectorSource = new ol.source.Vector({\n features: (new ol.format.GeoJSON()).readFeatures(schools, options)\n });\n \n let vectorLayer = new ol.layer.Vector({\n source: vectorSource,\n style: styleFunction //default styling\n });\n \n return vectorLayer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md` ### Data & Data Sources\n* School Budgets: [District of Columbia Public Schools Data Center](https://www.dcpsdatacenter.com/budget_process.html)\n* School Locations: [opendata.dc.gov](https://opendata.dc.gov/datasets/public-schools)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"//access budget data uploaded as CSV to a gist on GitHub\n\nurls = [\n \"https://gist.githubusercontent.com/pbogden/f82f46ac90d6bab67d8f0edc8778ce6f/raw/ddf177c6a1a1380b3519e7da210f26d7ae792266/fy20_initial_allocations.csv\",\n \"https://gist.githubusercontent.com/pbogden/f82f46ac90d6bab67d8f0edc8778ce6f/raw/4ab54c10118144dbdd8570bedab617d6d8f41f53/fy19_initial_allocations.csv\", \n \"https://gist.githubusercontent.com/pbogden/f82f46ac90d6bab67d8f0edc8778ce6f/raw/296167a4b0eb63fccef5f9bc40e648fb0f3ad9ae/fy18_initial_allocations.csv\",\n \"https://gist.githubusercontent.com/pbogden/f82f46ac90d6bab67d8f0edc8778ce6f/raw/296167a4b0eb63fccef5f9bc40e648fb0f3ad9ae/fy17_initial_allocations.csv\",\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"//parse CSV from URL\npromises = urls.map(url => d3.csv(url, fixit))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"//convert budget data from strings containing dollar signs '$' and commas ',' to numbers\n\nfunction fixit(d) { return [+d['School Code'], d['School Name'], +d['Total School Budget Allocation'].replace(\"$\",\"\").replace(/ /gi,\"\").replace(/,/gi,\"\")] }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"//create an object populated from parsed budget data for later use when joining to school location data\n\nbudgets = Promise.all(promises)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"//join budget data to school location data\n\nfunction addFYs(d) { \n let bldg_num = +d.properties.BLDG_NUM;\n let sch_prog = +d.properties.SCH_PROG;\n \n budgets.forEach( (budget, k) => {\n let i = budget.map(d => d[0]).indexOf(bldg_num);\n if (i == -1) i = budget.map(d => d[0]).indexOf(sch_prog); // Use this if I can't find a bldg_num \n let b = d.properties[\"fy\" + k] = (i != -1) ? budget[i] : null;\n if (k == 0) return;\n let a = d.properties[\"fy\" + (k-1)];\n d.properties['fy_delta' + k] = (a && b) ? 100 * (a[2] - b[2]) / b[2] : null;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"//request geojson data and create object containing school location data\n\nschools = {\n let response = await fetch('https://opendata.arcgis.com/datasets/4ac321b2d409438ebd76a6569ad94034_5.geojson');\n let json = await response.json();\n json.features.forEach(addFYs)\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"// long and lat of Washington, D.C. used to center map on D.C.\ndc = [-77.0369, 38.9072]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md` ### Data Processing\nBudget data was first uploaded to a gist on GitHub which is accessed via URLs in cell 1 of Data & Data Sources, parsed from URL to CSV in cell 2, then converted from strings containing dollar signs '$' and commas ',' to numbers with the function fixit in cell 3. Budget data was then joined to school location data based on BLDG_NUM in cell 4 using the function addFYs. No further changes were made to the data. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"md` ### Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"//import OpenLayers package\nol = {\n const ol = await require(\"https://openlayers.org/en/v5.2.0/build/ol.js\").catch(() => window.ol);\n if (!ol.css) ol.css = document.head.appendChild(html``);\n return ol;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"//import d3 library\nd3 = require(\"d3@5\", \"d3-geo@1\", \"d3-tile@0.0.3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"import { radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"md` ### References\n* Earthquakes on Open Layers: [PBogden](https://observablehq.com/d/71afc758789e5e21)\n* Leaflet API Reference: [API](https://leafletjs.com/reference-1.4.0.html#geojson-pointtolayer)\n* Leaflet Map demo: [Tom MacWright](https://observablehq.com/@tmcw/leaflet)\n* Observable User Manual: [Observable- The User Manual](https://observablehq.com/d/0fc51abfa43fae11)\n* Using GeoJSON with Leaflet: [Leaflet Tutorials](https://leafletjs.com/examples/geojson/)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W27","stdlib":"1"}} 26:"$25:body"