JenHLab · April 4, 2016 13:55
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!-- The code from Mike's block demo'ing US counties in topojson: https://bl.ocks.org/mbostock/4090848 -->
 <meta charset="utf-8">
 <head>

 <link href='https://fonts.googleapis.com/css?family=Merriweather:400,400italic' rel='stylesheet' type='text/css'>
 <style>

 path {
  stroke: white;
  fill:#329932;
  opacity: .7;
  
 }

 circle {
    fill: #cc0000;
    
 }

 /* Style for Custom Tooltip */
 div.tooltip {
    position: absolute;
    text-align: center;
    min-width: 20px;
    height: 30px;
    padding: 2px;
    font: 12px sans-serif;
    background: white;
    border-radius: 5px;
    pointer-events: none;
 }

 .tooltip p {
    margin: 10px;
 }

 h1{
  font-family: 'Merriweather', serif;
 }

 </style>
 </head>
 <body>
 <h1>Most Congested Cities in the US</h1>
 <p>The map shows that 10 of America's most congested cities are located on the coast. Most of these cities have a realiable transportation infrastructure, yet traffic is a major issue.
 <br><br>
 Hover the mouse over each city to see how it ranks among top congested cities and the average extra commuting hours experienced in the area. The size of the circle is proportional to the average commuting hours.
 </p>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="https://d3js.org/queue.v1.min.js"></script>
 <script type="text/javascript">

 var width = 960,
    height = 500;

 var projection = d3.geo.albersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

 var path = d3.geo.path()
    .projection(projection);

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    // Append Div for tooltip to SVG
 var div = d3.select("body")
            .append("div")
            .attr("class", "tooltip")
            .style("display", "none");

 //var color = d3.scale.category20c();

 // we use queue because we have 2 data files to load.
 queue()
  .defer(d3.json, "us_counties_topo.json")
  .defer(d3.csv, "topcities.csv") // process
  .await(loaded);

 function loaded(error, us, cities) {
  if (error) throw error;

  //var states = topojson.feature(us, us.objects.states);


  svg.selectAll("path.state")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
      .attr("d", path);

  svg.selectAll("circle")
        .data(cities)
        .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 Math.sqrt(d.hours);
        })
        .on("mouseover", function(d) {
            div.transition()
               .duration(200)
               .style("display", null);
            div.html("<p>Commuters in the " + d.place + " area experience " + d.hours + " hours of yearly delay because of traffic congestion.</p>")
               .style("left", (d3.event.pageX + 10) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
        })
        // fade out tooltip on mouse out
        .on("mouseout", function(d) {
            div.transition()
               .duration(500)
               .style("display", "none");
        });
      


 }; // end loaded;

 </script>
 <p style="font-size: 14px;">
  <b>Sources:</b> 
  <br>
  <a href="factfinder.census.gov"> American FactFinder</a>. US Census Bureau. 2016.
  <br>
  <a href="http://d2dtl5nnlpfr0r.cloudfront.net/tti.tamu.edu/documents/mobility-scorecard-2015.pdf"> 2015 Urban Mobility Scorecard</a>. Texas AM Transportation Institute. 2015.
 </p>
 </body>
 </html>
diff --git a/topcities.csv b/topcities.csv
diff --git a/us_counties_topo.json b/us_counties_topo.json
	<!DOCTYPE html>
	<!-- The code from Mike's block demo'ing US counties in topojson: https://bl.ocks.org/mbostock/4090848 -->
	<meta charset="utf-8">
	<head>

	<link href='https://fonts.googleapis.com/css?family=Merriweather:400,400italic' rel='stylesheet' type='text/css'>
	<style>

	path {
	stroke: white;
	fill:#329932;
	opacity: .7;

	}

	circle {
	fill: #cc0000;

	}

	/* Style for Custom Tooltip */
	div.tooltip {
	position: absolute;
	text-align: center;
	min-width: 20px;
	height: 30px;
	padding: 2px;
	font: 12px sans-serif;
	background: white;
	border-radius: 5px;
	pointer-events: none;
	}

	.tooltip p {
	margin: 10px;
	}

	h1{
	font-family: 'Merriweather', serif;
	}

	</style>
	</head>
	<body>
	<h1>Most Congested Cities in the US</h1>
	<p>The map shows that 10 of America's most congested cities are located on the coast. Most of these cities have a realiable transportation infrastructure, yet traffic is a major issue.
	<br><br>
	Hover the mouse over each city to see how it ranks among top congested cities and the average extra commuting hours experienced in the area. The size of the circle is proportional to the average commuting hours.
	</p>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
	<script type="text/javascript">

	var width = 960,
	height = 500;

	var projection = d3.geo.albersUsa()
	.scale(1000)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	// Append Div for tooltip to SVG
	var div = d3.select("body")
	.append("div")
	.attr("class", "tooltip")
	.style("display", "none");

	//var color = d3.scale.category20c();

	// we use queue because we have 2 data files to load.
	queue()
	.defer(d3.json, "us_counties_topo.json")
	.defer(d3.csv, "topcities.csv") // process
	.await(loaded);

	function loaded(error, us, cities) {
	if (error) throw error;

	//var states = topojson.feature(us, us.objects.states);


	svg.selectAll("path.state")
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append("path")
	.attr("d", path);

	svg.selectAll("circle")
	.data(cities)
	.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 Math.sqrt(d.hours);
	})
	.on("mouseover", function(d) {
	div.transition()
	.duration(200)
	.style("display", null);
	div.html("<p>Commuters in the " + d.place + " area experience " + d.hours + " hours of yearly delay because of traffic congestion.</p>")
	.style("left", (d3.event.pageX + 10) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	// fade out tooltip on mouse out
	.on("mouseout", function(d) {
	div.transition()
	.duration(500)
	.style("display", "none");
	});



	}; // end loaded;

	</script>
	<p style="font-size: 14px;">
	<b>Sources:</b>
	<br>
	<a href="factfinder.census.gov"> American FactFinder</a>. US Census Bureau. 2016.
	<br>
	<a href="http://d2dtl5nnlpfr0r.cloudfront.net/tti.tamu.edu/documents/mobility-scorecard-2015.pdf"> 2015 Urban Mobility Scorecard</a>. Texas AM Transportation Institute. 2015.
	</p>
	</body>
	</html>
hours	place	lat	lon
52	Miami	25.7617	-80.1918
82	Washington DC-VA-MD	38.9072	-77.0369
80	Los Angeles-Long Beach-Anaheim CA	34.0522	-118.2437
78	San Francisco-Oakland CA	37.7749	-122.4194
74	New York-Newark NY-NJ-CT	40.7128	-74.0059
64	Boston MA-NH-RI	42.3601	-71.0589
63	Seatle WA	47.6062	-122.3321
61	Chicago IL-IN	41.8781	-87.6298
61	Houston TX	29.7604	-95.3698
53	Dallas-Forth Worth-Arlington TX	32.7767	-96.7970
52	Atlanta GA	33.7490	-84.3880
52	Detroit Mi	42.3314	-83.0458
52	Miami FL	25.7617	-80.1918
51	Phoenix-Mesa AZ	33.4484	-112.0740
48	Philadelphia PA-NJ-DE-MD	39.9526	-75.1652
42	San Diego CA	32.7157	-117.1611