xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } .title { font-weight: 500; text-transform: uppercase; text-anchor: middle; opacity: 0.25; color: #000; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; font-size: 10px; line-height: 28px; letter-spacing: 0.33em; } </style> </head><body> <svg width="1280" height="600"></svg> <script> // Hubs = Paris, Brest etc // Transit Lines connect hubs // Spawning from the hubs are lines which startups are located on var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 50}, width = innerWidth - margin.left - margin.right, height = innerHeight - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var scale = 2800; var projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(scale) .translate([width / 2, height / 2]); var path = d3.geoPath() .projection(projection); //create zoom handler //zoom actions is a function that performs the zooming. var zoom_handler = d3.zoom() .on("zoom", zoom_actions); // France Data d3.json("https://raw.githubusercontent.com/peter-doherty/oil-energy-french-startup-landscape/feb-update/map_data/master.geojson", function(err, mapData) { if (err) throw error; var features = mapData.features; // console.log(features); // Draw border and lines g.selectAll("path") .data(features) .enter() .append("path") .attr("d", path) .attr("fill", "white") .style("stroke", function (d) { return d.properties.stroke; }) .style("stroke-width", function (d) { return d.properties.stroke-width; }); // .style("stroke", "Steelblue") // .style("stroke-width", "1px"); //.shift() svg.selectAll("circle") .data(features) .enter() .append("circle") // .attr("cx", "2.35107421875") // .attr("cy", "48.879167148960214") .attr("cx", function(d) { return points.geometry.coordinates[0]; }) .attr("cy", function(d) { return points.geometry.coordinates[1]; }) .attr("r", 1) .style("fill", "red") .style("opacity", 0.75); // Map Title g.append("text") .attr("class", "title") .attr("x", width * 0.5) .attr("y", height * 0.4) .text('Oil & Energy | French Startup Map'); }); // Zoom https://www.puzzlr.org/zoom-in-d3v4-minimal-example/ //specify what to do when zoom event listener is triggered function zoom_actions(){ g.attr("transform", d3.event.transform); } //add zoom behaviour to the svg element //same as svg.call(zoom_handler); zoom_handler(svg); </script></body> https://d3js.org/d3.v4.min.js