Bar Chart with Scales and Axes

This code example is the result of the Module 4's exercise from the course “Data Visualization and Infographics with D3,” taught by Alberto Cairo and Scott Murray, and offered through the Knight Center for Journalism in the Americas at UT Austin.

It is a simple horizontal bar chart with scales and axes. The bar chart represents seismic events, the magnitude of which is mapped to the width of each rectangle.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Exercise 4 - Horizontal Bar Chart with Scales and Axes</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style type="text/css">

body {
				font-family: sans-serif;
				color: #636363;
			}

h4, p {
				width: 940px;
				margin: 5px 20px;
			}

p {
				font-size: 13px;
				line-height: 1.1em;
			}

svg {
				background-color: #fff;
			}

a {
				text-decoration: none;
				color: #bcbd22;
				font-weight: bold;
			}

a:hover {
				color: #17becf;
			}

rect.bar {
				fill: #bcbd22;
			}

rect.bar:hover {
				fill: #17becf;
			}

text {
				fill: #000;
			}

.axis path,
			.axis line {
				fill: none;
				stroke: #636363;
				shape-rendering: crispEdges;
			}

.axis text {
				font-size: 11px;
				fill: #636363;
			}

.y.axis path,
			.y.axis line {
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<h4>Seismic Events reported on March 20, 2015</h4>

<p>The data of the seismic events (mostly of type <i>earthquake</i>) was taken from a
			<a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php" target="_blank">real-time feed</a>
			(including hourly, daily, weekly, and monthly feeds) provided by the website of
			<a href="https://earthquake.usgs.gov/" target="_blank">US Geological Survey (USGS)</a>. The bar chart is a subset
			filtered by time to represent the events that occured between midnight
			and 8 a.m. sorted by <a href="https://earthquake.usgs.gov/learn/glossary/?term=magnitude" target="_blank">magnitude</a>.</p>

margin = {
				top: 5,
				right: 10,
				bottom: 30,
				left: 280
			};

width = 960 - margin.left - margin.right;
			height = 430 - margin.top - margin.bottom;

xScale = d3.scale.linear()
								.range([0, width]);

yScale = d3.scale.ordinal()
								.rangeBands([0, height], 0.1);

xAxis = d3.svg.axis()
								.scale(xScale)
								.orient("bottom");

yAxis = d3.svg.axis()
								.scale(yScale)
								.orient("left");

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 + ")");

// Filters the dataset by time to include only data points between
			// midnight and 8 a.m.
			function filterByTime(time) {
				var start,
					end,
					t;

// Start at midnight
				start = new Date(2015, 2, 20, 0, 0, 0).getTime();
				// End at 8 a.m.
				end = new Date(2015, 2, 20, 8, 0, 0).getTime();
				// Time the event occured
				t = new Date(time.time).getTime();

return start <= t && t <= end;
			}

d3.csv("earthquakes_all_day.csv", function(data) {
				var filteredByTime;

filteredByTime = data.filter(filterByTime);

filteredByTime.sort(function(a, b) {
					return d3.descending(a.mag, b.mag);
				});

xScale.domain([0, d3.max(filteredByTime, function(d) {
					return +d.mag;
				})]);

yScale.domain(filteredByTime.map(function(d) {
					return d.place;
				}));

bars = svg.selectAll("rect.bar")
					.data(filteredByTime, function(d, i) {
						return d.id;
					})
					.enter()
					.append("rect");

bars
					.attr("class", "bar")
					.attr("x", 0)
					.attr("y", function(d, i) {
						return yScale(d.place);
					})
					.attr("width", function(d) {
						return xScale(d.mag);
					})
					.attr("height", yScale.rangeBand())
					.append("title")
					.text(function(d) {
						var dateTime;
						dateTime = new Date(d.time);
						return "At " + dateTime.toTimeString() + " on " + dateTime.toDateString() +
							" a seismic event of type " + d.type.toUpperCase() + " with a magnitude of " + d.mag +
							" occured in " + d.place;
					});

xAxisGroup = svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0, " + (height) + ")")
					.call(xAxis);

yAxisGroup = svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(0,0)")
					.call(yAxis);

});

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js