interactive-vis-course/Week5/scatter_skeleton.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
142
143
144
145
146
147
148
149
150
151
152
<!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.dots {
				fill: steelblue;
			}

			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">


		// It is better to use the object style with margin.top, margin.right, etc.

			var fullwidth = 700;
			var fullheight = 600;

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

			// what do you need to do to make the width and height for the chart?
			var height = fullHeight // minus what?
			var width = fullWidth // minus what?

			var dotRadius = 3; // fix this to a nice value.

			// fill in the margin values here.
			var xScale = d3.scale.linear()
								.range([ what range here? ]);

			// top to bottom:
			var yScale = d3.scale.linear()
								.range([ what here? ]);

			//  Custom tick count if you want it.
			// Create your axes here.
			var xAxis = d3.svg.axis()
							.scale(xScale)
							.orient("bottom")
							.ticks(2);  // fix this to a good number of ticks for your scale later.

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

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


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

				// look at the data file and pick 2 columns to contrast with each other.

				xScale.domain(
					d3.extent(data, function(d) {
						// pick a data value to plot on x axis
					}));

				yScale.domain(
					d3.extent(data, function(d) {
						// pick a data value to plot for y axis
					}));

				var circles = svg.selectAll("circle")
								// fill in the rest of the data, enter, append here.

				// add a class to the circles - ".dots".

				// Circles in SVG have cx, cy, and r attributes. x location, y location, radius.

				circles.attr("cx", function(d) {
						// return the value to use for your x scale here
					})
					.attr("cy", function(d) {
						// return the value to use for your y scale here
					})
					.attr("r", dotRadius)  // you might want to increase your dotRadius
					.attr("fill" // add a fill rule with a special case for one of the countries
					.append("title")
					.text(function(d) {
						// fill in a text string here for your cheap tooltip
					});

				// fix these translates so they use your margin and height width as needed
				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - padding[2]) + ")")
					.call( // fill in the name of your xaxis function here ).

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + (padding[3]) + ",0)")
					.call( // fill in the name of your yaxis function here).

			});


		</script>

	</body>
</html>