Skip to content

Instantly share code, notes, and snippets.

@djvanderlaan

djvanderlaan/index.html

Last active March 1, 2023 02:58
Download ZIP

Revisions

  1. Jan van der Laan revised this gist Feb 14, 2013. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,9 +23,6 @@
    </head>
    <body>

    <h2>Planetarium</h2>


    <div id="planetarium">
    </div>

  2. Jan van der Laan revised this gist Feb 14, 2013. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ <h2>Planetarium</h2>
    </div>

    <script type="text/javascript">
    var w = 800, h = 800;
    var w = 800, h = 600;
    var t0 = Date.now();

    var planets = [
  3. Jan van der Laan created this gist Feb 14, 2013.
    73 changes: 73 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />

    <script src="http://d3js.org/d3.v3.min.js"></script>

    <style>
    .orbit {
    stroke : #000000;
    fill : none;
    }
    .planet {
    stroke : #000000;
    fill : #FFFFFF;
    }
    .sun {
    stroke : #000000;
    fill : #000000;
    }
    </style>

    </head>
    <body>

    <h2>Planetarium</h2>


    <div id="planetarium">
    </div>

    <script type="text/javascript">
    var w = 800, h = 800;
    var t0 = Date.now();

    var planets = [
    { R: 300, r: 5, speed: 5, phi0: 90},
    { R: 150, r: 10, speed: 2, phi0: 190}
    ];


    var svg = d3.select("#planetarium").insert("svg")
    .attr("width", w).attr("height", h);

    svg.append("circle").attr("r", 20).attr("cx", w/2)
    .attr("cy", h/2).attr("class", "sun")

    var container = svg.append("g")
    .attr("transform", "translate(" + w/2 + "," + h/2 + ")")

    container.selectAll("g.planet").data(planets).enter().append("g")
    .attr("class", "planet").each(function(d, i) {
    d3.select(this).append("circle").attr("class", "orbit")
    .attr("r", d.R);
    d3.select(this).append("circle").attr("r", d.r).attr("cx",d.R)
    .attr("cy", 0).attr("class", "planet");
    });

    d3.timer(function() {
    var delta = (Date.now() - t0);
    svg.selectAll(".planet").attr("transform", function(d) {
    return "rotate(" + d.phi0 + delta * d.speed/200 + ")";
    });
    });

    </script>


    </body>

    </html>