dougdowson · April 22, 2020 08:53
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <meta charset="utf-8">
 <html>
 <head>

 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
 <script src="http://d3js.org/d3.v3.min.js"></script>

 <style>

 body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #333;
  font-weight: 400;
 }

 #content {
  margin: 5px;
  padding: 20px;
  width: 805px;
  border: 1px solid #ccc;
 }

 #map {
  margin: 10px 0px 0px 0px;
  padding: 0px;
 }

 h1, h2 {
  line-height: 1em;
  font-size: 1.75em;
  font-weight: 900;
  color: #000;
 }

 h2.year, h2.count {
  margin: 5px 0px 0px 0px;
  font-size: 1.3em;
  font-weight: 700;
 }

 p {
  margin: 10px 0px 0px 0px;
 }

 input {
  display: block;
  width: 200px;
  margin: 10px 0px 0px 0px;
 }

 .states {
  fill: #f5eede;
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
 }

 .openings {
  fill: #f5eede;
  stroke: #8D0600;
  stroke-width: 2;
 }

 .openings:hover {
  fill: #8D0600;
 }

 .locations{
  fill: #f5eede;
  stroke: #C0392B;
  stroke-width: 1;
  opacity: 0.7;
 }

 .tooltip {
  position: absolute;
  padding: 7px;
  font-size: 0.9em;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;

  -moz-box-shadow:    3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow:         3px 3px 10px 0px rgba(0, 0, 0, 0.25);
 }

 .tooltip p {
  margin: 0;
  padding: 0;
 }

 </style>
 </head>

 <body>
 <div id="content">
 	<h1>Walmart Store Openings, 1962-2013</h1>
 	<h2 class="year"></h2>
 	<h2 class="count"></h2>
 	<input id="menu" type="range" min="1962" max="2013" step="1" value ="1962"/>
 	<div id="map"></div>
 	<script type="text/javascript" src="map.js"></script>
 </div>
 </body>
 </html>
diff --git a/map.js b/map.js
 var width = 800;
 var height = 500;

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

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

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

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

 d3.json("us-states.json", function(json){
 	svg.selectAll("path")
 		.data(json.features)
 		.enter()
 		.append("path")
 			.attr("d",path)
 			.attr("class", "states")
 });

 d3.csv("walmart-stores.csv",function(csv) {
 	initialData = csv;
 	drawLocations();
 	drawOpenings();
 });

 function drawLocations() {
 	svg.selectAll("circle")
 		.data(initialData)
 		.enter()
 		.append("circle")
 			.attr("cx", function(d) {
 			return projection([d.longitude, d.latitude])[0];
 			})
 			.attr("cy", function(d) {
 			return projection([d.longitude, d.latitude])[1];
 			})
 			.attr("r", 3)
 			.attr("class", "locations");
 };

 function drawOpenings() {
 	d3.selectAll(".openings")
 	.remove();

 	var selectedYear = document.getElementById("menu").value;
 	var filteredData = initialData.filter(function(d) { return d.openyear == selectedYear; });

 	var openings = svg.selectAll(".openings")
 		.data(filteredData)
 		.enter()
 		.append("circle")
 			.attr("cx", function(d) {
 			return projection([d.longitude, d.latitude])[0];
 			})
 			.attr("cy", function(d) {
 			return projection([d.longitude, d.latitude])[1];
 			})
 			.attr("r", 3)
 			.attr("class", "openings");

 	openings
 		.on("mouseover", function(d) {
 			tooltip.transition()
 			.duration(250)
 			.style("opacity", 1);
 			tooltip.html(
 			"<p><strong>" + d.city + ", " + d.state + "</strong></p>"
 			)
 			.style("left", (d3.event.pageX + 15) + "px")
 			.style("top", (d3.event.pageY - 28) + "px");
 		})
 		.on("mouseout", function(d) {
 			tooltip.transition()
 			.duration(250)
 			.style("opacity", 0);
 		});

 	d3.select(".year").text("Year: " + selectedYear);

 	var countByYear=d3.nest()
 		.key(function(d) {return d.openyear;})
 		.rollup(function(values) { return values.length; })
 		.entries(filteredData);

 	d3.select(".count")
 	.text(function(d,i) {
        return "New Stores: " + countByYear[i].values
      });

 };

 d3.select("#menu")
 	.on("input", function () {
 		drawOpenings();
 });

 d3.select(self.frameElement).style("height", "675px");
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/us-states.json b/us-states.json
diff --git a/walmart-stores.csv b/walmart-stores.csv
	<!DOCTYPE HTML>
	<meta charset="utf-8">
	<html>
	<head>

	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<style>

	body, h1, h2, h3, p {
	margin: 0;
	padding: 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 1em;
	color: #333;
	font-weight: 400;
	}

	#content {
	margin: 5px;
	padding: 20px;
	width: 805px;
	border: 1px solid #ccc;
	}

	#map {
	margin: 10px 0px 0px 0px;
	padding: 0px;
	}

	h1, h2 {
	line-height: 1em;
	font-size: 1.75em;
	font-weight: 900;
	color: #000;
	}

	h2.year, h2.count {
	margin: 5px 0px 0px 0px;
	font-size: 1.3em;
	font-weight: 700;
	}

	p {
	margin: 10px 0px 0px 0px;
	}

	input {
	display: block;
	width: 200px;
	margin: 10px 0px 0px 0px;
	}

	.states {
	fill: #f5eede;
	stroke: #fff;
	stroke-width: 2;
	stroke-linejoin: round;
	}

	.openings {
	fill: #f5eede;
	stroke: #8D0600;
	stroke-width: 2;
	}

	.openings:hover {
	fill: #8D0600;
	}

	.locations{
	fill: #f5eede;
	stroke: #C0392B;
	stroke-width: 1;
	opacity: 0.7;
	}

	.tooltip {
	position: absolute;
	padding: 7px;
	font-size: 0.9em;
	pointer-events: none;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;

	-moz-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
	}

	.tooltip p {
	margin: 0;
	padding: 0;
	}

	</style>
	</head>

	<body>
	<div id="content">
	<h1>Walmart Store Openings, 1962-2013</h1>
	<h2 class="year"></h2>
	<h2 class="count"></h2>
	<input id="menu" type="range" min="1962" max="2013" step="1" value ="1962"/>
	<div id="map"></div>
	<script type="text/javascript" src="map.js"></script>
	</div>
	</body>
	</html>
	var width = 800;
	var height = 500;

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

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

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

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

	d3.json("us-states.json", function(json){
	svg.selectAll("path")
	.data(json.features)
	.enter()
	.append("path")
	.attr("d",path)
	.attr("class", "states")
	});

	d3.csv("walmart-stores.csv",function(csv) {
	initialData = csv;
	drawLocations();
	drawOpenings();
	});

	function drawLocations() {
	svg.selectAll("circle")
	.data(initialData)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.longitude, d.latitude])[0];
	})
	.attr("cy", function(d) {
	return projection([d.longitude, d.latitude])[1];
	})
	.attr("r", 3)
	.attr("class", "locations");
	};

	function drawOpenings() {
	d3.selectAll(".openings")
	.remove();

	var selectedYear = document.getElementById("menu").value;
	var filteredData = initialData.filter(function(d) { return d.openyear == selectedYear; });

	var openings = svg.selectAll(".openings")
	.data(filteredData)
	.enter()
	.append("circle")
	.attr("cx", function(d) {
	return projection([d.longitude, d.latitude])[0];
	})
	.attr("cy", function(d) {
	return projection([d.longitude, d.latitude])[1];
	})
	.attr("r", 3)
	.attr("class", "openings");

	openings
	.on("mouseover", function(d) {
	tooltip.transition()
	.duration(250)
	.style("opacity", 1);
	tooltip.html(
	"<p><strong>" + d.city + ", " + d.state + "</strong></p>"
	)
	.style("left", (d3.event.pageX + 15) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	tooltip.transition()
	.duration(250)
	.style("opacity", 0);
	});

	d3.select(".year").text("Year: " + selectedYear);

	var countByYear=d3.nest()
	.key(function(d) {return d.openyear;})
	.rollup(function(values) { return values.length; })
	.entries(filteredData);

	d3.select(".count")
	.text(function(d,i) {
	return "New Stores: " + countByYear[i].values
	});

	};

	d3.select("#menu")
	.on("input", function () {
	drawOpenings();
	});

	d3.select(self.frameElement).style("height", "675px");