2c:null 2d:["$","title",null,{"children":"MD Median Income Change Between 2007 and 2016 Using Open Layers-- Old Version | nchavez1 | Observable"}] 32:T4d4,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 change each county name to lower case and the the word "county" after the name. Each county name was then matched up to the 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 to create a final counties data array. The function also subtracted income values between 2007 and 2016 for display purposes. Due to the structure of some county names, some counties returned null values for the difference, which I replaed with a standard value of 1000. I added some interactive features which included being able to click ona county and get its name and also toggling median income values between 2007 and 2016 and the difference. I created a getcolor function to assign a color to income ranges that would be displayed on the map. `33:T409,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 legen from coming through. target: target, view: new ol.View({ center: ol.proj.fromLonLat ([-77.6450, 38.9300]), zoom: 8 }), controls: ol.control.defaults().extend([ new ol.control.ScaleLine() ]), }) // Add custom interaction to the map target.value = []; // Initial empty selection. const select = new ol.interaction.Select(); select.on("select", event => { target.value = select.getFeatures().getArray(); target.dispatchEvent(new CustomEvent("input")); }) map.addInteraction(select); // Initialize the target value target.dispatchEvent(new CustomEvent("input")); invalidation.then(() => map.dispose()); // Specific to OpenLayers sidepanel() return map; }34:[] 30:{"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 Version","thumbnail":"047238b7143055ed4748d108d87ddea1e9fbecc7f1113b1deac77d871f1ae861","access_level":"public","create_time":"$D2019-04-04T23:02:34.582Z","update_time":"$D2019-05-07T00:11:59.579Z","view_time":null,"first_public_time":"$D2019-04-04T23:22:41.505Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"8c1c672550932b42","login":"nchavez1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a82da57a0201962cf951c5056280720723f34030bb6e81022458b2bd7518f997","tier":"starter_2024"},"version":507,"publish_version":507,"role":null,"authored":false,"authors":[{"type":"individual","id":"ea4491a49301b34d","login":"nchavez1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/a82da57a0201962cf951c5056280720723f34030bb6e81022458b2bd7518f997","tier":null}],"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,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"MD Median Income Change Between 2007 and 2016 Using Open Layers-- Old Version","cells":[{"id":0,"value":"md`# MD Median Income Change Between 2007 and 2016 Using Open Layers-- Old Version`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Project Goal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md` Compare median income by county across 2007 and 2016. Create a visualization map showing the change in median income between the 2 years. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`## Data sources and Processing Summary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":204,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`Helpful links used: https://observablehq.com/@pbogden/choropleth-with-openlayers`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"interactive = {\n // Get the feature when you click on the map\n let feature = targetValue[0];\n return feature ? feature.getProperties().county : 'Click on a county'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof datasource = form(html``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"//target = html`

`// original line\n\ntarget = html`\n

\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"// #map {\n// background: #f00;\n// width: 100%;\n// height: 100%;\n// float: left;\n// } //removed this piece, felt it was uneccessary. ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"md` ## Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"html`Styling for legend\n` //css styling for the legend","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"sidepanel = { \n let values = [0,1000,2000,5000,7500,10000,50000,1000000];\n let colors = d3.schemeYlOrRd[values.length + 1].slice(1,values.length + 2);\n \n let myScale = d3.scaleLinear().domain(values).range(d3.range(8));\n let myColor = d3.scaleQuantize().domain([0,8]).range(colors);\n \n let legend = d3.select('#sidepanel').selectAll('div.legend')\n .data(colors)\n .enter()\n .append('div')\n .classed('legend', true) // Use the CSS from the previous example\n .style('background', function(d){ return d })\n .each(function(d,i) {\n let div = document.createElement('div');\n this.parentNode.insertBefore(div, this.nextSibling)\n div.innerHTML = values[i] + (i == values.length - 1 ? \"+\" : '–' + values[i+1]);\n })\n \n return function(d) { return myColor( myScale(d) ) }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`## Map Cell`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md` ### Median Income layer`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":230,"value":"options = {\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 return options\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"md`## Functions for coloration of Layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function getColor(d) {\n return d > 1000000 ? '#800026' :\n d > 50000 ? '#BD0026' :\n d > 10000 ? '#E31A1C' :\n d > 7500 ? '#FC4E2A' :\n d > 5000 ? '#FD8D3C' :\n d > 2000 ? '#FEB24C' :\n d > 1000 ? '#FED976' :\n d > 0 ? '#FFEDA0' :\n '#FFFFCC';\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"datasource","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"arraychoice = [\"incomechange\", \"income2007\", \"income2016\"] // this is to get the style function to change with radio choice","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"styleFunction = function(feature) {\n //let value = feature.getProperties.incomechange;\n //let colors = d3.schemeCategory10;\n let stroke = new ol.style.Stroke({ color: 'yellow', width: 1 });\n //let randomIndex = Math.floor( Math.random() * 9 );\n let fill = new ol.style.Fill({ color:sidepanel(feature.getProperties()[arraychoice[datasource.choice]])});\n //new ol.style.Fill({ color: colors[randomIndex] });\n let style = new ol.style.Style({ stroke: stroke, fill: fill }); \n return style;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"Countyurl = 'https://opendata.arcgis.com/datasets/4c172f80b626490ea2cff7b699febedb_1.geojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"county_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","output":"$undefined","database":"$undefined"},{"id":29,"value":"incomeurl = \"https://opendata.maryland.gov/resource/bvk4-qsxs.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"incomedata = {\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","output":"$undefined","database":"$undefined"},{"id":33,"value":"income2016 = incomedata[14];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"income2007 = incomedata[15];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"countiesupdate = {\n let features = county_data.features;\n features.forEach(function(d, i) { \n let id = d.properties.county.toLowerCase() + \"_county\";\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 100\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","output":"$undefined","database":"$undefined"},{"id":168,"value":"targetValue = Generators.input(target)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"