interactive-vis-course/Week5/scatter_formatting_ticks.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Formatting Ticks</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: white;
				font-family: Helvetica, Arial, sans-serif;
			}

			h1 {
				font-size: 24px;
				margin: 0;
			}

			p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

			svg {
				background-color: white;
			}

			circle:hover {
				fill: orange;
			}

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

			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}

		</style>
	</head>
	<body>

		<h1>Life Satisfaction</h1>

		<p>Better Life Index &ldquo;Life Satisfaction&rdquo; scores vs. percentage of population reporting good or better health. Source: <a href="http://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p>

		<script type="text/javascript">


		// Scott is "cheating" and not using the full pattern for margins.
		// It is better to use the object style with margin.top, margin.right, etc.

			var fullWidth = 700;
			var fullHeight = 600;
			var margin = {top:20, right:10, bottom:50, left:50};  //Top, right, bottom, left

			var width = fullWidth - margin.left - margin.right;
			var height = fullHeight - margin.top - margin.bottom;

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

			// top to bottom:
			var yScale = d3.scale.linear()
								.range([ height, 0 ]);

			//  Custom tick count -- 15. // still needs a transform on it
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(15);

		// Custom format on ticks - just a string return, not a function here
			var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.tickFormat(function(d) {
								return d + "%"
							});

			var svg = d3.select("body")
						.append("svg")
						.attr("width", fullWidth)
						.attr("height", fullHeight)
						.append("g")
							.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


			d3.csv("data/betterlifeindex.csv", function(data) {

				xScale.domain(
					d3.extent(data, function(d) {
						return +d.lifeSatisfaction;
					}));

				yScale.domain(
					d3.extent(data, function(d) {
						return +d.selfReportedHealth;
					}));

				var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

				circles.attr("cx", function(d) {
						return xScale(+d.lifeSatisfaction);
					})
					.attr("cy", function(d) {
						return yScale(+d.selfReportedHealth);
					})
					.attr("r", 4)
					.attr("fill", "steelblue")
					.append("title")
					.text(function(d) {
						return d.country + "'s life satisfaction score is " + d.lifeSatisfaction + ", and " + d.selfReportedHealth + "% report good health";
					});

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

				svg.append("g")
					.attr("class", "y axis")
					.call(yAxis);

			});


		</script>

	</body>
</html>