interactive-vis-course/Week4/d3_dynamic_domain.html at gh-pages · arnicas/interactive-vis-course · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<!-- Modified version of Scott Murray's file from Knight D3 course -->
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Horizontal Bar - Dynamic Domain</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

			body {
				background-color: #ddddff;
			}

			svg {
				background-color: white;
			}

		</style>
	</head>
	<body>

		<h1>Water Access in 2015 by Region</h1>

		<script type="text/javascript">


			var height = 350;
			var width = 320;

			// Set up the range here - my output sizes for my bars - from 0 to width.
			var widthScale = d3.scale.linear()
								.range([ 0, width ]);

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


			d3.csv("data/water_improvement_data.csv", function(error, data) {

				if (error) {
					console.log(error);
				}

				data.sort(function(a, b) {
					return d3.descending(+a.year2015, +b.year2015); // make numeric
				});

				// set up the domain here, from the data i read in. I'm starting at 0, not min.
				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.year2015;
				}) ]);

				var rects = svg.selectAll("rect")
						.data(data)
						.enter()
						.append("rect");

				rects.attr("x", 0)
					.attr("y", function(d, i) {
							// this is a hack to space the bars - we can do it was axes later.
						return i * 20;   // just spacing the bars - notice from the top!
					})
					.attr("width", function(d) {
						return widthScale(+d.year2015); // use your scale here:
					})
					.attr("height", 10)
					.append("title")  // this is a simple (bad) tooltip
					.text(function(d) {
						return d.name + "'s access to good water: " + d.year2015 + "%";
					});

			});


		</script>

	</body>
</html>