Skip to content

Instantly share code, notes, and snippets.

@capitolmuckrakr

capitolmuckrakr/.block

Created March 2, 2017 21:22
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. capitolmuckrakr created this gist Mar 2, 2017.
    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
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@


    forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/ad550c9d6d156ac726b45f48fa6ff2c7'>I Make Circles</a>
    68 changes: 68 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    <!DOCTYPE html>
    <style>

    button {
    position: absolute;
    top: 10px;
    left: 10px;
    }

    circle {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
    }

    </style>
    <button>Click Me</button>
    <svg width="960" height="500"></svg>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>

    var svg = d3.select("svg"),
    margin = {top: 30, right: 30, bottom: 30, left: 30},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var x = d3.scaleTime()
    .range([0, width]);

    var xAxis = d3.axisBottom(x);

    var xAxisG = g.append("g")
    .attr("transform", "translate(0, " + height + ")");

    d3.timer(function() {
    var now = Date.now();
    x.domain([now - 5000, now]);
    xAxisG.call(xAxis);
    });

    d3.select("button").on("click", function() {
    var time = Date.now();

    var circle = g.append("circle")
    .attr("r", 80)
    .attr("stroke-opacity", 0)
    .attr("cy", Math.random() * height);

    circle.transition("time")
    .duration(5000)
    .ease(d3.easeLinear)
    .attrTween("cx", function(d) { return function(t) { return x(time); }; })

    circle.transition()
    .duration(750)
    .ease(d3.easeCubicOut)
    .attr("r", 3.5)
    .attr("stroke-opacity", 1)
    .transition()
    .delay(5000 - 750 * 2)
    .ease(d3.easeCubicIn)
    .attr("r", 80)
    .attr("stroke-opacity", 0)
    .remove();
    });

    </script>
    Binary file added preview.jpg
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.