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)
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.