-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathscatterplot_example.html
81 lines (72 loc) · 1.89 KB
/
scatterplot_example.html
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MDS Scatterplot Example</title>
<style>
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
text {
font-size : 12px;
}
.axis text {
font-size: 10px;
}
circle {
stroke: #1f77b4;
fill : #1f77b4;
}
</style>
</head>
<body>
<div id="cities"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<script src="./mds.js"></script>
<script>
var cityData = [[0, 587, 1212, 701, 1936, 604, 748, 2139, 2182, 543],
[587, 0, 920, 940, 1745, 1188, 713, 1858, 1737, 597],
[1212, 920, 0, 879, 831, 1726, 1631, 949, 1021, 1494],
[701, 940, 879, 0, 1374, 968, 1420, 1645, 1891, 1220],
[1936, 1745, 831, 1374, 0, 2339, 2451, 347, 959, 2300],
[604, 1188, 1726, 968, 2339, 0, 1092, 2594, 2734, 923],
[748, 713, 1631, 1420, 2451, 1092, 0, 2571, 2408, 205],
[2139, 1858, 949, 1645, 347, 2594, 2571, 0, 678, 2442],
[2182, 1737, 1021, 1891, 959, 2734, 2408, 678, 0, 2329],
[543, 597, 1494, 1220, 2300, 923, 205, 2442, 2329, 0]]
var labels = [
'Atlanta',
'Chicago',
'Denver',
'Houston',
'Los Angeles',
'Miami',
'New York',
'San Francisco',
'Seattle',
'Washington, DC'];
var cityPositions = numeric.transpose(mds.classic(cityData));
var w = Math.min(720, document.documentElement.clientWidth - 20),
h = w /2;
mds.drawD3ScatterPlot(d3.select("#cities"),
cityPositions[0],
cityPositions[1],
labels,
{
w : Math.min(720, document.documentElement.clientWidth - 20),
h : w /2,
padding : 37,
reverseX : true,
reverseY : true,
});
</script>
</body>
</html>