Published
Edited
Apr 18, 2021
2 forks
md`# SUPERSEDED PHILADELPHIA CHILD BLOOD LEAD LEVELS BY ZIP CODE`
// drag the 3 dots to move cells
map = {
let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` });
yield container;
let map = L.map(container).setView([40.0035, -75.1187], 11);
let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
{
/* const banana = L.geoJSON(leadBlood, { // this was originally here, trying to make it it's own layer
pointToLayer: function(feature, num_bll_5plus) {
return L.polygon(num_bll_5plus);
}}).addTo(map) */
}
// all below is from Scott Peterson's notebook
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
var geojson;
// need to have a mask or background behind header and legend
info.update = function (props) {
this._div.innerHTML = '<h4>BLOOD LEVEL DATA</h4><h5>top right header </h5>'; // subheader should change with layer shown
};
info.addTo(map);
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) { // needs to change with layer
var div = L.DomUtil.create('div', 'info legend'),
grades = [(-2), 1, 2, 4, 5, 6, 7, 8],
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] + 0.5) + '"></i> ' +
grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
}
return div;
};
legend.addTo(map);
}
NumScreenLayer = {
var screenPolygon = L.geoJSON(leadBlood, {
pointToLayer: function(feature, num_screen) {
return L.polygon(num_screen, {color: getColor});
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
//click: zoomToFeature
});
var popupContent = "<p> Number of Children Screened: " +
feature.properties.num_screen;
if (feature.properties && feature.properties.popupContent) {
popupContent += feature.properties.popupContent;
}
layer.bindPopup(popupContent);
}
/*const quakesLayer = L.geoJSON(quakes, { // is this what alters the marker visuals?
style: function (feature) { // do I need anything similar for a polygon, or will getColor work?
return feature.properties && feature.properties.style;
},
onEachFeature: onEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}*/
}).addTo(map);
return NumScreenLayer;
}
NewNumScreenLayer = {
var screenPolygon = L.geoJSON(leadBlood, {
pointToLayer: function(feature, num_screen) {
return L.polygon(num_screen, {color: getColor});
}}
return screenPolygon;
}
function getColor(d) {
return d > 8 ? "red" :
d > 7 ? "orange" :
d > 6 ? "yellow" :
d > 5 ? "gold" :
d > 4 ? "green" :
d > 2 ? "violet" :
d > 1 ? "blue" :
"black"; // is this an else, since it's not attached to a ternary, and just the end?
}
leadBlood.features[2].properties
mutable z = 123
d3 = require("d3@6", "d3-tile@1")
d3Fetch = require('d3-fetch')
L = require('leaflet@1.2.0')
leadBlood= d3.json("https://phl.carto.com/api/v2/sql?q=SELECT+*+FROM+child_blood_lead_levels_by_zip&filename=child_blood_lead_levels_by_zip&format=geojson&skipfields=cartodb_id")
//d3Fetch.json
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
// this keeps the map within the container, affects the 'let container = DOM.element' line
md` ### Source: https://www.opendataphilly.org/showcase/2015-philadelphia-child-blood-lead-levels-by-zip-map`
html`<h2>Insert a word here: ${funword}</h2>`
// ${} is probably like an f-literal
funword = "SINATRA"
boringword = html `<input type = text>`
html`<h2>Insert a word here: ${boringword}</h2>`
// boringword refers to the entire html element, not the text inside it. We need to get only the value.
html`<h2>Insert a word here: ${boringword.value}</h2>`
// viewof is a special cell. It tells Observable to update as the cell updates.
html`<h2 style = 'color:${myColor}'>Insert a word here: ${changingword}</h2>`
viewof changingword = html `<input type = text>`
//now the text changes as you type
viewof myColor = html`<input type = color>`
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.
