Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active February 9, 2016 02:06
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbostock/5415941 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbostock/5415941 to your computer and use it in GitHub Desktop.
Download ZIP
Kepler’s Tally
Raw
.block
license: gpl-3.0
Raw
README.md

A minimalist variation of Jonathan Corum’s interactive graphic on exoplanets discovered by NASA’s Kepler mission. This version lacks stars, labels, and more, but demonstrates the use of CSS3 for simple declarative animation of orbits.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #222;
position: relative;
text-align: center;
}
.system {
display: inline-block;
position: relative;
vertical-align: middle;
}
.orbit {
fill: none;
stroke: #ccc;
stroke-dasharray: 2,3;
}
.planet {
position: absolute;
top: 0;
left: 0;
-moz-animation-name: rotate;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-webkit-animation-name: rotate;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-name: rotate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.planet circle {
fill: url(#planet-gradient);
}
@-moz-keyframes rotate {
from { -moz-transform: rotateZ(0deg); }
to { -moz-transform: rotateZ(-360deg); }
}
@-webkit-keyframes rotate {
from { -webkit-transform: rotateZ(0deg); }
to { -webkit-transform: rotateZ(-360deg); }
}
@keyframes rotate {
from { transform: rotateZ(0deg); }
to { transform: rotateZ(-360deg); }
}
</style>
<svg style="position:absolute;width:0;height:0;">
<defs>
<radialGradient id="planet-gradient" gradientUnits="objectBoundingBox" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#aaa" stop-opacity="1"/>
<stop offset="100%" stop-color="#777" stop-opacity="1"/>
</radialGradient>
</defs>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
// Scales for semimajor axis, planet radius, and planet period.
var x = d3.scale.linear().range([0, 400]),
r = d3.scale.linear().domain([4, 40]).range([4 * .5, 40 * .5]).clamp(true),
t = d3.scale.linear().range([0, 1]);
var padding = 16;
// Detect the appropriate vendor prefix.
var prefix = "-webkit-transform" in document.body.style ? "-webkit-"
: "-moz-transform" in document.body.style ? "-moz-"
: "";
d3.csv("planets.csv", type, function(error, planets) {
var systems = d3.nest()
.key(function(d) { return d.id; })
.entries(planets);
systems.forEach(function(s) {
s.values.forEach(function(p) { p.system = s; });
s.radius = d3.max(s.values, function(p) { return x(p.semimajor_axis) + r(p.planet_radius); }) + padding;
});
systems.sort(function(a, b) {
return a.radius - b.radius;
});
var system = d3.select("body").selectAll(".system")
.data(systems)
.enter().append("div")
.attr("class", "system")
.style("width", function(d) { return d.radius * 2 + "px"; })
.style("height", function(d) { return d.radius * 2 + "px"; });
system.append("svg")
.attr("class", "orbit")
.attr("width", function(d) { return d.radius * 2; })
.attr("height", function(d) { return d.radius * 2; })
.append("g")
.attr("transform", function(d) { return "translate(" + d.radius + "," + d.radius + ")"; })
.selectAll("circle")
.data(function(d) { return d.values; })
.enter().append("circle")
.attr("r", function(d) { return x(d.semimajor_axis); });
system.selectAll(".planet")
.data(function(d) { return d.values; })
.enter().append("svg")
.attr("class", "planet")
.attr("width", function(d) { return d.system.radius * 2; })
.attr("height", function(d) { return d.system.radius * 2; })
.style(prefix + "animation-duration", function(d) { return t(d.period) + "s"; })
.style(prefix + "transform-origin", function(d) { return d.system.radius + "px " + d.system.radius + "px"; })
.append("circle")
.attr("transform", function(d) { return "translate(" + d.system.radius + "," + d.system.radius + ")"; })
.attr("cx", function(d) { return x(d.semimajor_axis); })
.attr("r", function(d) { return r(d.planet_radius); });
});
function type(d) {
d.period = +d.period;
d.planet_radius = +d.planet_radius;
d.semimajor_axis = +d.semimajor_axis;
d.stellar_radius = +d.stellar_radius;
return d;
}
</script>
Raw
planets.csv
period planet_radius semimajor_axis stellar_radius stellar_teff id planet_name
0.45299999999999996 3.1899999999999999 0.01 0.68099999999999994 4188.0 42 c
0.74299999999999999 0.85999999999999999 0.013000000000000001 0.52400000000000002 4061.0 32 f
0.83700000000000008 1.3799999999999999 0.017000000000000001 1.0 5627.0 10 b
1.214 3.46 0.019 0.68099999999999994 4188.0 42 b
1.865 3.0800000000000001 0.025000000000000001 0.68099999999999994 4188.0 42 d
1.486 14.82 0.026000000000000002 1.048 5787.0 17 b
1.5930000000000002 1.6699999999999999 0.027000000000000003 1.012 5777.0 9 d
2.4550000000000001 9.8499999999999996 0.028999999999999998 0.53100000000000003 4098.0 45 b
1.8559999999999999 9.4000000000000004 0.028999999999999998 0.89000000000000001 5731.0 41 b
2.8960000000000004 1.1100000000000001 0.033000000000000002 0.52400000000000002 4061.0 32 e
2.4710000000000001 14.4 0.036000000000000004 1.0600000000000001 5814.0 1 b
1.764 23.0 0.037999999999999999 2.7000000000000002 9071.0 13 b
2.2050000000000001 22.300000000000001 0.039 2.71 6264.0 2 b
3.2469999999999999 7.0999999999999996 0.040000000000000001 0.87 5442.0 44 b
2.786 1.72 0.042999999999999997 2.04 6131.0 21 b
3.214 3.7200000000000002 0.044000000000000004 1.27 5858.0 4 b
3.5049999999999999 1.8200000000000001 0.044000000000000004 0.97799999999999998 5385.0 18 b
3.0239999999999996 10.56 0.044000000000000004 1.2009999999999998 6082.0 43 b
3.6960000000000002 1.97 0.044999999999999998 0.93900000000000006 5443.0 20 b
3.2349999999999999 11.07 0.044999999999999998 1.0820000000000001 5826.0 6 b
3.9049999999999998 11.699999999999999 0.047 0.81999999999999995 5595.0 71 b
3.5219999999999998 15.9 0.047 1.5600000000000001 6025.0 8 b
3.548 17.399999999999999 0.052000000000000005 2.02 6297.0 5 b
4.8879999999999999 4.6799999999999997 0.052000000000000005 0.74199999999999999 4766.0 3 b
5.9009999999999998 2.1499999999999999 0.052000000000000005 0.52400000000000002 4061.0 32 b
4.7780000000000005 2.1400000000000001 0.052999999999999999 0.88800000000000001 5190.0 48 b
5.7149320000000001 0.018800000000000001 0.055300000000000002 0.63 5555.0 62 b
4.4379999999999997 17.600000000000001 0.055999999999999994 1.3799999999999999 6011.0 12 b
5.9120000000000008 2.1699999999999999 0.055999999999999994 0.63800000000000001 4663.0 28 b
4.9430000000000005 11.970000000000001 0.059000000000000004 1.0900000000000001 5786.0 15 b
5.7290000000000001 2.23 0.059000000000000004 0.73999999999999999 5294.0 57 b
7.2039999999999997 2.71 0.059999999999999998 0.52500000000000002 4069.0 49 b
4.8849999999999998 16.100000000000001 0.060999999999999999 1.78 5934.0 7 b
5.399 2.5299999999999998 0.062 1.242 5793.0 68 b
6.0979999999999999 0.91000000000000003 0.063 0.93900000000000006 5443.0 20 e
8.011000000000001 2.0899999999999999 0.063 0.498 3855.0 54 b
242.46129999999999 1.71 0.064000000000000001 0.93000000000000005 5638.0 69 c
7.8770000000000007 2.21 0.065000000000000002 0.54799999999999993 4222.0 52 b
8.7520000000000007 1.99 0.068000000000000005 0.52400000000000002 4061.0 32 c
5.6679999999999993 1.8300000000000001 0.068000000000000005 1.8200000000000001 5904.0 33 b
6.2389999999999999 3.3999999999999999 0.070000000000000007 1.6599999999999999 6103.0 25 b
6.8729999999999993 7.0 0.07400000000000001 1.0700000000000001 6354.0 40 b
8.9860000000000007 2.02 0.07400000000000001 0.63800000000000001 4663.0 28 c
7.6420000000000003 4.75 0.074999999999999997 0.97799999999999998 5385.0 18 c
7.1320000000000006 2.2000000000000002 0.074999999999999997 1.47 6180.0 60 b
7.1070000000000002 1.95 0.076999999999999999 1.8700000000000001 6142.0 23 b
6.79 10.0 0.078 1.6299999999999999 6395.0 14 b
10.913 2.54 0.079000000000000001 0.52500000000000002 4069.0 49 c
8.1449999999999996 2.7999999999999998 0.080000000000000002 1.1200000000000001 6043.0 24 b
7.8129999999999997 2.2000000000000002 0.08199999999999999 1.8799999999999999 6058.0 50 b
12.072000000000001 1.23 0.083000000000000004 0.498 3855.0 54 c
9.2870000000000008 2.5299999999999998 0.084000000000000005 0.85699999999999998 5541.0 19 b
9.6739999999999995 3.1499999999999999 0.085000000000000006 0.88800000000000001 5190.0 48 c
8.9190000000000005 2.3999999999999999 0.086999999999999994 1.47 6180.0 60 c
12.282999999999999 3.0800000000000001 0.089999999999999997 0.57700000000000007 4486.0 26 b
9.6050000000000004 1.1100000000000001 0.090999999999999998 1.242 5793.0 68 c
10.300000000000001 1.72 0.091999999999999998 1.0600000000000001 5685.0 11 b
12.441700000000001 0.0077000000000000002 0.092899999999999996 0.63 5555.0 62 c
10.218999999999999 2.6000000000000001 0.093000000000000013 1.0900000000000001 6082.0 58 b
10.854000000000001 3.1699999999999999 0.093000000000000013 0.93900000000000006 5443.0 20 c
9.3759999999999994 2.79 0.093000000000000013 1.8799999999999999 6058.0 50 c
10.337999999999999 3.7999999999999998 0.094 0.92000000000000004 5966.0 29 b
13.722341 2.2400000000000002 0.094 0.93000000000000005 5638.0 69 b
11.609000000000002 1.5800000000000001 0.095000000000000001 0.73999999999999999 5294.0 57 c
13.367000000000001 0.34000000000000002 0.10000000000000001 0.72799999999999998 5288.0 37 b
10.742000000000001 3.6899999999999999 0.10099999999999999 1.8700000000000001 6142.0 23 c
10.503 3.8399999999999999 0.10400000000000001 3.1400000000000001 4931.0 56 b
16.385000000000002 1.9299999999999999 0.105 0.54799999999999993 4222.0 52 c
12.334000000000001 2.8999999999999999 0.105 1.1200000000000001 6043.0 24 c
11.868 1.23 0.106 1.0600000000000001 6314.0 59 b
11.902000000000001 2.5 0.106 1.47 6180.0 60 d
13.025 2.8999999999999999 0.10800000000000001 1.0600000000000001 5685.0 11 c
13.289999999999999 3.5 0.111 0.92000000000000004 5966.0 29 c
17.250999999999998 2.9399999999999999 0.11199999999999999 0.57700000000000007 4486.0 26 c
12.720000000000001 6.5099999999999998 0.113 1.6599999999999999 6103.0 25 c
13.849 1.21 0.11599999999999999 1.6100000000000001 5973.0 36 b
14.859000000000002 6.0099999999999998 0.11599999999999999 0.97799999999999998 5385.0 18 d
13.175999999999998 3.4399999999999999 0.11900000000000001 1.8200000000000001 5904.0 33 c
18.164059999999999 0.027799999999999998 0.12 0.63 5555.0 62 d
15.335000000000001 5.7199999999999998 0.121 0.91900000000000004 5399.0 27 b
15.574000000000002 2.6000000000000001 0.124 1.0900000000000001 6082.0 58 c
22.780999999999999 2.4900000000000002 0.129 0.52400000000000002 4061.0 32 d
16.230999999999998 3.4399999999999999 0.129 1.6100000000000001 5973.0 36 c
21.302 0.75 0.13699999999999998 0.72799999999999998 5288.0 37 c
19.577000000000002 1.03 0.13699999999999998 0.93900000000000006 5443.0 20 f
17.98 2.2200000000000002 0.14000000000000001 1.0600000000000001 6314.0 59 c
18.649000000000001 3.1000000000000001 0.14099999999999999 0.96999999999999997 6086.0 53 b
19.274000000000001 8.2799999999999994 0.14300000000000002 1.012 5777.0 9 b
27.954000000000001 1.5600000000000001 0.155 0.60199999999999998 4509.0 55 b
21.087 9.8000000000000007 0.155 1.04 6225.0 39 b
22.686999999999998 3.2000000000000002 0.156 1.0600000000000001 5685.0 11 d
20.861000000000001 5.7000000000000002 0.158 1.1499999999999999 6514.0 31 b
21.776 5.7300000000000004 0.16600000000000001 1.8200000000000001 5904.0 33 d
21.405000000000001 7.8600000000000003 0.16699999999999998 3.1400000000000001 4931.0 56 c
29.164000000000001 2.1099999999999999 0.184 0.93999999999999995 5461.0 30 b
33.601999999999997 7.2000000000000002 0.191 0.76000000000000001 5289.0 46 b
31.331 7.3399999999999999 0.19399999999999998 0.91900000000000004 5399.0 27 c
31.995000000000001 4.1799999999999997 0.19600000000000001 1.0600000000000001 5685.0 11 e
42.143000000000001 1.77 0.20300000000000001 0.60199999999999998 4509.0 55 c
39.792000000000002 2.0 0.20800000000000002 0.72799999999999998 5288.0 37 d
31.785 4.25 0.214 1.8200000000000001 5904.0 33 e
38.558 3.5 0.22800000000000001 0.96999999999999997 6086.0 53 c
38.906999999999996 8.2200000000000006 0.22899999999999998 1.012 5777.0 9 c
45.293999999999997 2.2000000000000002 0.24100000000000002 1.0 5627.0 10 c
46.686000000000007 2.4300000000000002 0.252 1.0600000000000001 5685.0 11 f
45.156000000000006 7.2999999999999998 0.252 0.93999999999999995 6018.0 51 b
41.027999999999999 4.7999999999999998 0.254 1.8200000000000001 5904.0 33 f
42.631999999999998 5.2999999999999998 0.254 1.1499999999999999 6514.0 31 c
49.513999999999996 2.98 0.29559999999999997 0.96400000000000008 5636.0 47 b
60.323 13.199999999999999 0.29799999999999999 0.93999999999999995 5461.0 30 c
77.611999999999995 2.8399999999999999 0.34399999999999997 0.93900000000000006 5443.0 20 d
85.312999999999988 5.9000000000000004 0.38500000000000001 0.93999999999999995 6018.0 51 c
87.96899999999998 0.38300000000000001 0.38709893000000001 1.0 5777.0 999 Mercury
122.3874 0.023199999999999998 0.42700000000000005 0.63 5555.0 62 e
118.37799999999999 3.3799999999999999 0.46899999999999997 1.0600000000000001 5685.0 11 g
143.21299999999999 9.5299999999999994 0.53000000000000003 0.93999999999999995 5461.0 30 d
131.458 8.1600000000000001 0.60346999999999995 1.0284 5606.0 35 b
228.77599999999998 8.4499999999999993 0.70479999999999998 0.64890000000000003 4450.0 16 b
267.291 0.020299999999999999 0.71799999999999997 0.63 5555.0 62 f
224.70099999999999 0.94899999999999995 0.72333199000000004 1.0 5777.0 999 Venus
289.86200000000002 2.1000000000000001 0.80500000000000005 0.84999999999999998 5510.0 22 b
303.15800000000002 4.6100000000000003 0.9890000000000001 0.96400000000000008 5636.0 47 c
365.25599999999997 1.0 1.0 1.0 5777.0 999 Earth
288.822 8.5600000000000005 1.1617999999999999 1.1617999999999999 5913.0 34 b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment