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.
Last active
February 9, 2016 02:06
-
-
Save mbostock/5415941 to your computer and use it in GitHub Desktop.
Kepler’s Tally
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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