Skip to content

Instantly share code, notes, and snippets.

@adamchandra

adamchandra/README.md

Forked from mbostock/.block
Last active August 29, 2015 14:08
Show Gist options
  • Save adamchandra/388a8c4e383c3df721dd to your computer and use it in GitHub Desktop.
Save adamchandra/388a8c4e383c3df721dd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @mbostock mbostock revised this gist Dec 23, 2012. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    From [Wikipedia](http://en.wikipedia.org/wiki/Epicyclic_gearing): **Epicyclic gearing** or **planetary gearing** is a gear system consisting of one or more outer gears, or *planet* gears, revolving about a central, or *sun* gear. … Epicyclic gearing systems also incorporate the use of an outer ring gear or *annulus*, which meshes with the planet gears.
    From [Wikipedia](http://en.wikipedia.org/wiki/Epicyclic_gearing):

    Built with [D3.js](http://mbostock.github.com/d3/).
    > **Epicyclic gearing** or **planetary gearing** is a gear system consisting of one or more outer gears, or *planet* gears, revolving about a central, or *sun* gear. … Epicyclic gearing systems also incorporate the use of an outer ring gear or *annulus*, which meshes with the planet gears.
    Use the menu in the top-left to change the frame of reference, fixing the specified gear in-place.
  2. @mbostock mbostock revised this gist Dec 23, 2012. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,9 @@

    body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 960px;
    height: 500px;
    position: relative;
    }

    form {
    @@ -32,7 +35,6 @@

    </style>
    <form>
    Frame of Reference:<br>
    <input type="radio" name="reference" id="ref-annulus">
    <label for="ref-annulus">Annulus</label><br>
    <input type="radio" name="reference" id="ref-planet" checked>
  3. @mbostock mbostock revised this gist Dec 23, 2012. 1 changed file with 65 additions and 65 deletions.
    130 changes: 65 additions & 65 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +1,15 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">
    <meta charset="utf-8">
    <style>

    body {
    font: 300 13px "Helvetica Neue", Helvetica;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    form {
    padding: 1em;
    }

    form, svg {
    position: absolute;
    top: 1em;
    left: 1em;
    }

    path {
    @@ -30,77 +26,83 @@
    fill: #9ecae1;
    }

    .ring path {
    .annulus path {
    fill: #c6dbef;
    }

    </style>
    </head>
    <body>
    <form>
    Frame of Reference:<br>
    <input type="radio" name="reference" id="ref-ring">
    <label for="ref-ring">Annulus</label><br>
    <input type="radio" name="reference" id="ref-planet" checked>
    <label for="ref-planet">Planets</label><br>
    <input type="radio" name="reference" id="ref-sun">
    <label for="ref-sun">Sun</label>
    </form>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript">

    var w = 960,
    h = 500,
    r = 80,
    </style>
    <form>
    Frame of Reference:<br>
    <input type="radio" name="reference" id="ref-annulus">
    <label for="ref-annulus">Annulus</label><br>
    <input type="radio" name="reference" id="ref-planet" checked>
    <label for="ref-planet">Planets</label><br>
    <input type="radio" name="reference" id="ref-sun">
    <label for="ref-sun">Sun</label>
    </form>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
    height = 500,
    radius = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3);

    var offset = 0,
    speed = 4,
    start = Date.now();

    var svg = d3.select("body").insert("svg:svg", "form")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.55)")
    .append("svg:g")
    .data([{radius: Infinity}]);

    svg.append("svg:g")
    .attr("class", "ring")
    .data([{teeth: 80, radius: -r * 5, ring: true}])
    .append("svg:path")
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(.55)")
    .append("g");

    var frame = svg.append("g")
    .datum({radius: Infinity});

    frame.append("g")
    .attr("class", "annulus")
    .datum({teeth: 80, radius: -radius * 5, annulus: true})
    .append("path")
    .attr("d", gear);

    svg.append("svg:g")
    frame.append("g")
    .attr("class", "sun")
    .data([{teeth: 16, radius: r}])
    .append("svg:path")
    .datum({teeth: 16, radius: radius})
    .append("path")
    .attr("d", gear);

    svg.append("svg:g")
    frame.append("g")
    .attr("class", "planet")
    .attr("transform", "translate(0,-" + r * 3 + ")")
    .data([{teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("transform", "translate(0,-" + radius * 3 + ")")
    .datum({teeth: 32, radius: -radius * 2})
    .append("path")
    .attr("d", gear);

    svg.append("svg:g")
    frame.append("g")
    .attr("class", "planet")
    .attr("transform", "translate(" + -r * 3 * x + "," + -r * 3 * y + ")")
    .data([{teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("transform", "translate(" + -radius * 3 * x + "," + -radius * 3 * y + ")")
    .datum({teeth: 32, radius: -radius * 2})
    .append("path")
    .attr("d", gear);

    svg.append("svg:g")
    frame.append("g")
    .attr("class", "planet")
    .attr("transform", "translate(" + r * 3 * x + "," + -r * 3 * y + ")")
    .data([{teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("transform", "translate(" + radius * 3 * x + "," + -radius * 3 * y + ")")
    .datum({teeth: 32, radius: -radius * 2})
    .append("path")
    .attr("d", gear);

    d3.selectAll("input[name=reference]")
    .data([r * 5, Infinity, -r])
    .on("change", function(d) { svg.data([{radius: d}]); });
    .data([radius * 5, Infinity, -radius])
    .on("change", function(radius1) {
    var radius0 = frame.datum().radius, angle = (Date.now() - start) * speed;
    frame.datum({radius: radius1});
    svg.attr("transform", "rotate(" + (offset += angle / radius0 - angle / radius1) + ")");
    });

    d3.selectAll("input[name=speed]")
    .on("change", function() { speed = +this.value; });
    @@ -110,9 +112,9 @@
    r2 = Math.abs(d.radius),
    r0 = r2 - 8,
    r1 = r2 + 8,
    r3 = d.ring ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
    r3 = d.annulus ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
    da = Math.PI / n,
    a0 = -Math.PI / 2 + (d.ring ? Math.PI / n : 0),
    a0 = -Math.PI / 2 + (d.annulus ? Math.PI / n : 0),
    i = -1,
    path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
    while (++i < n) path.push(
    @@ -129,10 +131,8 @@
    d3.timer(function() {
    var angle = (Date.now() - start) * speed,
    transform = function(d) { return "rotate(" + angle / d.radius + ")"; };
    svg.selectAll("path").attr("transform", transform);
    svg.attr("transform", transform); // frame of reference
    frame.selectAll("path").attr("transform", transform);
    frame.attr("transform", transform); // frame of reference
    });

    </script>
    </body>
    </html>
    </script>
  4. @mbostock mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  5. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,9 +39,9 @@
    <body>
    <form>
    Frame of Reference:<br>
    <input type="radio" name="reference" id="ref-ring" checked>
    <input type="radio" name="reference" id="ref-ring">
    <label for="ref-ring">Annulus</label><br>
    <input type="radio" name="reference" id="ref-planet">
    <input type="radio" name="reference" id="ref-planet" checked>
    <label for="ref-planet">Planets</label><br>
    <input type="radio" name="reference" id="ref-sun">
    <label for="ref-sun">Sun</label>
    @@ -63,7 +63,7 @@
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.55)")
    .append("svg:g")
    .data([{radius: r * 5}]);
    .data([{radius: Infinity}]);

    svg.append("svg:g")
    .attr("class", "ring")
  6. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 31 additions and 3 deletions.
    34 changes: 31 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,18 @@
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">

    body {
    font: 300 13px "Helvetica Neue", Helvetica;
    }

    form {
    padding: 1em;
    }

    form, svg {
    position: absolute;
    }

    path {
    fill-rule: evenodd;
    stroke: #333;
    @@ -25,6 +37,15 @@
    </style>
    </head>
    <body>
    <form>
    Frame of Reference:<br>
    <input type="radio" name="reference" id="ref-ring" checked>
    <label for="ref-ring">Annulus</label><br>
    <input type="radio" name="reference" id="ref-planet">
    <label for="ref-planet">Planets</label><br>
    <input type="radio" name="reference" id="ref-sun">
    <label for="ref-sun">Sun</label>
    </form>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript">

    @@ -33,10 +54,10 @@
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 2,
    speed = 4,
    start = Date.now();

    var svg = d3.select("body").append("svg:svg")
    var svg = d3.select("body").insert("svg:svg", "form")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    @@ -77,6 +98,13 @@
    .append("svg:path")
    .attr("d", gear);

    d3.selectAll("input[name=reference]")
    .data([r * 5, Infinity, -r])
    .on("change", function(d) { svg.data([{radius: d}]); });

    d3.selectAll("input[name=speed]")
    .on("change", function() { speed = +this.value; });

    function gear(d) {
    var n = d.teeth,
    r2 = Math.abs(d.radius),
    @@ -102,7 +130,7 @@
    var angle = (Date.now() - start) * speed,
    transform = function(d) { return "rotate(" + angle / d.radius + ")"; };
    svg.selectAll("path").attr("transform", transform);
    svg.attr("transform", transform); // fixed ring
    svg.attr("transform", transform); // frame of reference
    });

    </script>
  7. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 6 additions and 4 deletions.
    10 changes: 6 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -41,7 +41,8 @@
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.55)")
    .append("svg:g");
    .append("svg:g")
    .data([{radius: r * 5}]);

    svg.append("svg:g")
    .attr("class", "ring")
    @@ -98,9 +99,10 @@
    }

    d3.timer(function() {
    var angle = (Date.now() - start) * speed;
    svg.selectAll("path").attr("transform", function(d) { return "rotate(" + angle / d.radius + ")"; });
    svg.attr("transform", "rotate(" + angle / r / 5 + ")");
    var angle = (Date.now() - start) * speed,
    transform = function(d) { return "rotate(" + angle / d.radius + ")"; };
    svg.selectAll("path").attr("transform", transform);
    svg.attr("transform", transform); // fixed ring
    });

    </script>
  8. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    From [Wikipedia](http://en.wikipedia.org/wiki/Epicyclic_gearing): **Epicyclic gearing** or **planetary gearing** is a gear system consisting of one or more outer gears, or *planet* gears, revolving about a central, or *sun* gear. … Epicyclic gearing systems also incorporate the use of an outer ring gear or *annulus*, which meshes with the planet gears.

    Built with [D3.js](http://mbostock.github.com/d3/).
  9. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 1,
    speed = 2,
    start = Date.now();

    var svg = d3.select("body").append("svg:svg")
    @@ -85,7 +85,7 @@
    da = Math.PI / n,
    a0 = -Math.PI / 2 + (d.ring ? Math.PI / n : 0),
    i = -1,
    path = ["M0,", -r0];
    path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
    while (++i < n) path.push(
    "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
    "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
  10. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -100,7 +100,7 @@
    d3.timer(function() {
    var angle = (Date.now() - start) * speed;
    svg.selectAll("path").attr("transform", function(d) { return "rotate(" + angle / d.radius + ")"; });
    svg.attr("transform", "rotate(" + -angle / r / 5 + ")");
    svg.attr("transform", "rotate(" + angle / r / 5 + ")");
    });

    </script>
  11. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -33,7 +33,7 @@
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 1e-1,
    speed = 1,
    start = Date.now();

    var svg = d3.select("body").append("svg:svg")
  12. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -33,7 +33,7 @@
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 1e-2,
    speed = 1e-1,
    start = Date.now();

    var svg = d3.select("body").append("svg:svg")
  13. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,7 @@
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 1e-3,
    speed = 1e-2,
    start = Date.now();

    var svg = d3.select("body").append("svg:svg")
    @@ -100,7 +100,7 @@
    d3.timer(function() {
    var angle = (Date.now() - start) * speed;
    svg.selectAll("path").attr("transform", function(d) { return "rotate(" + angle / d.radius + ")"; });
    svg.attr("transform", "rotate(" + -angle + ")");
    svg.attr("transform", "rotate(" + -angle / r / 5 + ")");
    });

    </script>
  14. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -34,7 +34,7 @@
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 1e-3,
    time = Date.now();
    start = Date.now();

    var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
  15. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 11 additions and 9 deletions.
    20 changes: 11 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -33,7 +33,8 @@
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 40;
    speed = 1e-3,
    time = Date.now();

    var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    @@ -44,34 +45,34 @@

    svg.append("svg:g")
    .attr("class", "ring")
    .data([ring = {angle: 2.25, teeth: 80, radius: -r * 5, ring: true}])
    .data([{teeth: 80, radius: -r * 5, ring: true}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "sun")
    .data([{angle: 0, teeth: 16, radius: r}])
    .data([{teeth: 16, radius: r}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(0,-" + r * 3 + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .data([{teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + -r * 3 * x + "," + -r * 3 * y + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .data([{teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + r * 3 * x + "," + -r * 3 * y + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .data([{teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);

    @@ -82,7 +83,7 @@
    r1 = r2 + 8,
    r3 = d.ring ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
    da = Math.PI / n,
    a0 = -Math.PI / 2,
    a0 = -Math.PI / 2 + (d.ring ? Math.PI / n : 0),
    i = -1,
    path = ["M0,", -r0];
    while (++i < n) path.push(
    @@ -97,8 +98,9 @@
    }

    d3.timer(function() {
    svg.selectAll("path").attr("transform", function(d) { return "rotate(" + (d.angle += speed / d.radius) + ")"; });
    svg.attr("transform", "rotate(" + -ring.angle + ")");
    var angle = (Date.now() - start) * speed;
    svg.selectAll("path").attr("transform", function(d) { return "rotate(" + angle / d.radius + ")"; });
    svg.attr("transform", "rotate(" + -angle + ")");
    });

    </script>
  16. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -33,7 +33,7 @@
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 20;
    speed = 40;

    var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
  17. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -44,7 +44,7 @@

    svg.append("svg:g")
    .attr("class", "ring")
    .data(ring = [{angle: 2.25, teeth: 80, radius: -r * 5, ring: true}])
    .data([ring = {angle: 2.25, teeth: 80, radius: -r * 5, ring: true}])
    .append("svg:path")
    .attr("d", gear);

  18. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -39,11 +39,12 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.55)");
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.55)")
    .append("svg:g");

    svg.append("svg:g")
    .attr("class", "ring")
    .data([{angle: 2.25, teeth: 80, radius: -r * 5, ring: true}])
    .data(ring = [{angle: 2.25, teeth: 80, radius: -r * 5, ring: true}])
    .append("svg:path")
    .attr("d", gear);

    @@ -96,9 +97,8 @@
    }

    d3.timer(function() {
    svg.selectAll("path").attr("transform", function(d) {
    return "rotate(" + (d.angle += speed / d.radius) + ")";
    });
    svg.selectAll("path").attr("transform", function(d) { return "rotate(" + (d.angle += speed / d.radius) + ")"; });
    svg.attr("transform", "rotate(" + -ring.angle + ")");
    });

    </script>
  19. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    path {
    fill-rule: evenodd;
    stroke: #333;
    stroke-width: 2.5px;
    stroke-width: 2px;
    }

    .sun path {
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6)");
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.55)");

    svg.append("svg:g")
    .attr("class", "ring")
  20. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    path {
    fill-rule: evenodd;
    stroke: #333;
    stroke-width: 1.5px;
    stroke-width: 2.5px;
    }

    .sun path {
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.625)");
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.6)");

    svg.append("svg:g")
    .attr("class", "ring")
  21. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / Math.sqrt(3) + ")scale(.7)");
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.625)");

    svg.append("svg:g")
    .attr("class", "ring")
  22. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / Math.sqrt(3) + ")scale(.8)");
    .attr("transform", "translate(" + w / 2 + "," + h / Math.sqrt(3) + ")scale(.7)");

    svg.append("svg:g")
    .attr("class", "ring")
  23. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.8)");
    .attr("transform", "translate(" + w / 2 + "," + h / Math.sqrt(3) + ")scale(.8)");

    svg.append("svg:g")
    .attr("class", "ring")
  24. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h * x / 2 + ")scale(.8)");
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(.8)");

    svg.append("svg:g")
    .attr("class", "ring")
  25. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h * x + ")scale(.8)");
    .attr("transform", "translate(" + w / 2 + "," + h * x / 2 + ")scale(.8)");

    svg.append("svg:g")
    .attr("class", "ring")
  26. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + 2 * h / 3 + ")scale(.5)");
    .attr("transform", "translate(" + w / 2 + "," + h * x + ")scale(.8)");

    svg.append("svg:g")
    .attr("class", "ring")
  27. @mbostock mbostock revised this gist Nov 10, 2011. 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
    @@ -39,7 +39,7 @@
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
    .attr("transform", "translate(" + w / 2 + "," + 2 * h / 3 + ")scale(.5)");

    svg.append("svg:g")
    .attr("class", "ring")
  28. @mbostock mbostock revised this gist Nov 10, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -62,14 +62,14 @@

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + -r * 3 * x + "," + r * 3 * y + ")")
    .attr("transform", "translate(" + -r * 3 * x + "," + -r * 3 * y + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + r * 3 * x + "," + r * 3 * y + ")")
    .attr("transform", "translate(" + r * 3 * x + "," + -r * 3 * y + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);
  29. @mbostock mbostock created this gist Nov 10, 2011.
    106 changes: 106 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,106 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <style type="text/css">

    path {
    fill-rule: evenodd;
    stroke: #333;
    stroke-width: 1.5px;
    }

    .sun path {
    fill: #6baed6;
    }

    .planet path {
    fill: #9ecae1;
    }

    .ring path {
    fill: #c6dbef;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript">

    var w = 960,
    h = 500,
    r = 80,
    x = Math.sin(2 * Math.PI / 3),
    y = Math.cos(2 * Math.PI / 3),
    speed = 20;

    var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");

    svg.append("svg:g")
    .attr("class", "ring")
    .data([{angle: 2.25, teeth: 80, radius: -r * 5, ring: true}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "sun")
    .data([{angle: 0, teeth: 16, radius: r}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(0,-" + r * 3 + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + -r * 3 * x + "," + r * 3 * y + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);

    svg.append("svg:g")
    .attr("class", "planet")
    .attr("transform", "translate(" + r * 3 * x + "," + r * 3 * y + ")")
    .data([{angle: 0, teeth: 32, radius: -r * 2}])
    .append("svg:path")
    .attr("d", gear);

    function gear(d) {
    var n = d.teeth,
    r2 = Math.abs(d.radius),
    r0 = r2 - 8,
    r1 = r2 + 8,
    r3 = d.ring ? (r3 = r0, r0 = r1, r1 = r3, r2 + 20) : 20,
    da = Math.PI / n,
    a0 = -Math.PI / 2,
    i = -1,
    path = ["M0,", -r0];
    while (++i < n) path.push(
    "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
    "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
    "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
    "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
    "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
    "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0));
    path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z");
    return path.join("");
    }

    d3.timer(function() {
    svg.selectAll("path").attr("transform", function(d) {
    return "rotate(" + (d.angle += speed / d.radius) + ")";
    });
    });

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