Timeline of the discovery of the Solar System

<!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 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;
        });

</script>
</body>
</html>

https://d3js.org/d3.v3.min.js