Engineering Manager, The Washington Post. Formerly of Post Graphics and @datadesk.
Published
Edited
Oct 21, 2019
3 forks
13 stars
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;
}
radiusScale = d3.scalePow().exponent(0.5)
.domain([1, 11])
.range([3, 15]);
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;
}))
t.layers.water.feature(0).toGeoJSON(1023, 1618, 12)
t.layers.road.length
import {attribution as mapAttribution}
with {height as attributionHeight}
from '@aboutaaron/mapbox-map-maker'
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.
