Create interactive map-like experience for big SVG file (non-map)
I've been trying to create a smooth map-like experience for exploring a big chart I've made using D3.js
Every node on the chart is linked to a particular webpage and I plan to add info-bubbles to display english translation. You can see some results below. (1) is very laggy when using the D3 function zoom and drag, but gives the appropriate result in terms of interactivity. Using libvips I was able to create custom PNG tiles to experiment with leaflet and openLayer. This works very nicely but have no interactivity at all. I was able to do a small openLayer app to display the entire SVG (6), but the result is laggy.
- D3 version - SVG - very laggy- (code)
- Zoomify version - jpeg Tiles - blurry - (code)
- Leaflet version I - unique PNG - laggy - (code)
- Leaflet version II - PNG Tiles - smooth - (code)
- OpenLayer Version I - PNG Tiles - very smooth - (code)
- OpenLayer Version II - unique SVG canvas ? - very laggy - (code)
- OpenLayer Version III - unique SVG native - laggy - (code)
I imagine it is possible to transfer the interactive data from the original SVG (I could use <a> element instead of .on("click")) and create a layer on top of the PNG tiles. But I have no idea how to do that. The other alternative I thought was to create SVG tiles or vector tiles, but I could not find anything about that or any library/software that would slice a SVG in tiled SVG files.
SVG mapper sounds promising when I read the description, but seems too specific to geo data to be useful. (Here is their working exemple, although the tiles are missing in the background and zoom is broken)
This leaflet + D3 is interesting also. (with improvement)
Any advice is welcome as I'm a bit stuck at the moment. Thanks !
I ended up adding markers on top of the PNG tiles with OpenLayers. One has to be careful when extracting the coordinates of the markers in D3 to match the coordinate system in OpenLayers.
The final code is in this repo in main.js. The resulting app is here
- Text in SVGs appears round/smooth when added to the resource system
- Putting an object in front of another one (and covering the whole other object)
- CSS styling for individual paths not working
- How to specify font-family in SVG
- Vertical Alignment of SVG in CSS
- Animated SVG border-image not honoring border-radius
- How to add inline SVGs in a nuxt3 vite project
- CSS transparent curved shape with two rounded sides
- svg @font-face works in svg but not when included in a page
- Remove or move frame that's drawn around focused AdvancedMarkerElement
- Can one pixelate images with an SVG filter?
- Change two objects inside a div on hover
- How to modify the fill color of an SVG image when being served as background image?
- Add onclick event to SVG element
- SVG exported from Inkscape are rendered with different font
- Simple svg css progress circle
- SVG inside flex misaligned when wrapped in div
- Why can <image> inside <svg> be :focus'ed?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I mix pattern and gradient into one path?
- How can I change the color of an 'svg' element?
- How to create a repeating SVG pattern?
- Using R to extract data from an SVG?
- Catmull-Rom interpolation on SVG Paths
- SVG Using Polygon and Symbol with dynamic points
- How to create a text mask with a reverse color of the SVG background using CSS?
- Trimming text to a given pixel width in SVG
- carrierwave png thumbnails from svg upload
- Can I add a mask to an svg-element without using an id?
- Images in SVG Image tags not showing up in Chrome, but displays locally?