{"version":"1.0","type":"rich","title":"d3.js map with markers","description":"This example demonstrates two techniques for placing geographic markers on a d3.js map, centered on Berlin using a Mercator projection. The map renders world land masses and country boundaries from TopoJSON, overlaid with a graticule. Transit stop locations from a GeoJSON file are displayed in two ways: first, by leveraging d3.geo.path() to draw the GeoJSON directly as green path elements; second, by projecting coordinates to screen positions and appending small yellow SVG circles. The visualization compares these two marker approaches, showing that d3.geo.path() handles all projection work automatically, while the manual method uses projection(d.geometry.coordinates) to position custom SVG shapes. The example uses d3.v3 with SVG rendering and a Mercator projection centered on Berlin.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-f2f7882b8f5605457f4c8e46d2ee7014?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}