D3 Examples - Map with arrows

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8">
    <title>UVa's out-of-state students later creating ventures in Virginia</title>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>
    body {
        margin: 0;
        background-color: lightGray;
        font-family: Helvetica, Arial, sans-serif;
    }
    
    #container {
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
        padding: 50px;
        background-color: white;
        box-shadow: 3px 3px 5px 6px #ccc;
    }
    
    .map-tooltip {
        line-height: 1;
        font-size: 11px;
        padding: 8px;
        background: #F1EEDE;
        color: black;
        border-radius: 2px;
    }
    
    .outstate_line {
        stroke: #235281;
        stroke-opacity: 0.3;
        stroke-linecap: round;
        marker-start: url(#markerArrow);
    }
    
    .state {
        fill: #adc1cd;
        opacity: 0.3;
        stroke: black;
        stroke-width: 0.5px;
        stroke-linejoin: round;
    }
    
    .oustate:hover {
        opacity: .7;
    }
    
    svg {
        background-color: white;
    }
    </style>
</head>
​
<body>
    <div id="container">
        <h1>UVa's out-of-state students later creating ventures in Virginia</h1>
        <p>University of Virginia attracts students from all over the country. The map here shows a sample of such students who later went on to create ventures in Virginia.</p>
    </div>
    
    <script type="text/javascript">
    var tooltip = d3.select("body")
        .append("div")
        .attr("class", "map-tooltip")
        .style("position", "absolute")
​
    var w = 800,
        h = 600;
​
    var va_lon_lat = [-78.169968, 37.769335];
​
    var svg = d3.select("#container")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
​
    var wScale = d3.scale.linear()
        .domain([1, 77])
        .range([1, 15]);
​
    var cScale = d3.scale.linear()
        .domain([1, 77])
        .range(['#FFE4E4', '#FC0000'])
​
    var projection = d3.geo.albersUsa()
        .translate([w / 2, h / 2])
        .scale([1000]);
​
    var path = d3.geo.path()
        .projection(projection);
​
    d3.json("us-states.json", function(json) {
        d3.csv("outstate_va.csv", function(data) {
            var data_len = data.length;
            var json_len = json.features.length;
​
            for (var i = 0; i < data_len; i++) {
                for (var j = 0; j < json_len; j++) {
                    if (data[i].state == json.features[j].properties.name) {
                        json.features[j].properties.value = +data[i].value;
                    }
                }
            }
            svg.selectAll("line")
                .data(data)
                .enter()
                .append("line")
                .classed("outstate_line", true)
                .style("opacity", "0.6")
                .attr("stroke-width", function(d) {
                    return wScale(d.value);
                })
                .attr("x1", function(d) {
                    return projection([d.lon_state, d.lat_state])[0];
                })
                .attr("y1", function(d) {
                    return projection([d.lon_state, d.lat_state])[1];
                })
                .attr("x2", function(d) {
                    return projection(va_lon_lat)[0];
                })
                .attr("y2", function(d) {
                    return projection(va_lon_lat)[1];
                })
​
            svg.selectAll("path")
                .data(json.features)
                .enter()
                .append("path")
                .attr("d", path)
                .classed("state", function(d) {
                    if (d.properties.name === "Virginia") {
                        return false
                    } else {
                        return true
                    }
                })
                .attr("fill", "steelblue")
                .attr("stroke", "black")
                .classed("oustate", true)
                .on("mouseenter", function(d) {
                    if (d.properties.value) {
                        name = d.properties.name;
                        value = d.properties.value;
                        tooltip.html(name + " <b>" + value + "</b>")
                            .style("left", (d3.event.pageX - 15) + "px")
                            .style("top", (d3.event.pageY + 50) + "px")
                            .style("opacity", 1)
                    }
                })
                .on("mouseleave", function(d) {
                    tooltip
                        .style("opacity", 0);
                })
​
        });
​
    });
    </script>
</body>
​
</html>
​
    