Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active April 6, 2023 11:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mbostock/1353700 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mbostock/1353700 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mbostock revised this gist Feb 26, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    license: gpl-3.0
    redirect: https://beta.observablehq.com/@mbostock/epicyclic-gearing
    redirect: https://observablehq.com/@mbostock/epicyclic-gearing
  2. mbostock revised this gist Oct 5, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    license: gpl-3.0
    redirect: https://beta.observablehq.com/@mbostock/epicyclic-gearing
  3. mbostock revised this gist Oct 18, 2016. 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
    @@ -42,7 +42,7 @@
    <input type="radio" name="reference" id="ref-sun">
    <label for="ref-sun">Sun</label>
    </form>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

    var width = 960,
    @@ -99,7 +99,7 @@
    .attr("d", gear);

    d3.selectAll("input[name=reference]")
    .data([radius * 5, Infinity, -radius])
    .data([radius * 5, Infinity, -radius])
    .on("change", function(radius1) {
    var radius0 = frame.datum().radius, angle = (Date.now() - start) * speed;
    frame.datum({radius: radius1});
  4. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  5. mbostock revised this gist Feb 6, 2016. 1 changed file with 0 additions and 0 deletions.
    Binary file added preview.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.
  6. mbostock revised this gist Oct 30, 2015. 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
    @@ -42,7 +42,7 @@
    <input type="radio" name="reference" id="ref-sun">
    <label for="ref-sun">Sun</label>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var width = 960,
  7. mbostock revised this gist Jun 11, 2015. 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
    @@ -42,7 +42,7 @@
    <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 src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script>

    var width = 960,
  8. 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.
  9. 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>
  10. 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>
  11. 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.
  12. 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")
  13. 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>
  14. 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>
  15. 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/).
  16. 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),
  17. 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>
  18. 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")
  19. 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")
  20. 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>
  21. 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)
  22. 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>
  23. 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)
  24. 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);

  25. 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>
  26. 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")
  27. 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")
  28. 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")
  29. 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")
  30. 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")