ma_dah/scatterplot.html at gh-pages · marypy/ma_dah · 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
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>scatterplots</title>
		<script type="text/javascript" src="d3.js"></script>
		<style type="text/css">
		p{
			padding: 10px}
		</style>
	</head>
	<body>
		<p>
			So, I try (always guided by Soctt Muray's book) to bind, into SVG, the data consisting in arrays of arrays.
		<br>
			For information: array (or list) is a chunk of data consisting of two or moreelements, for example: [10, 100].
		<br>
			Let's say, your have 10 bags of beans and 100 beans in each.
		<br>
			It can be the list (array) of arrays, like this [[10, 100], [20, 300], [85, 5]].
		<br>
			It is important that the first and following numbers correspond to the same type of data (in our case, first is
			an amount of bags and second, the beans in each bag).
		<br>
			So, this graph is a visual translation of the relation between just little bit more complexe data: amounts of
			bags will define the location on <em>x</em> axis and that, of beans in each bag, the location on
			<em>y</em> axis.
		<br>
			The size of circles, as we doubt, is defined by some (complicated) relation
			between both amounts.
		<br>
			Now, we need a 'scale' function.
		</p>
		<script type="text/javascript">

            var w = 600;
            var h = 200;

            var dataset = [
                [5, 20], [480, 90], [250, 50], [330, 95],[410, 12], [475, 44], [25, 67], [85, 21],
                [220, 88]
            ];


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

        svg.selectAll("circle")
			   .data(dataset)
			   .enter()
			   .append("circle")
               .attr("cx", function(d) {
			   		return d[0] +40;
			   })
                .attr("cy", function(d) {
			   		return d[1] +40;
			   })
			   .attr("r", function(d) {
			   		return Math.sqrt(h*2 - d[1]*4)
        })
                .style("fill", "blue");


            svg.selectAll("text")
			   .data(dataset)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   		return d[0] + " / " + d[1];
			   })
			   .attr("x", function(d) {
			   		return d[0]+60;
			   })
			   .attr("y", function(d) {
			   		return d[1]+50;
			   })
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "red");

            </script>
	</body>
</html>