-
Notifications
You must be signed in to change notification settings - Fork 0
/
JustMap.html
102 lines (83 loc) · 2.88 KB
/
JustMap.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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #FAFAFA;
}
svg {
background-color: #FAFAFA;
}
</style></head>
<body translate="no">
<div id="graph-container"></div>
<script src="libs/d3.v5.js"></script>
<script src="scripts/d3script.js"></script>
<script>
let chart;
let margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 1480 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
let x = d3.scaleLinear()
.range([0, width]);
let y = d3.scaleLinear()
.range([height, 0]);
let container = d3.select("#graph-container")
let svg = container.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json('data.json')
.then(data => {
console.log(data)
let cleanData = data.map(datum => {
return {
x: +datum.coordinates.lng,
y: +datum.coordinates.lat,
name: datum.title
}
})
console.log(cleanData)
x.domain(d3.extent(cleanData, function(d) {
return d.x;
})).nice();
y.domain(d3.extent(cleanData, function(d) {
return d.y;
})).nice();
// Add the x-axis.
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the y-axis.
svg.append("g")
.attr("class", "y axis")
.call(d3.axisLeft(y));
// Add the points!
svg.selectAll(".point")
.data(cleanData)
.enter()
.append("circle")
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", 2)
.attr("label", d => d.name)
/*.append("path")
.attr("class", "point")
.attr("d", d3.symbol().type(d3.symbolCircle))
.attr("transform", function(d) {
return "translate(" + x(d.x) + "," + y(d.y) + ")";
});*/
})
</script>
</body>
</html>