Old school D3 from simpler times

All examples By author By category About

lmelgar

Full window Github gist

Week 4: barchart

<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Total Infant Mortality since 2000</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

<style type="text/css">
		@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
			/*body {
				background-color: #ddddff;
			}*/
			svg {
				background-color: rgba(235, 235, 235, 0.3);
			}

#text {
				margin-bottom: 40px;
			}

h1{
				font-family: "Open sans", sans-serif;
				text-transform: uppercase;
				font-weight: 700;
				color: #0099FF;
				margin-top: 10px;
			}

p {
				width: 400px;
				font-family: "Open sans";
				font-size: 16px;
				font-weight: 100;
				line-height: 1.7;
			}

#source p {
			  font-size: 15px;
			}

em {
				font-style: normal;
				font-weight: 600;
				color: black;
			}

</style>
	</head>
	<body>

<h1>Total Infant Mortality</h1>
		<div id="text">
			<p><em>This barchart shows infant mortality by country since 2000.</p>
			<div id="source">
				<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a>.</p>
			</div>
		</div>

<script type="text/javascript">
			var height = 35050;
			var width = 400;
			// Set up the range here - my output sizes
			var widthScale = d3.scale.linear()
								.range([ 0, width ]);
			var svg = d3.select("body")
						.append("svg")
						.attr("width", width)
						.attr("height", height);
			d3.csv("deaths_04yearsold.csv", function(error, data) {
				if (error) {
					console.log(error);
				}
				data.sort(function(a, b) {
					return d3.descending(+a.Total, +b.Total);
				});
				// set up the domain here, from the data i read in.
				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.Total;
				}) ]);
				var rects = svg.selectAll("rect")
						.data(data)
						.enter()
						.append("rect")
						.attr("fill", "#0099FF");
				rects.attr("x", 0)
					.attr("y", function(d, i) {
						return i * 20;   // just spacing the bars - notice from the top
					})
					.attr("width", function(d) {
						return widthScale(d.Total);
					})
					.attr("height", 10)
					.append("title")  // this is a simple (bad) tooltip
					.text(function(d) {
						return d.Country + " was: " + d.Total;
					});
			});
		</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js