I map 🗺️ & graph 📈 data 🈸
Published
Edited
Sep 13, 2018
2 forks
Chicago Taxi Trips Deck.gl Grid MapChicago Traffic TrackerChicago Average Daily Traffic Counts Deck.gl MapChicago Traffic Crashes Deck.gl HeatmapChicago Average Daily Traffic CountsChicago Red Light Camera ViolationsChicago Red Light Camera LocationsChicago Speed Camera ViolationsChicago Speed Camera LocationsChicago Homicides Leaflet MapChicago Homicides by Community Area LeafletChicago Community Areas LeafletLeaflet Pixi OverlayChicago Crimes HeatmapChicago Crimes Hexgrid MapCharter schools in Los Angeles County
Chicago Community Areas Vega
viewof map = embed({
width: width,
height: width * .6,
layer: layers,
config: {
view: {stroke: 'transparent'}
}
})
map.renderer('svg').run()
// todo: color by sides
layers = [{
data: {
url: topoJsonUrl,
format: {
type: 'topojson',
feature: 'chicago-community-areas'
},
},
projection: {
type: 'mercator',
},
mark: 'geoshape',
encoding: {
stroke: {value: '#333'},
fill: {value: '#ccc'},
tooltip: [
{field: 'properties.community', type: 'nominal', title: 'Community'},
],
},
}]
sideColors = d3[`scheme${'Pastel1'}`]
hoverStyle = html`
<style>
.vega-embed .mark-shape path:hover {
fill-opacity: 0.5;
fill: #000 !important;
}
</style>
`
geoData = d3.json(geoJsonUrl)
communityData = d3.csv(dataUrl)
sides = {
// group communities by side
const sides = {}
communityData.slice(1) // skip 1st null row
.map(community => {
if (!sides[community.Side]) {
sides[community.Side] = [];
}
sides[community.Side].push(community);
});
return sides;
}
communities = {
// create communities info map
const communities = {}
communityData.slice(1) // skip 1st null row
.map(community => communities[community.CommunityName.toLowerCase()] = community);
return communities;
}
features = addCommunityInfo(geoData, communities)
function addCommunityInfo(geoData, communities) {
geoData.features.map(feature => {
// replace community name with community info
const communityName = feature.properties.community.toLowerCase();
feature.properties.community = communities[communityName];
});
return geoData.features;
}
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.
