This example shows a method to create an interactive map of a building. Inspired by the wayfinding design solutions commonly found in airports or shopping centers, this map is in 2.5D.
In particular, this example shows how to load an external SVG file with d3.js, how to lower the walls’ opacity via CSS to achieve a see-through effect, and how to make some zones of the map interactive (in this case, the rooms).
The SVG is an Inkscape-edited version of multiple PDF exports from Trimble’s Sketchup, an easy to use, freeware 3D graphic software. In order for this method to work, manual editing of the SVG and the adherence to a formal set of IDs, classes and layer names are required, making the solution not trivial to maintain. Despite this, the proposed solution achieves high levels of both aesthetical value and clarity of representation.