D3 Examples - Unicorns of the world

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Where the Unicorns are</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
​
        <script src="https://code.jquery.com/jquery-2.0.0.js"></script>
        <style>
            #map {
                width: 960px;
                height: 500px;
            }
            #map g {
                stroke-width: 1px;
            }
            circle {
                fill: #ff6666;
                fill-opacity: .5;
                stroke: black;
                stroke-width: .1px;
            }
            circle:hover{
                cursor: pointer;
            }
            #countries {
                fill: #cde;
            }
        </style>
    </head>
​
    <body>
        <div class="container">
            <div class="row">
                <h1> Unicorns </h1>
                <div id="map"></div>
                    <script src="https://d3js.org/d3.v3.min.js"></script>
                    <script src="https://d3js.org/topojson.v1.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js"></script>
                    <script>
                        var width = 960,
                            height = 600,
                            country,
                            device_width = $("#map").width();
                        var map = new L.Map("map", { 
                                    center: [37.153379, -15.463745],
                                    zoom: 2});
                        var mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
                                
                        L.tileLayer(
                            'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                            attribution: '&copy; ' + mapLink + ' Contributors',
                            maxZoom: 18,
                            }).addTo(map);
                        map._initPathRoot();        
                        var svg = d3.select("#map")
                            .select("svg");
                        var group = svg.append("g")
                                    //.attr("class", "leaflet-zoom-hide");
                        // var tooltip = d3.select("body")
                        //     .append("div")
                        //     .style("position", "absolute")
                        //     .style("z-index", "10")
                        //     .style("visibility", "hidden")
                        //     .style("color", "white")
                        //     .style("padding", "8px")
                        //     .style("background-color", "rgba(0, 0, 0, 0.75)")
                        //     .style("border-radius", "6px")
                        //     .style("font", "12px sans-serif")
                        //     .text("tooltip");
                        // d3.json("./countries.topo.json", function(error, data) {
                        //  group.append("g")
                        //      .attr("id", "countries")
                        //      .selectAll("path")
                        //      .data(topojson.feature(data, data.objects.countries).features)
                        //          .enter()
                        //          .append("path")
                        //          .attr("id", function(d){ return d.id; })
                        //          .attr("d", path)
                        //          .style("fill", "#9c9c9c")
                        //          .style("stroke", "#fff")
                        //          .on("click", zoom);
                        // });
                        var radius = d3.scale.sqrt()
                                        .domain([1, 51])
                                        .range([2, 15]);
                        d3.csv("unicorns.csv", function(error, uni) {
                            //console.log(uni);
                            uni.forEach(function(d){
                                d.LatLng = new L.LatLng(d["latitude"], d["longitude"])
                            });
                        var feature = group.selectAll("circle")
                                .data(uni)
                                .enter()
                                    .append("circle")
                                    .style("stroke", "black")  
                                    .style("opacity", .6) 
                                    .style("fill", "#CD2626")
                                    .attr("r", function(d) {
                                        return radius(d.Valuation);
                                    })
                                    .on("click", function (d, i) {
                                        //console.log(d, i);
                                        map.openPopup(d.Company, 
                                            L.latLng(d.latitude, d.longitude));
                                    });
                                    // // .bindPopup(function(d) {
                                    // //   return "<b>" + d.Company + "</b>";
                                    // // })
                                    // .openPopup();
                        map.on("viewreset", update);
                        update();
                        function update() {
                            feature.attr("transform",
                                function(d) {
                                    return "translate(" + 
                                        map.latLngToLayerPoint(d.LatLng).x +","+ 
                                        map.latLngToLayerPoint(d.LatLng).y +")";
                                });
                        }  
                            // group.append("g")
                            // .selectAll("circle")
                            // .data(uni)
                            // .enter()
                            // .append("circle")
                            // .attr("class", "bubble")
                            //  .attr("cx", function(d,i) { 
                            //      return projection([+d["longitude"], +d["latitude"] ])[0];
                            //  })
                            //  .attr("cy", function(d,i) { 
                            //      return projection([+d["longitude"], +d["latitude"] ])[1];
                            //  })
                            //  .attr("r", "3")
                            //  // .attr("r", function(d) {
                            //  //  return radius(d.Valuation);
                            //  // })
                            //  .on("mouseover", function(d) {
                   //                    tooltip.text(d.Company);
                   //                    tooltip.style("visibility", "visible");
                   //            })
                   //            .on("mousemove", function() {
                   //                return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
                   //            })
                   //            .on("mouseout", function(){return tooltip.style("visibility", "hidden");});;
                        
                        });
                        //svg.call(zoom);
                        
                        //https://www.tnoda.com/blog/2013-12-07
                        $(window).resize(function() {
                              var w = $("#map").width();
                              svg.attr("width", w);
                              svg.attr("height", w * height / width);
                            });
                    </script>
    </body>
</html>
    