Maps, Infovis, Code
street = streets.features.filter(street => street.properties.name == "Billrothstraße")[0]
projection = d3.geoMercator().fitExtent([[margin, margin], [width - margin, height - margin]], street)
pathGenerator = d3.geoPath().projection(projection)
mapPath = pathGenerator(street)
getLinearCoords = function(pos) {
return [Math.round(margin+(width-2*margin)*pos), margin];
}
normalizePath = function(path, geometryFunction, closeGaps) {
// geometryFunction will be passed a float index from 0..1 and should return a point
// on the normalized geometry at that position
if (closeGaps === undefined) closeGaps = true; // close gaps by default
let command_letters = 'mlhvaqtcs',
commands = [],
newPath = '';
let i;
// find all command letters in the path
// preserve 'M' (moveto) commands, replace all other commends by 'L' (lineto)
for (i=0; i<path.length; i++) {
let c = path[i].toLowerCase();
for (var j=0; j<command_letters.length; j++) {
if (c == command_letters[j]) {
if (c == 'm') commands.push('M');
else commands.push('L');
break;
}
}
}
let num = commands.length,
coords;
// assemble new path string, using the replaced commands and
// the normalized coordinates produced by geometryFunction
if (num == 1) {
// special case: single command (does not usually happen)
coords = geometryFunction(0);
newPath = commands[0] + coords[0] + ',' + coords[1];
}
else {
for (i=0; i<num; i++) {
newPath += commands[i];
if (closeGaps && commands[i] == 'M' && i>0) {
// bridge gaps caused by (moveto) commands by using previous coordinates
coords = geometryFunction((i-1)/(num-1));
}
else {
coords = geometryFunction(i/(num-1));
}
newPath += coords[0] + ',' + coords[1];
}
return newPath;
}
}
diagramPath = normalizePath(mapPath, getLinearCoords)
button = {
let button = html`<input type="button" value="Transition to Diagram">`
button.style.fontSize = "1.2em";
let isMap = true
button.addEventListener('click', function() {
d3.select(streetSVG).select('path')
.interrupt() // cancel any ongoing transitions
.transition()
.duration(3000) // make it sloooooow
.ease(d3.easeLinear) // use linear motion
.attr('d',isMap ? diagramPath : mapPath)
button.value = isMap ? "Transition to Map" : "Transition to Diagram"
isMap = !isMap
})
return button
}
getCircleCoords = function(pos) {
let center = [width/2, height/2],
r = Math.min(width, height)/2 - margin
// return coordinates on a half-circle
return [center[0] + Math.sin((pos-0.5)*Math.PI) * r, center[1] + Math.cos((-pos-0.5)*Math.PI) * r];
}
circlePath = normalizePath(mapPath, getCircleCoords, false)
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.
