π Public
D3 Course 7: World Map
This example demonstrates an interactive world map using D3 v5 and TopoJSON data from the world-atlas package. It renders countries with the Natural Earth projection via d3.geoPath, applies an ocean sphere outline, and colors landmasses light green with black strokes. The map supports panning and zooming through d3.zoom, highlights countries in red on hover via CSS, and displays country names using tooltips sourced from a TSV lookup file.
AI-generated descriptionData Visualization with D3 course; World Map
<h3>Making a World Map</h3> <table> <th align="left">Topics</th> <tr> <td> <ul> <li><b>Loading and parsing TOPOJSON</b></li> <li><b>Rendering geagraphic features</b></li> <li><b>Using different map projections</b></li> <li><b>Rendering projected sphere outline</b></li> <li><b>Tweaking map style</b></li> <li><b>Styling Tricks for interaction</b> <ul> <li><b>Highlight on Hover (using CSS)</b></li> <li><b>Adding simple tooltips</b></li> <li><b>Panning & Zooming</b></li> </ul> </li> </ul> </td> </tr> </table>MIT Licensed
Comments
Sign in to join the discussion.