Skip to content

Instantly share code, notes, and snippets.

@mthelm85

mthelm85/.block

Last active February 14, 2019 14:56
Show Gist options
  • Save mthelm85/99297530f794bf2388d2d0c8bc2916c1 to your computer and use it in GitHub Desktop.
Save mthelm85/99297530f794bf2388d2d0c8bc2916c1 to your computer and use it in GitHub Desktop.
Download ZIP
dot on the sun
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
const dotR = 4.5
const width = 520
const height = 520
const svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr('class', 'map')
const grp = svg.append("g")
const rotate = { x:90, y: 0 }
const projection = d3.geoOrthographic()
.scale((width / 2) - 10)
.translate([width / 2, height / 2])
.clipAngle(90)
.rotate([rotate.x / 2, -rotate.y / 2])
const path = d3.geoPath().projection(projection)
const globe = grp.selectAll('path.globe').data([{type: 'Sphere'}])
.enter().append('path')
.attr('class', 'globe')
.attr('d', path)
const graticule = d3.geoGraticule()
grp.selectAll('path.graticule').data([graticule()])
.enter().append('path')
.attr('class', 'graticule')
.attr('d', path)
function enableRotation() {
d3.timer(function (x) {
projection.rotate([x / 100, 10, 20])
svg.selectAll("path").attr("d", path)
})
}
enableRotation()
grp.append('path')
.attr('class', 'dot')
.datum(function(d) {
return {type: 'Point', coordinates: [-40, 0], radius: dotR};
})
.attr('d', path)
</script>
</body>
<style>
body {
background-color: #ffffff;
height: 600px;
}
.map {
width: 600px;
height: 600px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
.graticule {
fill: none;
stroke: #e5af00;
stroke-width: 1px;
}
.globe {
fill: #fef356;
stroke: #fdbf06;
stroke-width: 4
}
.dot {
fill: #4c73fe;
stroke: #001a8e;
stroke-width: 1px;
}
.overlay {
fill: #005fc7;
fill-opacity: 0.4;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment