Today we're going to attempt to make a minimap to help users navigate as they explore a dataset in detail through pan and zoom. We'll make use of d3.zoom and d3.brush to power the interaction.
D3.js version 6 looks pretty bug-free, so we'll be updating to it. See new import on this file. There is a migration guide to highlight the changes.
There will be a few items pending after this demo. First, one probably should also enable click interaction on the minimap so that analysts can "jump" to a new place. Second, it may be more efficient to draw the minimap in canvas form so that you can conserve browser resources. Since you don't need to update those contents as frequently or keep as high fidelity, canvas is a good choice. Third, the minimap in the corner leaves some free space below it for some additional details, perhaps through mouseovers. You might try adding a foreignObject tag within the SVG and putting a data table there to get some practice.