Maps, Infovis, Code
streets = d3.json('https://gist.githubusercontent.com/floledermann/92a56b764a92b55a857f5115236146b2/raw/b80ac35cc40de5651c6715c6abc4f8dd23b78c5e/streetnames_gender.geojson')
street = streets.features.filter(street => street.properties.name == "Billrothstraße")[0]
projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], street)
// top left bottom right geometry
lonLatPoint = [16.34636, 48.24332] // a point in Vienna, Austria
projectedPoint = projection(lonLatPoint) // the geographic coordinates are transformed into map coordinates
pathGenerator = d3.geoPath().projection(projection)
mapPath = pathGenerator(street)
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()
}
viennaProjection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], streets)
viennaPathGenerator = d3.geoPath().projection(viennaProjection)
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()
}
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)
widthScale(2)
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()
}
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.
