{
const container = html`<div style = "width:1000px;height:500px"></div>`
yield container
const map = L.map(container).setView([40.7934,-77.8600],7)
const baseLayer = L.tileLayer(osMap,{attribution:osmAttr}).addTo(map)
L.geoJSON(result,{
pointToLayer: (feature,latlng) => {
return L.circle(latlng,{
radius: feature.properties.income/5,
weight: 1,
opacity: 1,
fillOpacity: .6,
color: "black",
fillColor: "blue"
})
}
}).bindPopup(
(Layer) => {
const city = Layer.feature.properties.city
const income = Layer.feature.properties.income
const display = html`
<p>city: ${city}</p>
<p>median income: ${income}</p>
`
return display
}
).addTo(map)
}
data = FileAttachment("paCitiesIncome.csv").csv()
result = {
const cities = []
for(let i = 0;i < 56;i = i + 1){
cities.push({
type:"Feature",
geometry:{
type:"Point",
coordinates:[parseFloat(data[i].lon),parseFloat(data[i].lat)]
},
properties:{
city:data[i].city,
income:data[i].income
}
})
}
return cities
}
data[1]
data[1].city
data[1].income
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.
