Published
Edited
Oct 21, 2019
3 forks
13 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
map = {
const graphic = svg`
<svg id="memphis" viewBox="0 0 ${width} ${height}" style="width:100%;height:auto;">
<rect id="background" width="100%" height="100%" fill="${background_color}"/>
<g id="block_groups" fill="${majority_nonwhite_blockgroups_color}" fill-opacity="0.25">
${majority_minority_blockgroups.map(d => svg`<path d="${path(d)}"></path>`)}
</g>
${tiles.map(d => svg`
<g fill="${water_color}">
<path id="water" d="${path(filter(d.data.water, d => isLayer(d, 'water')))}"></path>
</g>
<g fill="none" stroke-opacity=0.75 stroke="#a5a5a5">
<path id="tertiary_road" stroke-width="${road_width * 0.5}" d="${path(filter(d.data.road, d => isLayer(d, 'tertiary')))}"></path>
<path id="secondary_road" stroke-width="${road_width * 0.7}" d="${path(filter(d.data.road, d => isLayer(d, 'secondary')))}"></path>
<path id="primary_road" stroke-width="${road_width * 0.9}" d="${path(filter(d.data.road, d => isLayer(d, 'primary')))}"></path>
<path id="trunk" stroke-width="${road_width * 1.0}" d="${path(filter(d.data.road, d => isLayer(d, 'trunk')))}"></path>
<path id="motorway" stroke-width="${road_width * 1.7}" d="${path(filter(d.data.road, d => isLayer(d, 'motorway')))}"></path>
<path id="link" stroke-width="${road_width * 0.95}" d="${path(filter(d.data.road, d => isLayer(d, 'link')))}"></path>
<path id="motorway_link" stroke-width="${road_width * 1.15}" d="${path(filter(d.data.road, d => isLayer(d, 'motorway_link')))}"></path>
<path id="rail" stroke-width="${road_width * 0.5}" d="${path(filter(d.data.road, d => isLayer(d, 'major_rail')))}"></path>
</g>
`)}
<g id="eviction_sorted" >
${eviction_cases.map(d => svg`<circle
cx="${projection(d.geometry.coordinates)[0]}"
cy="${projection(d.geometry.coordinates)[1]}"
r=${radiusScale(d.properties.cases)}
fill="${getIsFirstKey(d, eviction_color, '#604A46')}"
fill-opacity=${getIsFirstKey(d, 0.3, 0.05)}
stroke="${getIsFirstKey(d, eviction_color, '#604A46')}"
stroke-width=0
></circle>`)}"
</g>

${mapAttribution}
</svg>`
yield graphic;
d3.select('#memphis')
.append('g')
.attr('id', 'scale-bar')
.call(scaleBar);
return graphic;
}
Insert cell
Insert cell
Insert cell
Insert cell
radiusScale = d3.scalePow().exponent(0.5)
.domain([1, 11])
.range([3, 15]);
Insert cell
Insert cell
tiles = Promise.all(tile().map(async t => {
let data = new vt.VectorTile(new Protobuf(await d3.buffer(`https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v7/${t.z}/${t.x}/${t.y}.mvt?access_token=pk.eyJ1Ijoid2FzaGluZ3RvbnBvc3QiLCJhIjoibWJkTGx1SSJ9.6cMdwgs-AYrRtQsEkXlHqg`))).layers
t.data = Object.keys(data).reduce((initialData, key) => {
initialData[key] = {
type: "FeatureCollection",
features: [...Array(data[key].length).keys()].map((item, i) => {
let feature = data[key].feature(i).toGeoJSON(t.x, t.y, t.z)
if (key === 'water') {
feature.properties['class'] = 'water'
}
return feature
})
}

return initialData
}, {})
return t;
}))
Insert cell
t.layers.water.feature(0).toGeoJSON(1023, 1618, 12)
Insert cell
t.layers.road.length
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {attribution as mapAttribution}
with {height as attributionHeight}
from '@aboutaaron/mapbox-map-maker'
Insert cell

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.
Learn more