Skip to content

Instantly share code, notes, and snippets.

@Mavromatika

Mavromatika/datahistory.json

Last active October 23, 2019 22:51
Show Gist options
  • Save Mavromatika/7595a52c6c47ececb42d to your computer and use it in GitHub Desktop.
Save Mavromatika/7595a52c6c47ececb42d to your computer and use it in GitHub Desktop.
Download ZIP
Timeline of the discovery of the Solar System
Raw
datahistory.json
[
{"date":1550,"who":"The Ancients","data":[
{"col":0,"row":0,"name":"Mercury","type":"planet"},
{"col":1,"row":0,"name":"Venus","type":"planet"},
{"col":2,"row":0,"name":"Earth","type":"planet"},
{"col":3,"row":1,"name":"Moon","type":"moon"},
{"col":4,"row":0,"name":"Mars","type":"planet"},
{"col":8,"row":0,"name":"Jupiter","type":"planet"},
{"col":13,"row":0,"name":"Saturn","type":"planet"}
]},
{"date":1610,"who":"Galileo","data":[
{"col":9,"row":1,"name":"Io","type":"moon"},
{"col":10,"row":2,"name":"Europa","type":"moon"},
{"col":11,"row":3,"name":"Ganymede","type":"moon"},
{"col":12,"row":4,"name":"Callisto","type":"moon"}
]},
{"date":1655,"who":"Huygens","data":[
{"col":14,"row":1,"name":"Titan","type":"moon"}
]},
{"date":1671,"who":"Cassini","data":[
{"col":15,"row":2,"name":"Lapetus","type":"moon"}
]},
{"date":1672,"who":"Cassini","data":[
{"col":16,"row":3,"name":"Thea","type":"moon"}
]},
{"date":1684,"who":"Cassini","data":[
{"col":17,"row":4,"name":"Tethys","type":"moon"},
{"col":18,"row":5,"name":"Dione","type":"moon"}
]},
{"date":1781,"who":"Herschel","data":[
{"col":19,"row":0,"name":"Uranus","type":"planet"}
]},
{"date":1787,"who":"Herschel","data":[
{"col":20,"row":1,"name":"Oberon","type":"moon"},
{"col":21,"row":2,"name":"Titania","type":"moon"}
]},
{"date":1801,"who":"Piazzi","data":[
{"col":7,"row":0,"name":"Ceres","type":"dwarf"}
]},
{"date":1846,"who":"Galle, Le Verrier / Lassell","data":[
{"col":24,"row":0,"name":"Neptune","type":"planet"},
{"col":25,"row":1,"name":"Triton","type":"moon"}
]},
{"date":1851,"who":"Lassell","data":[
{"col":22,"row":3,"name":"Ariel","type":"moon"},
{"col":23,"row":4,"name":"Umbriel","type":"moon"}
]},
{"date":1877,"who":"Hall","data":[
{"col":5,"row":1,"name":"Deimos","type":"moon"},
{"col":6,"row":2,"name":"Phobos","type":"moon"}
]},
{"date":1930,"who":"Tombaugh","data":[
{"col":26,"row":0,"name":"Pluto","type":"dwarf"}
]},
{"date":1978,"who":"Christy","data":[
{"col":27,"row":1,"name":"Charon","type":"moon"}
]},
{"date":2004,"who":"Ortiz et al. or Brown et al.","data":[
{"col":30,"row":0,"name":"Haumea","type":"dwarf"}
]},
{"date":2005,"who":"Brown et al.","data":[
{"col":28,"row":0,"name":"Eris","type":"dwarf"},
{"col":33,"row":0,"name":"Makemake","type":"dwarf"},
{"col":29,"row":1,"name":"Dysnomia","type":"moon"},
{"col":31,"row":1,"name":"Namaka","type":"moon"},
{"col":32,"row":2,"name":"Hi'iaka","type":"moon"}
]}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
background: #000000;
font-family: sans-serif;
}
h1 {
color: #eaeaea;
text-align: center;
}
#intro {
color: white;
font-size: 80%;
width: 300px;
text-align: justify;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
}
#sources {
font-size : 70%;
}
#sources a {
color: white;
}
#content {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.planet{
float:left;
position: relative;
}
.svgPlanet{
position: absolute;
top: 0;
left: 0;
}
.low {
opacity: 0.2;
}
text {
cursor : default;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<h1>Timeline of the discovery of the Solar System</h1>
<div id="intro"><p>The graph below shows the time of discovery of the main celestial bodies in the solar system, as well as the people who discovered them. The planets and dwarf planets and their main satellites (radius > 500 km) are shown.</p><p>Press Ctrl key to toggle interactive mode.</p><p id="sources">Sources : <a href="https://en.wikipedia.org/wiki/Timeline_of_discovery_of_Solar_System_planets_and_their_moons">Wikipedia</a> for the dates, <a href="https://solarsystem.nasa.gov/planets/solarsystem">NASA</a> for the radiuses.</p></div>
<div id="content"></div>
<script>
var historyW = 1200, historyH = 550;
var domHistory = [0, 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];
var paddingL = 75, paddingR = 120, paddingT = 80, paddingB = 30;
var spaceMoons = 4;
var tabTypes = {"font":{"planet":"80%","moon":"60%","dwarf":"80%"},
"color":{"planet":"#9a529d","moon":"white","dwarf":"#555db9"},
"size":{"planet":3,"moon":1,"dwarf":3}
};
var historyScale = d3.scale.linear().rangeRound([paddingL,historyW-paddingR]).domain([1550,2016]);
var catScale = d3.scale.ordinal().rangeRoundPoints([historyH-paddingB-20,paddingT]).domain(domHistory);
var historyContainer = d3.select("#content")
.append("div").attr("class","history");
var svgHistory = historyContainer.append("svg").attr("width",historyW).attr("height",historyH);
//-------------------------------------------------------------------------------------------------------------------------------
// History of the discovery of the solar system
d3.json("datahistory.json", function(error,data){
if (error) return console.warn(error);
// Reformat data for horizontal lines
var t = 0;
var n = "";
var donnees = data.map(function(c,i,m){
return c.data.map(function(d){
if ((n == c.who && t == c.date) || (c.date-t) < 7 ){
d.visibility = "hidden";
}
else {
d.visibility = "visible";
}
d.date = c.date;
if (c.date <= 1550){
d.label = "2000 BC";
}
else { d.label = d.date.toString();}
d.who = c.who;
n = c.who;
t = c.date;
return d;
});
});
donnees = [].concat.apply([],donnees); // Make single array of all the sub arrays' objects.
// Sort the data by descending date (so that groups are created from r to l, and vert don't show
//through)
donnees.sort(function (a, b) {
if (a.date > b.date) {
return -1;
}
if (a.date < b.date) {
return 1;
}
return 0;
});
var overlay = svgHistory.append("rect")
.attr("x",0)
.attr("y",0)
.attr("width",historyW)
.attr("height",historyH)
.attr("fill","transparent");
//.attr("stroke","white");
var groups = svgHistory.selectAll(".group")
.data(donnees)
.enter()
.append("g").attr("class","group");
var marks = groups.append("line");
var textY = groups.append("text");
var textWho = groups.append("text");
marks.attr("class","vertical")
.attr("x1",function(d){return Math.round(historyScale(d.date));})
.attr("y1",paddingT)
.attr("x2",function(d){return Math.round(historyScale(d.date));})
.attr("y2",historyH-paddingB-10)
.attr("visibility",function(d){return d.visibility})
.attr("stroke","#696969")
.attr("stroke-width",1)
.attr("stroke-dasharray","2,7");
textY.attr("class","vertical")
.attr("x",function(d){return historyScale(d.date);})
.attr("y",historyH-paddingB)
.attr("text-anchor","end")
//.attr("dy",".3em")
.attr("fill","white")
.attr("visibility",function(d){return d.visibility})
.style("font-size","70%")
.text(function(d){return d.label;})
.attr("transform",function(d){
return "rotate(-30 " + historyScale(d.date).toString()
+ " " + (historyH-paddingB).toString() + ")";
});
textWho.attr("class","vertical")
.attr("x",function(d){return historyScale(d.date);})
.attr("y",paddingT-10)
.attr("text-anchor","start")
//.attr("dy",".3em")
.attr("fill","white")
.attr("visibility",function(d){return d.visibility})
.style("font-size","70%")
.text(function(d){return d.who;})
.attr("transform",function(d){
return "rotate(-30 " + historyScale(d.date).toString()
+ " " + (paddingT-10).toString() + ")";
});
// Then create horizontal elements
var lines = groups.append("line");
var textR = groups.append("text");
var textL = groups.append("text");
lines.attr("class","lines")
.attr("x1",function(d){return historyScale(d.date);})
.attr("y1",function(d){
if (d.row == 0){
return catScale(d.col);
}
else {
return catScale(d.col) + spaceMoons*d.row;
}
})
.attr("x2",historyScale(2016))
.attr("y2",function(d){
if (d.row == 0){
return catScale(d.col);
}
else {
return catScale(d.col) + spaceMoons*d.row;
}
})
.attr("stroke-width",function(d){
return tabTypes.size[d.type];
})
.attr("stroke",function(d){
return tabTypes.color[d.type];
});
textR.attr("x",function(d){
if (d.row == 0){return historyW-paddingR + 10;}
else {return historyW-paddingR + 60;}
})
.attr("y",function(d){
if (d.row == 0){
return catScale(d.col);
}
else {
return catScale(d.col) + spaceMoons*d.row;
}
})
.attr("text-anchor","start")
.attr("dy",".3em")
.attr("fill","white")
.style("font-size",function(d){
return tabTypes.font[d.type];
})
.text(function(d){return d.name;});
textL.attr("x",paddingL - 10)
.attr("y",function(d){return catScale(d.col);})
.attr("text-anchor","end")
.attr("dy",".3em")
.attr("fill","white")
.style("font-size",function(d){
if (d.date <= 1550){
return tabTypes.font[d.type];
}
else {return "0px";}
})
.text(function(d){return d.name;});
// Manage interactivity
var flag = 0;
d3.select("body").on("keydown",function(){
if (d3.event.keyCode == 17){
flag = 1 - flag;
}
if (flag == 0){
var gr = d3.selectAll(".group");
var vert = gr.selectAll(".vertical");
gr.classed("low",false);
vert.each(function(d){
if (d.visibility == "hidden"){
d3.select(this).attr("visibility","hidden");
}
});
}
});
groups.on("mouseenter",function(){
if (flag){
var gr = d3.selectAll(".group");
gr.classed("low",true);
var vert = d3.selectAll(".vertical");
vert.each(function(d){
if (d.visibility == "hidden"){
d3.select(this).attr("visibility","hidden");
}
});
d3.select(this).classed("low",false);
d3.select(this).selectAll(".vertical").attr("visibility","visible");
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment