Published
Edited
May 7, 2019
1 fork
1 star
counties_original = {
let response = await fetch(Countyurl);
let json = await response.json();
return json;
}
//county_names = counties_original.features.map(function(d) {return d.properties.county.toLowerCase()+ "_county"});
incomedata = {
let response = await fetch(incomeurl);
let json = await response.json();
return json;
}
income2016 = incomedata[14];
income2007 = incomedata[15];
finalcounties = {
let features = counties_original.features;
features.forEach(function(d, i) {
let id = d.properties.county.toLowerCase() + "_county";
d.properties.income2016 = + income2016[id];
d.properties.income2007 = + income2007[id];
d.properties.incomechange = + income2016[id]-income2007[id];
//replace all the NaN values with a default number of 100
if (isNaN(d.properties.incomechange)) {
return d.properties.incomechange = 100;
}
})
return features;
}
map = new L.Map("map", {center: [38.9300, -77.6450], zoom: 7.5})
.addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"));
//L.geoJson(finalcounties).addTo(map); //adding in county boundary lines to map
function getColor(d) {
return d > 10000 ? '#800026' :
d > 5000 ? '#BD0026' :
d > 2000 ? '#E31A1C' :
d > 1000 ? '#FC4E2A' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.incomechange),
weight: 2,
opacity: 1,
fillOpacity: 0.7
};
}
countylayer = L.geoJson(finalcounties, {style: style}).addTo(map); //adds county boundaries and styling in 1
legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 1000, 2000, 5000, 10000],
labels = [];
// loop through our density intervals and generate a label with a colored square for each interval
for (var i = 0; i < grades.length; i++) {
div.innerHTML +=
'<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(map);
html`<style>
#map { width: 800px; height: 500px; }
.info { padding: 6px 8px; font: 14px/16px Arial, Helvetica, sans-serif; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px; }
.info h4 { margin: 0 0 5px; color: #777; }
.legend { text-align: left; line-height: 25px; color: #555; }
.legend i { width: 30px; height: 20px; float: left; margin-right: 2px; opacity: 0.7; }
</style>`
//adding highlighting with hover over mouse
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
// info.update(layer.feature.properties);
}
function resetHighlight(e) {
countylayer.resetStyle(e.target);
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
});
}
//adding in hover over each county feature
highlightcounty = L.geoJson(finalcounties, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
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.
