Zhenmao/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>US State Capitals</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body,
    text {
      font-family: sans-serif;
      font-size: 14px;
    }

    .capital:hover {
      stroke: #7A7A7A;
      stroke-width: 1.5;
    }

    .tooltip {
      position: absolute;
      background: #fff;
      pointer-events: none;
      padding: 8px 12px;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    }
  </style>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
  <script>
    var margin = { top: 30, right: 30, bottom: 30, left: 30 };
    var width = 960 - margin.left - margin.right;
    var height = 560 - margin.top - margin.bottom;

    var projection = d3.geoAlbersUsa();
    var geoPath = d3.geoPath(projection);

    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip");

    Promise
      .all([
        d3.json("us-states.json"),
        d3.json("us-state-capitals.json")
      ])
      .then(function(data) {
        var states = data[0];
        var capitals = data[1];

        projection.fitSize([width, height], states)

        svg.append("g")
          .attr("class", "states")
          .selectAll("path")
          .data(states.features)
          .enter().append("path")
          .attr("class", "state")
          .attr("stroke", "#7A7A7A")
          .attr("fill", "#EDEDED")
          .attr("d", geoPath);

        svg.append("g")
          .attr("class", "capitals")
          .selectAll("circle")
          .data(capitals)
          .enter().append("circle")
          .attr("class", "capital")
          .attr("fill", "steelblue")
          .each(function(d) {
            var pos = projection([d.lon, d.lat]);
            d.cx = pos[0];
            d.cy = pos[1];
          })
          .attr("cx", function(d) {
            return d.cx;
          })
          .attr("cy", function(d) {
            return d.cy;
          })
          .attr("r", 4.5)
          .on("mouseover", showTooltip)
          .on("mouseout", hideTooltip);
      });

    function showTooltip(d) {
      var html = "<span>" + d.city + "</span>, <span>" + d.state + "</span>";
      tooltip.html(html);
      tooltip
        .style("left", window.pageXOffset + d3.event.x + 12 + "px")
        .style("top", window.pageYOffset + d3.event.y + 12 + "px")
        .transition()
        .style("opacity", 1);
    }

    function hideTooltip() {
      tooltip
        .transition()
        .style("opacity", 0);
    }

  </script>
</body>
</html>

## us-state-capitals.json
[
  {"lon":-86.279118, "lat":32.361538, "state":"Alabama", "city":"Montgomery"},
  {"lon":-134.41974, "lat":58.301935, "state":"Alaska", "city":"Juneau"},
  {"lon":-112.073844, "lat":33.448457, "state":"Arizona", "city":"Phoenix"},
  {"lon":-92.331122, "lat":34.736009, "state":"Arkansas", "city":"Little Rock"},
  {"lon":-121.468926, "lat":38.555605, "state":"California", "city":"Sacramento"},
  {"lon":-104.984167, "lat":39.7391667, "state":"Colorado", "city":"Denver"},
  {"lon":-72.677, "lat":41.767, "state":"Connecticut", "city":"Hartford"},
  {"lon":-75.526755, "lat":39.161921, "state":"Delaware", "city":"Dover"},
  {"lon":-84.27277, "lat":30.4518, "state":"Florida", "city":"Tallahassee"},
  {"lon":-84.39, "lat":33.76, "state":"Georgia", "city":"Atlanta"},
  {"lon":-157.826182, "lat":21.30895, "state":"Hawaii", "city":"Honolulu"},
  {"lon":-116.237651, "lat":43.613739, "state":"Idaho", "city":"Boise"},
  {"lon":-89.650373, "lat":39.78325, "state":"Illinois", "city":"Springfield"},
  {"lon":-86.147685, "lat":39.790942, "state":"Indiana", "city":"Indianapolis"},
  {"lon":-93.620866, "lat":41.590939, "state":"Iowa", "city":"Des Moines"},
  {"lon":-95.69, "lat":39.04, "state":"Kansas", "city":"Topeka"},
  {"lon":-84.86311, "lat":38.197274, "state":"Kentucky", "city":"Frankfort"},
  {"lon":-91.140229, "lat":30.45809, "state":"Louisiana", "city":"Baton Rouge"},
  {"lon":-69.765261, "lat":44.323535, "state":"Maine", "city":"Augusta"},
  {"lon":-76.501157, "lat":38.972945, "state":"Maryland", "city":"Annapolis"},
  {"lon":-71.0275, "lat":42.2352, "state":"Massachusetts", "city":"Boston"},
  {"lon":-84.5467, "lat":42.7335, "state":"Michigan", "city":"Lansing"},
  {"lon":-93.094, "lat":44.95, "state":"Minnesota", "city":"Saint Paul"},
  {"lon":-90.207, "lat":32.32, "state":"Mississippi", "city":"Jackson"},
  {"lon":-92.189283, "lat":38.572954, "state":"Missouri", "city":"Jefferson City"},
  {"lon":-112.027031, "lat":46.595805, "state":"Montana", "city":"Helena"},
  {"lon":-96.675345, "lat":40.809868, "state":"Nebraska", "city":"Lincoln"},
  {"lon":-119.753877, "lat":39.160949, "state":"Nevada", "city":"Carson City"},
  {"lon":-71.549127, "lat":43.220093, "state":"New Hampshire", "city":"Concord"},
  {"lon":-74.756138, "lat":40.221741, "state":"New Jersey", "city":"Trenton"},
  {"lon":-105.964575, "lat":35.667231, "state":"New Mexico", "city":"Santa Fe"},
  {"lon":-73.781339, "lat":42.659829, "state":"New York", "city":"Albany"},
  {"lon":-78.638, "lat":35.771, "state":"North Carolina", "city":"Raleigh"},
  {"lon":-100.779004, "lat":48.813343, "state":"North Dakota", "city":"Bismarck"},
  {"lon":-83.000647, "lat":39.962245, "state":"Ohio", "city":"Columbus"},
  {"lon":-97.534994, "lat":35.482309, "state":"Oklahoma", "city":"Oklahoma City"},
  {"lon":-123.029159, "lat":44.931109, "state":"Oregon", "city":"Salem"},
  {"lon":-76.875613, "lat":40.269789, "state":"Pennsylvania", "city":"Harrisburg"},
  {"lon":-71.422132, "lat":41.82355, "state":"Rhode Island", "city":"Providence"},
  {"lon":-81.035, "lat":34, "state":"South Carolina", "city":"Columbia"},
  {"lon":-100.336378, "lat":44.367966, "state":"South Dakota", "city":"Pierre"},
  {"lon":-86.784, "lat":36.165, "state":"Tennessee", "city":"Nashville"},
  {"lon":-97.75, "lat":30.266667, "state":"Texas", "city":"Austin"},
  {"lon":-111.892622, "lat":40.7547, "state":"Utah", "city":"Salt Lake City"},
  {"lon":-72.57194, "lat":44.26639, "state":"Vermont", "city":"Montpelier"},
  {"lon":-77.46, "lat":37.54, "state":"Virginia", "city":"Richmond"},
  {"lon":-122.893077, "lat":47.042418, "state":"Washington", "city":"Olympia"},
  {"lon":-81.633294, "lat":38.349497, "state":"West Virginia", "city":"Charleston"},
  {"lon":-89.384444, "lat":43.074722, "state":"Wisconsin", "city":"Madison"},
  {"lon":-104.802042, "lat":41.145548, "state":"Wyoming", "city":"Cheyenne"}
]

## us-states.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-states.json
            
          
      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>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>US State Capitals</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body,
	text {
	font-family: sans-serif;
	font-size: 14px;
	}

	.capital:hover {
	stroke: #7A7A7A;
	stroke-width: 1.5;
	}

	.tooltip {
	position: absolute;
	background: #fff;
	pointer-events: none;
	padding: 8px 12px;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
	}
	</style>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	</head>
	<body>
	<script>
	var margin = { top: 30, right: 30, bottom: 30, left: 30 };
	var width = 960 - margin.left - margin.right;
	var height = 560 - margin.top - margin.bottom;

	var projection = d3.geoAlbersUsa();
	var geoPath = d3.geoPath(projection);

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip");

	Promise
	.all([
	d3.json("us-states.json"),
	d3.json("us-state-capitals.json")
	])
	.then(function(data) {
	var states = data[0];
	var capitals = data[1];

	projection.fitSize([width, height], states)

	svg.append("g")
	.attr("class", "states")
	.selectAll("path")
	.data(states.features)
	.enter().append("path")
	.attr("class", "state")
	.attr("stroke", "#7A7A7A")
	.attr("fill", "#EDEDED")
	.attr("d", geoPath);

	svg.append("g")
	.attr("class", "capitals")
	.selectAll("circle")
	.data(capitals)
	.enter().append("circle")
	.attr("class", "capital")
	.attr("fill", "steelblue")
	.each(function(d) {
	var pos = projection([d.lon, d.lat]);
	d.cx = pos[0];
	d.cy = pos[1];
	})
	.attr("cx", function(d) {
	return d.cx;
	})
	.attr("cy", function(d) {
	return d.cy;
	})
	.attr("r", 4.5)
	.on("mouseover", showTooltip)
	.on("mouseout", hideTooltip);
	});

	function showTooltip(d) {
	var html = "<span>" + d.city + "</span>, <span>" + d.state + "</span>";
	tooltip.html(html);
	tooltip
	.style("left", window.pageXOffset + d3.event.x + 12 + "px")
	.style("top", window.pageYOffset + d3.event.y + 12 + "px")
	.transition()
	.style("opacity", 1);
	}

	function hideTooltip() {
	tooltip
	.transition()
	.style("opacity", 0);
	}

	</script>
	</body>
	</html>
	[
	{"lon":-86.279118, "lat":32.361538, "state":"Alabama", "city":"Montgomery"},
	{"lon":-134.41974, "lat":58.301935, "state":"Alaska", "city":"Juneau"},
	{"lon":-112.073844, "lat":33.448457, "state":"Arizona", "city":"Phoenix"},
	{"lon":-92.331122, "lat":34.736009, "state":"Arkansas", "city":"Little Rock"},
	{"lon":-121.468926, "lat":38.555605, "state":"California", "city":"Sacramento"},
	{"lon":-104.984167, "lat":39.7391667, "state":"Colorado", "city":"Denver"},
	{"lon":-72.677, "lat":41.767, "state":"Connecticut", "city":"Hartford"},
	{"lon":-75.526755, "lat":39.161921, "state":"Delaware", "city":"Dover"},
	{"lon":-84.27277, "lat":30.4518, "state":"Florida", "city":"Tallahassee"},
	{"lon":-84.39, "lat":33.76, "state":"Georgia", "city":"Atlanta"},
	{"lon":-157.826182, "lat":21.30895, "state":"Hawaii", "city":"Honolulu"},
	{"lon":-116.237651, "lat":43.613739, "state":"Idaho", "city":"Boise"},
	{"lon":-89.650373, "lat":39.78325, "state":"Illinois", "city":"Springfield"},
	{"lon":-86.147685, "lat":39.790942, "state":"Indiana", "city":"Indianapolis"},
	{"lon":-93.620866, "lat":41.590939, "state":"Iowa", "city":"Des Moines"},
	{"lon":-95.69, "lat":39.04, "state":"Kansas", "city":"Topeka"},
	{"lon":-84.86311, "lat":38.197274, "state":"Kentucky", "city":"Frankfort"},
	{"lon":-91.140229, "lat":30.45809, "state":"Louisiana", "city":"Baton Rouge"},
	{"lon":-69.765261, "lat":44.323535, "state":"Maine", "city":"Augusta"},
	{"lon":-76.501157, "lat":38.972945, "state":"Maryland", "city":"Annapolis"},
	{"lon":-71.0275, "lat":42.2352, "state":"Massachusetts", "city":"Boston"},
	{"lon":-84.5467, "lat":42.7335, "state":"Michigan", "city":"Lansing"},
	{"lon":-93.094, "lat":44.95, "state":"Minnesota", "city":"Saint Paul"},
	{"lon":-90.207, "lat":32.32, "state":"Mississippi", "city":"Jackson"},
	{"lon":-92.189283, "lat":38.572954, "state":"Missouri", "city":"Jefferson City"},
	{"lon":-112.027031, "lat":46.595805, "state":"Montana", "city":"Helena"},
	{"lon":-96.675345, "lat":40.809868, "state":"Nebraska", "city":"Lincoln"},
	{"lon":-119.753877, "lat":39.160949, "state":"Nevada", "city":"Carson City"},
	{"lon":-71.549127, "lat":43.220093, "state":"New Hampshire", "city":"Concord"},
	{"lon":-74.756138, "lat":40.221741, "state":"New Jersey", "city":"Trenton"},
	{"lon":-105.964575, "lat":35.667231, "state":"New Mexico", "city":"Santa Fe"},
	{"lon":-73.781339, "lat":42.659829, "state":"New York", "city":"Albany"},
	{"lon":-78.638, "lat":35.771, "state":"North Carolina", "city":"Raleigh"},
	{"lon":-100.779004, "lat":48.813343, "state":"North Dakota", "city":"Bismarck"},
	{"lon":-83.000647, "lat":39.962245, "state":"Ohio", "city":"Columbus"},
	{"lon":-97.534994, "lat":35.482309, "state":"Oklahoma", "city":"Oklahoma City"},
	{"lon":-123.029159, "lat":44.931109, "state":"Oregon", "city":"Salem"},
	{"lon":-76.875613, "lat":40.269789, "state":"Pennsylvania", "city":"Harrisburg"},
	{"lon":-71.422132, "lat":41.82355, "state":"Rhode Island", "city":"Providence"},
	{"lon":-81.035, "lat":34, "state":"South Carolina", "city":"Columbia"},
	{"lon":-100.336378, "lat":44.367966, "state":"South Dakota", "city":"Pierre"},
	{"lon":-86.784, "lat":36.165, "state":"Tennessee", "city":"Nashville"},
	{"lon":-97.75, "lat":30.266667, "state":"Texas", "city":"Austin"},
	{"lon":-111.892622, "lat":40.7547, "state":"Utah", "city":"Salt Lake City"},
	{"lon":-72.57194, "lat":44.26639, "state":"Vermont", "city":"Montpelier"},
	{"lon":-77.46, "lat":37.54, "state":"Virginia", "city":"Richmond"},
	{"lon":-122.893077, "lat":47.042418, "state":"Washington", "city":"Olympia"},
	{"lon":-81.633294, "lat":38.349497, "state":"West Virginia", "city":"Charleston"},
	{"lon":-89.384444, "lat":43.074722, "state":"Wisconsin", "city":"Madison"},
	{"lon":-104.802042, "lat":41.145548, "state":"Wyoming", "city":"Cheyenne"}
	]