D3 Examples - French Startup Map

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>French Startup Map | Oil &amp; Energy | Peter Doherty Copyright 2018</title>
</head>
​
<style>
    .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;
    }
​
    .place-label {
        font-size: 3px;
        fill: #444;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    }
​
    .startup-label {
        font-size: 1px;
        fill: #444;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
    }
​
    div.tooltip {
        position: absolute;
        text-align: center;
        padding: 4px;
        background: black;
        border: 0px;
        pointer-events: none;
    }
​
</style>
​
<body>
    <svg width="1280" height="600"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <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("lines+border.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", "#ddc")
                .attr("stroke", function (d) { return d.properties.stroke; })
                .attr("stroke-width", function (d) { return d.properties.stroke-width; });
​
            // //Load in startups and cities from CSV data
            d3.csv("master.csv", function(err, data) {
                if (err) throw error;
                
                g.selectAll("circle")
                .data(data)
                .enter()
                .append("circle")
                .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
                .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
                .attr("r", function(d) { return d.r * 0.25; })
                .style("fill", function(d) { return d["marker-color"]; });
​
                g.selectAll(".place-label")
                    .data(data)
                    .enter()
                    .append("text")
                    .attr("class", "place-label")
                    .attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; })
                    .attr("dy", ".35em")
                    .text(function(d) { return d.name; });
                
                g.selectAll(".startup-label")
                    .data(data)
                    .enter()
                    .append("text")
                    .attr("class", "startup-label")
                    .attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; })
                    .attr("dy", ".35em")
                    .text(function(d) { return d.id; });
​
            });
​
            // Map Title
            g.append("text")
                .attr("class", "title")
                .attr("x", width * 0.5)
                .attr("y", height * 0.4)
                .text('French Startup Map | Oil & Energy');
​
        });
        // 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);
​
            // Draw border and lines
            g.selectAll("path")
                .attr("d", path);
                // .attr("stroke", function (d) { return d.properties.stroke; })
                // .attr("stroke-width", function (d) { return d.properties.stroke-width / d3.event.transform.k; });
            
            g.selectAll("circle") 
                .attr("r", function(d) { return d.r * 0.25 / d3.event.transform.k; });
​
            g.selectAll(".place-label")
                .attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; });
​
            g.selectAll(".startup-label")
                .attr("transform", function(d) { return "translate(" + projection([d.lon, d.lat]) + ")"; });
               
        }
​
        //add zoom behaviour to the svg element 
        //same as svg.call(zoom_handler); 
        zoom_handler(svg);
    </script>
​
</body>
</html>
    