plotly_training_Mar2017/d3Geo.html at master · areff2000/plotly_training_Mar2017 · 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
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Geo (spinning))</title>
</head>

<style>
body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
}
</style>

<body>
  <div id="content">
    <canvas width="1600" height="1000"></canvas>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>

  <script>
var geojson = {}
// https://bl.ocks.org/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7
// http://d3indepth.com/geographic/

var context = d3.select('#content canvas')
  .node()
  .getContext('2d');

var projection = d3.geoOrthographic()
  .scale(200);

var geoGenerator = d3.geoPath()
  .projection(projection)
  .pointRadius(4)
  .context(context);

// add circle
var circle = d3.geoCircle()
  .center([0.1278, 51.5074])
  .radius(5);

circle();
// returns a GeoJSON object representing a circle

geoGenerator(circle());

var yaw = 150;

function update() {
  projection.rotate([yaw, -25])

   context.clearRect(0, 0, 1600, 1000);

  context.lineWidth = 0.8;
  context.strokeStyle = '#333';

  context.beginPath();
  geoGenerator({type: 'FeatureCollection', features: geojson.features})
  context.stroke();

// add NY to London line; lat/long pairs
context.beginPath();
context.strokeStyle = 'red';
geoGenerator({
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [[0.1278, 51.5074], [-74.0059, 40.7128]]
  }
});
	context.stroke();

// circle
  context.beginPath();
  context.strokeStyle = 'red';
geoGenerator(circle());
  context.stroke();

  // Graticule
  var graticule = d3.geoGraticule();
  context.beginPath();
  context.strokeStyle = '#eee';
  geoGenerator(graticule());
  context.stroke();

  yaw -= 2.5
}


// REQUEST DATA
d3.json('https://gist.githubusercontent.com/d3indepth/f28e1c3a99ea6d84986f35ac8646fac7/raw/c58cede8dab4673c91a3db702d50f7447b373d98/ne_110m_land.json', function(err, json) {
  geojson = json;
  window.setInterval(update, 100);
})

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