Skip to content

Instantly share code, notes, and snippets.

@Fil
Last active Oct 31, 2018
Embed
What would you like to do?
Test de missile, 4 juillet [UNLISTED]
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
pyongyang = [125.75432, 39.03385]
washington = [ -77.01, 38.89 ]
range = 6700 * 360 / ( 2 * Math.PI * 6371)
circle = d3.geoCircle().center(pyongyang).radius(range)()
projection = d3.geoEquirectangular()
// Orthographic // Equirectangular // Mercator // Larrivee
// .rotate([-(pyongyang[0] + 360 + washington[0])/2, 0])
projection = d3.geoTwoPointEquidistant(washington, pyongyang).clipAngle(130)
path = d3.geoPath(projection)
svg.append('path')
.attr('d', path({type:"Sphere"}))
.attr('fill', 'lightblue')
.attr('stroke', 'black')
d3.json("https://unpkg.com/visionscarto-world-atlas@0.0.4/world/110m_countries.geojson", function(err, geo){
svg.append('path')
.attr('d', path(geo))
svg.append('path')
.attr('d', path(circle))
.attr('fill', 'rgba(255,0,0,0.3)')
.attr('stroke', "red")
.attr('stroke-dasharray', '3 5')
svg.append('path')
.attr('d', path({type: "Point", coordinates: pyongyang}))
.attr('fill', 'red')
svg.append('path')
.attr('d', path({type: "Point", coordinates: washington}))
.attr('fill', 'red')
svg.append('path')
.attr('d', path({type: "LineString", coordinates: [pyongyang, washington]}))
.attr('fill', 'none')
.attr('stroke', 'red')
.attr('stroke-width', 2)
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment