23:null 24:["$","title",null,{"children":"Maryland's Median Income Change Between 2007 and 2016 Using Open Layers | nchavez1 | Observable"}] 29:T574,md`IncomeAPI: https://opendata.maryland.gov/resource/bvk4-qsxs.json The income API has the median annual income by county, by year for 2007 to 2016. This geojson data was brought in using Javascript's fetch API. The array was modified with the foreach method to convert each county name to lower case and "_county" after the name. Counties with apostrophes in their name had an additional step using replace to replace the apostrophe with an underscore. This allowed each county in the county data to be matched up to the county names in income data. county API: https://opendata.arcgis.com/datasets/4c172f80b626490ea2cff7b699febedb_1.geojson This API has the name of each county in Maryland and was brought in using the Fetch API. The income data for 2007 and 2016 was pulled out and tied to each county ID using the foreach method and county names to create a final counties data array. The function also subtracted income values between 2007 and 2016 for display purposes. With this map users can toogle between layers displaying median income for 207, 2016 and the difference. Users can also click on a county to see the county name and median income value. The function called styleFunction uses the county figures to add coloring to the feature and sidepanel helps adjust the legend. The sidepanel function allows the legend to adjust in values as the radio button choices are toggled.`2a:T45f,popup_style = html`Popup styling `2b:T645,//openlayers variable created to display map in correct projection and add popup functionality map = { width; target.dispatchEvent(new CustomEvent("input")); let tileLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); const map = new ol.Map({ layers: [ tileLayer ], // Uncomment this line to add the OpenStreetMap layer in the background. This tile is blocking my legend from coming through. target: 'map', view: new ol.View({ center: ol.proj.fromLonLat ([-77.6450, 38.9300]), zoom: 8 }), controls: ol.control.defaults().extend([ new ol.control.ScaleLine() ]), }) const select = new ol.interaction.Select(); // The documentation for d3.format is here: https://github.com/d3/d3-format const fmt = d3.format("($,.0f"); select.on("select", event => { let content = document.getElementById('popup-content') let coordinate = event.mapBrowserEvent.coordinate; content.innerHTML = select.getFeatures().getArray()[0].getProperties().county + " County" + "

Median income in 2016 was " + fmt(select.getFeatures().getArray()[0].getProperties().income2016) + "

Median income in 2007 was " + fmt(select.getFeatures().getArray()[0].getProperties().income2007) + "

The difference in Median income is " + fmt(select.getFeatures().getArray()[0].getProperties().incomechange); popup.setPosition(event.mapBrowserEvent.coordinate); }) map.addOverlay(popup); map.addInteraction(select); invalidation.then(() => map.dispose()); // Specific to OpenLayers sidepanel() return map; }2c:[] 27:{"id":"fba21a8e5fd8d08b","slug":"md-median-income-change-between-2007-and-2016-using-open-lay/2","title":"Maryland's Median Income Change Between 2007 and 2016 Using Open Layers","thumbnail":"39676c487d86d7493a0213197ae07e7b09b26667383d4c495f15f499f5065906","access_level":"public","create_time":"$D2019-04-25T22:55:11.217Z","update_time":"$D2019-05-08T23:40:01.556Z","view_time":null,"first_public_time":"$D2019-04-25T23:38:16.763Z","has_unpublished_edits":null,"fork":{"id":"f63ebe0d3dfcec52","slug":"md-median-income-change-between-2007-and-2016-using-open-lay","title":"MD Median Income Change Between 2007 and 2016 Using Open Layers-- Old Open layers Version","owner":{"id":"8c1c672550932b42","login":"nchavez1","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"8c1c672550932b42","login":"nchavez1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a82da57a0201962cf951c5056280720723f34030bb6e81022458b2bd7518f997","tier":"starter_2024","bio":""},"version":713,"publish_version":713,"role":null,"authored":false,"authors":[{"type":"individual","id":"ea4491a49301b34d","login":"nchavez1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a82da57a0201962cf951c5056280720723f34030bb6e81022458b2bd7518f997","tier":null,"bio":""}],"members":[{"type":"individual","id":"ea4491a49301b34d","login":"nchavez1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a82da57a0201962cf951c5056280720723f34030bb6e81022458b2bd7518f997","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Maryland's Median Income Change Between 2007 and 2016 Using Open Layers","cells":[{"id":0,"value":"md`# Maryland's Median Income Change Between 2007 and 2016 Using Open Layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Project Goal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md` Compare median income by county in the state of Maryland across 2007 and 2016. Create a visualization map to show the median income for 2007 and 2016 as well as the difference between the 2 years. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"md ` ## Interaction Description`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"md` With this map users can toogle between layers displaying median income for 207, 2016 and the difference. Users can also click on a county to see the county name and median income value. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`## Data sources/Acknowledgements and Processing Summary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"md`Data source: https://opendata.maryland.gov/Demographic/Maryland-Median-Household-Income-By-Year-With-Marg/bvk4-qsxs\n\nThis is the original data source that contained the income API used below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`Additional helpful links used: https://observablehq.com/@pbogden/choropleth-with-openlayers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"md`## Findings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"//imported form from bostock's example to create radio buttons to toggle between layers\nviewof datasource = form(html`

`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"//target cell for map to be displayed along with various css styling\ntarget = html`\n

\n\n

\n \n

\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md` ## Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"legend_styles = html`Styling for legend and coloration of features\n\n\n ${ row }\n

` //css styling for the legend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"row = html`0–10 This is what the legend will look like`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"//color function brings in d3 color scale and slices it to fit legend values outlined in sidepanel function\ncolor = 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"//sidepanel function has my 2 legend values, creates the labels for them using the color function and sidepanel template created earlier.\nsidepanel = { \n \n\n let values = datasource.choice == 0 ? [0,1000,1500,2000,2500,5000,15000,20000] : [0,35000,45000,55000,65000,80000,100000,110000];\n \n let colorScale = color(values);\n let n = values.length;\n let rows = values.map((d, i) => ({ \n color: colorScale(d),\n label: d + (i == n - 1 ? \"+\" : '–' + values[i+1])\n }));\n \n let template = d3.select('#sidepanel table')\n \n let legend = template.selectAll('tr')\n .data(rows)\n \n legend.exit().remove();\n \n legend.enter()\n .append(function() { return row.cloneNode(true) })\n .merge(legend)\n .each(function(d) { \n d3.select(this).select('.swatch').style('background', d.color)\n d3.select(this).select('.legend-label').html(d.label) \n });\n \n return colorScale;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"md `## Popups`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"popup = {\n var container = document.getElementById('popup');\n var content = document.getElementById('popup-content');\n var closer = document.getElementById('popup-closer');\n\n var overlay = new ol.Overlay({\n element: container,\n autoPan: true,\n autoPanAnimation: {\n duration: 250\n }\n });\n\n // Click handler to hide the pop-up (return false so as not to follow the link)\n closer.onclick = function() {\n overlay.setPosition(undefined);\n closer.blur();\n return false;\n };\n \n return overlay\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`## Mapping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md` ### Median Income layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"countyLayer = {\n\n // Specify the original and final projections\n let options = { \n dataProjection: 'EPSG:4326', // \"EPSG:4326\" = default data projection = WGS84 (Latitute & Longitude)\n featureProjection: 'EPSG:3857', // Specify the map projection or it will be returned in the dataProjection\n }; \n \n // Read the GeoJSON into a Vector source\n let vectorSource = new ol.source.Vector({\n features: (new ol.format.GeoJSON()).readFeatures(county_data, options)\n });\n \n // Create a Vector layer\n let vectorLayer = new ol.layer.Vector({\n source: vectorSource,\n style: styleFunction\n });\n \n map.addLayer(vectorLayer);\n \n return vectorLayer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"md`## Functions for coloration of Layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"//this is to get the style function to change with radio choice\narraychoice = [\"incomechange\", \"income2007\", \"income2016\"] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"//this function allows sidepanel to change with the radio button choices\nstyleFunction = function(feature) {\n let stroke = new ol.style.Stroke({ color: 'yellow', width: 1 });\n let fill = new ol.style.Fill({ color:sidepanel(feature.getProperties()[arraychoice[datasource.choice]])});\n let style = new ol.style.Style({ stroke: stroke, fill: fill }); \n return style;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`## Appendix and References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"//MD counties data\nCountyurl = 'https://opendata.arcgis.com/datasets/4c172f80b626490ea2cff7b699febedb_1.geojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"//using county layer API\ncounty_data = {\n let response = await fetch(Countyurl);\n let json = await response.json();\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"//MD median income data\nincomeurl = \"https://opendata.maryland.gov/resource/bvk4-qsxs.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"//bringing in the income date through the API\nincomedata = {\n let response = await fetch(incomeurl);\n let json = await response.json();\n return json;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"//pulling out only 2016 income data\nincome2016 = incomedata[14];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"////pulling out only 2007 income data\nincome2007 = incomedata[15];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"//updating county data to contain income data\ncountiesupdate = {\n let features = county_data.features;\n features.forEach(function(d, i) { \n let id = d.properties.county.toLowerCase() + \"_county\";\n id = id.replace(\"'\",\"_\").replace(/ /gi, \"_\").replace(\".\",\"\").replace(\"baltimore_city_county\", \"baltimore_city\");\n d.id = id;\n d.properties.income2016 = + income2016[id];\n d.properties.income2007 = + income2007[id];\n d.properties.incomechange = + income2016[id]-income2007[id];\n\n //replace all the NaN values with a default number of 1000\n if (isNaN(d.properties.incomechange)) {\n return d.properties.incomechange = 1000;\n }\n })\n return features;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"ol = {\n // OpenLayers doesn’t publish a build to npm, so we can’t use unpkg. :(\n const ol = await require(\"https://openlayers.org/en/v5.3.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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2c","stdlib":"1"}} 28:"$27:body"