oil-energy-french-startup-landscape

Licence MIT

Peter Doherty 2018

<!DOCTYPE html>
<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