asifm/index.html

## index.html
<!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>

## outstate_va.csv

          
            state
            value
            lat_state
            lon_state

            
              Arizona
              1
              33.729761
              -111.431224

            
              Arkansas
              1
              34.969705
              -92.373124

            
              Hawaii
              1
              21.094319
              -157.498339

            
              Kansas
              1
              38.526599
              -96.726489

            
              Maine
              1
              44.693948
              -69.381924

            
              Oregon
              1
              44.57202
              -122.070939

            
              Colorado
              2
              39.05981
              -105.311105

            
              Iowa
              2
              42.011538
              -93.210526

            
              Mississippi
              2
              32.741647
              -89.678697

            
              New Mexico
              2
              34.840514
              -106.248483

            
              Vermont
              2
              44.045877
              -72.710689

            
              Louisiana
              3
              31.169546
              -91.867805

            
              Oklahoma
              3
              35.565342
              -96.928919

            
              New Hampshire
              4
              43.452491
              -71.563899

            
              Utah
              4
              40.150032
              -111.862433

            
              Wisconsin
              4
              44.268544
              -89.616509

            
              Alabama
              6
              32.806673
              -86.791133

            
              Indiana
              6
              39.849425
              -86.258278

            
              Minnesota
              6
              45.694455
              -93.900189

            
              South Carolina
              7
              33.856893
              -80.945011

            
              Washington
              7
              47.400902
              -121.490493

            
              Delaware
              8
              39.318522
              -75.507138

            
              Illinois
              8
              40.349455
              -88.986137

            
              Kentucky
              9
              37.668141
              -84.670064

            
              Michigan
              10
              43.326618
              -84.536093

            
              Missouri
              11
              38.456087
              -92.288368

            
              West Virginia
              11
              38.491226
              -80.954452

            
              Tennessee
              12
              35.747845
              -86.692343

            
              California
              13
              36.116203
              -119.681563

            
              Florida
              13
              27.766279
              -81.686782

            
              Ohio
              13
              40.388781
              -82.764916

            
              District of Columbia
              15
              38.897439
              -77.026816

            
              Texas
              15
              31.054487
              -97.56346

            
              Connecticut
              19
              41.597781
              -72.755369

            
              Georgia
              19
              33.040618
              -83.643072

            
              Massachusetts
              22
              42.230173
              -71.530104

            
              North Carolina
              31
              35.630066
              -79.806417

            
              Pennsylvania
              51
              40.590752
              -77.209755

            
              New Jersey
              57
              40.298904
              -74.521013

            
              Maryland
              60
              39.063944
              -76.802101

            
              New York
              77
              42.165724
              -74.948052

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>
state	value	lat_state	lon_state
Arizona	1	33.729761	-111.431224
Arkansas	1	34.969705	-92.373124
Hawaii	1	21.094319	-157.498339
Kansas	1	38.526599	-96.726489
Maine	1	44.693948	-69.381924
Oregon	1	44.57202	-122.070939
Colorado	2	39.05981	-105.311105
Iowa	2	42.011538	-93.210526
Mississippi	2	32.741647	-89.678697
New Mexico	2	34.840514	-106.248483
Vermont	2	44.045877	-72.710689
Louisiana	3	31.169546	-91.867805
Oklahoma	3	35.565342	-96.928919
New Hampshire	4	43.452491	-71.563899
Utah	4	40.150032	-111.862433
Wisconsin	4	44.268544	-89.616509
Alabama	6	32.806673	-86.791133
Indiana	6	39.849425	-86.258278
Minnesota	6	45.694455	-93.900189
South Carolina	7	33.856893	-80.945011
Washington	7	47.400902	-121.490493
Delaware	8	39.318522	-75.507138
Illinois	8	40.349455	-88.986137
Kentucky	9	37.668141	-84.670064
Michigan	10	43.326618	-84.536093
Missouri	11	38.456087	-92.288368
West Virginia	11	38.491226	-80.954452
Tennessee	12	35.747845	-86.692343
California	13	36.116203	-119.681563
Florida	13	27.766279	-81.686782
Ohio	13	40.388781	-82.764916
District of Columbia	15	38.897439	-77.026816
Texas	15	31.054487	-97.56346
Connecticut	19	41.597781	-72.755369
Georgia	19	33.040618	-83.643072
Massachusetts	22	42.230173	-71.530104
North Carolina	31	35.630066	-79.806417
Pennsylvania	51	40.590752	-77.209755
New Jersey	57	40.298904	-74.521013
Maryland	60	39.063944	-76.802101
New York	77	42.165724	-74.948052