Simple example of loading in a json file for the path data world map Define a couple of world locations using lat long for specifying points on the map Ideas for further testing 1 Add hover over info for the points 2 Draw a line from the start to the end two points 3 Hover over the line it shows popup giving extra information e g distance 4 Let the mouse click and add new locations 5 Add more colors 6 Enable zooming draging 7 Mix in other graphics e g maps flags script type text javascript src https d3js org d3 v7 min js script script src https d3js org topojson v3 js script script const places name Wollongong Australia location latitude 34 42507 longitude 150 89315 name Newcastle Australia location latitude 55 9096602 longitude 3 3203494 const width 960 const height 480 const projection d3 geoEquirectangular scale 100 translate width 2 height 2 precision 1 const path d3 geoPath projection projection const color d3 scaleQuantize 1 10 d3 schemeBlues 9 var svg d3 select body append svg attr width width attr height height d3 json https raw githubusercontent com n1n9 jp CSIS_map_140514 master data world 50m json then world draw land blue svg insert path graticule datum topojson feature world world objects land attr class land attr fill color Math random 10 attr d path draw location points long lat svg selectAll circle data places enter append circle style stroke blue style fill orange attr r 5 attr transform function d let val projection d location longitude d location latitude console log val let r translate val return r script
height 2 precision 1 const path d3 geoPath projection projection const color d3 scaleQuantize 1 10 d3 schemeBlues 9 var svg d3 select body append svg attr width width attr height height d3 json https raw githubusercontent com n1n9 jp CSIS_map_140514 master data world 50m json then world draw land blue svg insert path graticule datum topojson feature world world objects land attr class land attr fill color Math random 10 attr d path draw location points long lat svg selectAll circle data places enter append circle style stroke blue style fill orange attr r 5 attr transform function d let val projection d location longitude d location latitude console log val let r translate val return r script