The avatar for @floledermann
Florian Ledermann
Maps, Infovis, Code
Public
Edited
Aug 5, 2020
Fork of Transitions from Maps to Diagrams, Part 1
•
11 forks
116 stars
Maps
Topographic MappingBubble mapChoroplethAccess to Family planningMD Counties Total Cases MapTendance de la production des déchets en Union EuropéenneAndy's Walgreens COVID-19 Tracker TrackerElection Maps for Incomplete ResultsA better U.S. house election results map?1983 Mayoral Election, Dot density mapsMastodon 🐘Cheat sheet bertinBertin.js: regular squaresWaterlinesNeumorphism Contour Density MapCartographic DoodlesStars and constellationsPlot: Grid choroplethHello Polygon MorphingMapping with pie chartsU.S. Geographic DataHow big are countries... like really!AttitudeB&W ChoroplethWeb Mercator Tile VisibilityMARTINI: Real-Time RTIN Terrain Mesh"Magnifying-Glass" projectionsTissot's indicatrixAntipodal mapMapping gridded data with a Voronoi diagramA Map of Every BuildingUrbano Monti’s Planisphere (1587)Bivariate choroplethDIY HillshadeMapbox Map MakerWorld tourHillshaderSimplified Earth with curved shapesHexbin mapInner glowNicolosi vs. StereographicData-driven projections: Darwin's worldSatellite ground track visualizerDirection to shoreHello, OpenLayers!U.S. airports VoronoiHello, NYC Geosearch API!Mapbox Fly-ToSpilhaus shoreline mapWalmart’s growthHow well does population density predict U.S. voting outcomes?
Drawing maps from geodata with D3 & Observable
Hexgrid maps with d3-hexgridTissot's indicatrixWorld airports VoronoiSwiss Elevation Line GraphsVector tilesVersor draggingOrthographicSolar TerminatorStreaming ShapefilesFake GlobesPeirce Quincuncial🍃 LeafletU.S.G.S. World Earthquake MapUsing Mapbox GL JSUsing Google Maps
Also listed in…
Maps
Tutorials
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
streets = d3.json('https://gist.githubusercontent.com/floledermann/92a56b764a92b55a857f5115236146b2/raw/b80ac35cc40de5651c6715c6abc4f8dd23b78c5e/streetnames_gender.geojson')
Insert cell
Insert cell
street = streets.features.filter(street => street.properties.name == "Billrothstraße")[0]
Insert cell
Insert cell
Insert cell
projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], street)
// top left bottom right geometry
Insert cell
Insert cell
lonLatPoint = [16.34636, 48.24332] // a point in Vienna, Austria
Insert cell
Insert cell
projectedPoint = projection(lonLatPoint) // the geographic coordinates are transformed into map coordinates
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pathGenerator = d3.geoPath().projection(projection)
Insert cell
Insert cell
mapPath = pathGenerator(street)
Insert cell
Insert cell
streetMap = {
// create SVG element
let svg = d3.select(DOM.svg(width, height))
// construct the element
svg.append('path')
.datum(street)
.attr('d', pathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '2')
// pass to Observable to draw this block
return svg.node()
}
Insert cell
Insert cell
viennaProjection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], streets)
Insert cell
viennaPathGenerator = d3.geoPath().projection(viennaProjection)
Insert cell
streetsMap = {
let svg = d3.select(DOM.svg(width, height))
// construct the path elements using the D3 data join
svg.selectAll('path')
// data() expects an Array, so make sure to pass the features entry of our FeatureCollection
.data(streets.features)
// select all data items that are not represented on the map yet, and add them
.enter()
.append('path')
// assign attributes to those new elements
.attr('d', viennaPathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
.attr('stroke-width', '0.5')
// pass to Observable to draw this block
return svg.node()
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
widthScale = d3.scaleLinear()
.domain([0,5]) // input values will be between 0 and 5
.range([0.3,4]) // output values should be between 0.3 (for the lowest input) and 4 (for the highest)
Insert cell
Insert cell
widthScale(2)
Insert cell
Insert cell
streetsMapDynamic = {
let svg = d3.select(DOM.svg(width, height))
svg.selectAll('path')
.data(streets.features)
.enter()
.append('path')
.attr('d', viennaPathGenerator)
.attr('fill', 'none')
.attr('stroke', '#999999')
// use a callback function to calculate the stroke width based on the 'w' property
.attr('stroke-width', function(d) {
// access the 'w' property and use our scale to calculate the correct width
return widthScale(d.properties.w);
})
return svg.node()
}
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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more