Simple Horizontal Bar Chart

This code example is the result of the Module 3'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 showing seismic events measured on March 20, 2015. The data set is sorted by the size of the event, given by the magnitude (mag) in the earthquakes_all_day.csv file. The result is then limited so that only the top ten data entries are used to make the horizontal bar chart.

The value of the magnitude is mapped to the width of each rectangle.

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

body {
				font-family: sans-serif;
			}

svg {
				background-color: #fff;
			}

div.legend-container {
				position: absolute;
				left: 600px;
				top: 160px;
				background-color: #fff;
			}

p {
				width: 280px;
				font-size: 14px;
				color: #7b4173;
				margin: 10px;
				position: absolute;
				top: 70px;
			}

a {
				text-decoration: none;
				color: #969696;
				display: block;
				margin: 10px 0;
			}

.legend {
				stroke: #d9d9d9;
				stroke-width: 2;
				fill: none;
			}

rect.bar {
				fill: #d9d9d9;
			}

text {
				fill: #7b4173;
			}

</style>
	</head>
	<body>
		<script type="text/javascript">
			var margin,
				barPadding,
				width,
				height,
				svg,
				legendDIV,
				p,
				legendSVG,
				limitedData,
				bars,
				labels
				;

margin = {
				top: 20,
				right: 10,
				bottom: 20,
				left: 10
			};
			barPadding = 2;
			width = 960 - margin.left -margin.right;
			height = 500 -margin.top -margin.bottom;

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

legendDIV = d3.select("body")
				.append("div")
				.attr("class", "legend-container");

p = legendDIV.append("p")
				.text("The bar chart is limited to 10 seismic events, sorted by magnitude. Hovering over "+
					"the bars will reveal a tooltip to inform about the type of the event and its geographic region.");

p.append("a")
				.attr("href", "https://earthquake.usgs.gov/learn/glossary/?term=magnitude")
				.attr("target", "_blank")
				.text("What is magnitude?");

p.append("a")
				.attr("href", "https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php")
				.attr("target", "_blank")
				.text("Link to data source");

legendSVG = legendDIV.append("svg")
				.attr("width", width / 3)
				.attr("height", height / 2)
				.style("background-color", "transparent")
				.append("g");

legendSVG.append("polyline")
				.attr("points", "22,14 2,14 2,210 310,210 310,210 310,14 274,14")
				.attr("class", "legend");

legendSVG.append("text")
				.attr("x", 26)
				.attr("y", 20)
				.text(function(d) {
					return "Seismic events on March 20, 2015";
				})
				.attr("font-size", "16");

legendSVG.append("rect")
				.attr("class", "bar")
				.attr("x", 10)
				.attr("y", 40)
				.attr("width", 20)
				.attr("height", 20);

legendSVG.append("text")
				.attr("x", 35)
				.attr("y", 56)
				.text(function(d) {
					return "The magnitude for the seismic event [-1.0, 10.0]";
				})
				.attr("font-size", "12");

d3.csv("earthquakes_all_day.csv", function(data) {

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

// Limits the dataset to only hold the first ten data points.
				limitedData = data.slice(0,10);

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

bars
					.attr("class", "bar")
					.attr("x", 0)
					.attr("y", function(d, i) {
						return i * (height / limitedData.length);
					})
					.attr("width", function(d) {
						return d.mag * 100;
					})
					.attr("height", height / limitedData.length - barPadding)
					.append("title")
					.text(function(d) {
						return "Type of seismic event: " + d.type.toUpperCase() + "\nGeographic region: " + d.place ;
					});

labels = svg.selectAll("text.label")
					.data(limitedData, function(d) {
						return d.id;
					})
					.enter()
					.append("text");

labels
					.attr("class", "label")
					.text(function(d, i) {
						return d.mag;
					})
					.attr("text-anchor", "end")
					.attr("x", function(d, i) {
						return d.mag * 100 - 5;
					})
					.attr("y", function(d, i) {
						return i * (height / limitedData.length) + (height / limitedData.length - barPadding) / 2;
					})
					.attr("font-family", "sans-serif")
					.attr("font-size", "24")
					.attr("dy", function(d, i) {
						return d3.select(this).attr("font-size") / 2 - barPadding;
					});
			});

</script>

</body>
</html>

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

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