Published
Edited
Apr 26, 2019
1 fork
1 star
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. `
md`Helpful links used: https://observablehq.com/@pbogden/choropleth-with-openlayers`
viewof datasource = form(html`<form>
<div>
<label><input name="choice" type="radio" value=0 checked> <i>Difference</i></label>
<label><input name="choice" type="radio" value=1> <i>2007</i></label>
<label><input name="choice" type="radio" value=2> <i>2016</i></label>
</div>
</form>`)
// #map {
// background: #f00;
// width: 100%;
// height: 100%;
// float: left;
// } //removed this piece, felt it was uneccessary.
sidepanel = {
let values = [0,1000,2000,5000,7500,10000,50000,1000000];
let colors = d3.schemeYlOrRd[values.length + 1].slice(1,values.length + 2);
let myScale = d3.scaleLinear().domain(values).range(d3.range(8));
let myColor = d3.scaleQuantize().domain([0,8]).range(colors);
let legend = d3.select('#sidepanel').selectAll('div.legend')
.data(colors)
.enter()
.append('div')
.classed('legend', true) // Use the CSS from the previous example
.style('background', function(d){ return d })
.each(function(d,i) {
let div = document.createElement('div');
this.parentNode.insertBefore(div, this.nextSibling)
div.innerHTML = values[i] + (i == values.length - 1 ? "+" : '–' + values[i+1]);
})
return function(d) { return myColor( myScale(d) ) }
}
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;
}
function getColor(d) {
return d > 1000000 ? '#800026' :
d > 50000 ? '#BD0026' :
d > 10000 ? '#E31A1C' :
d > 7500 ? '#FC4E2A' :
d > 5000 ? '#FD8D3C' :
d > 2000 ? '#FEB24C' :
d > 1000 ? '#FED976' :
d > 0 ? '#FFEDA0' :
'#FFFFCC';
}
datasource
styleFunction = function(feature) {
//let value = feature.getProperties.incomechange;
//let colors = d3.schemeCategory10;
let stroke = new ol.style.Stroke({ color: 'yellow', width: 1 });
//let randomIndex = Math.floor( Math.random() * 9 );
let fill = new ol.style.Fill({ color:sidepanel(feature.getProperties()[arraychoice[datasource.choice]])});
//new ol.style.Fill({ color: colors[randomIndex] });
let style = new ol.style.Style({ stroke: stroke, fill: fill });
return style;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
