-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
137 lines (107 loc) · 3.53 KB
/
index.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
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
<html>
<head>
<!-- <link rel="stylesheet" href="tubeMap.css"> -->
<script src="https://d3js.org/d3.v5.js"></script>
<script src="https://unpkg.com/d3-tube-map@latest/dist/d3-tube-map.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="tube-map">
</div>
<script>
//Create the same data structure for d3-map-tube
const dataHops = [{hop: 1, rtt: 10, ip: '24.87.208.63'}, {hop: 2, rtt: 20, ip: '24.87.208.63'}, {hop: 3, rtt: 30, ip: '24.87.208.63'},{hop: 4, rtt: 50, ip: '24.87.208.63'},{hop: 5, rtt: 60, ip: '24.87.208.63'},{hop: 6, rtt: 70, ip: '24.87.208.63'}]
//Declare empty Object
const NewObject ={}
//Map through the hop data
const Map = dataHops.map(async(dataHop,index) =>{
//Pass the index as an argument in order to use later as the key in the object
const i = index +1
//Define variable for Api key
NewObject[i]= {}
async function axiosTest(){
city ={}
return axios.get(API)
.then(response =>{
city = response.data.city
console.log(city)
return city
})
}
await axiosTest().then((city) =>{
NewObject[i].city = city
wait()
})
//convert the hop in a string to use the ip adress as the label
NewObject[i].label = dataHop.city
return NewObject
});
// console.log(NewObject)
const Lines =[{
"name":"line",
"color": "#FF0000",
"shiftCoords": [0, 0],
"nodes":[]
}]
const defaultPosition = 'N'
// don't forget the 's' from nodes
const mapTwo = dataHops.map((dataHop, index,) => {
const i = index
const length = dataHops.length
const positionLine = Lines.map(Line =>{
const position = 100 / length * i
Lines[0].nodes[i] ={}
Lines[0].nodes[i].coords = [position,-4]
//convert the index position in a string
Lines[0].nodes[i].name = (i+1).toString()
Lines[0].nodes[i].labelPos = defaultPosition
})
})
const dataStructure ={}
dataStructure.stations = NewObject
dataStructure.lines = Lines
// console.log(JSON.stringify(dataStructure))
console.log(dataStructure)
function wait (){
var container = d3.select('#tube-map');
var width = 1200;
var height = 900;
var map = d3.tubeMap()
.width(width)
.height(height)
.margin({
top: 300,
right: 20,
bottom: 40,
left: 100,
})
.on("click", function (name) {
console.log(name);
});
container
.datum(dataHops).call(map);
var svg = container.select('svg');
}
// zoom = d3
// .zoom() n
// .scaleExtent([0.5, 6])
// .on('zoom', zoomed);
// var zoomContainer = svg.call(zoom);
var initialScale = 2;
var initialTranslate = [100, 200];
// zoom.scaleTo(zoomContainer, initialScale);
// zoom.translateTo(zoomContainer, initialTranslate[0], initialTranslate[1]);
// function zoomed() {
// svg.select('g').attr('transform', d3.event.transform.toString());
// }
// ;
// const API = `http://api.ipstack.com/`+dataStructure.stations.ip+`.?access_key=dcdb1481feb9d6a8047135df16028740`
// axios.get(API)
// .then(responses =>{
// console.log(responses.data)
// })
</script>
<div>Hello world</div>
</body>
</html>