Skip to content

Instantly share code, notes, and snippets.

@tessalt

tessalt/index.html

Last active August 29, 2015 14:10
Show Gist options
  • Save tessalt/6ab96240045866c4734c to your computer and use it in GitHub Desktop.
Save tessalt/6ab96240045866c4734c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tessalt revised this gist Dec 5, 2014. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@
    <body>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    <svg id="WorldMap" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="207 79 956 590" enable-background="new 207 79 956 590" xml:space="preserve">
    <circle fill="#FFFFFF" cx="213" cy="87" r="6"/>
    <circle fill="#FFFFFF" cx="213" cy="103" r="6"/>
    @@ -2270,8 +2270,6 @@
    <circle fill="#FFFFFF" cx="1173" cy="663" r="6"/>
    </svg>

    <div id="WorldMap"></div>

    <script>

    (function ($, d3) {
  2. tessalt revised this gist Dec 5, 2014. 1 changed file with 2263 additions and 1 deletion.
    2,264 changes: 2,263 additions & 1 deletion index.html
    View file
    2,263 additions, 1 deletion not shown because the diff is too large. Please use a local Git client to view these changes.
  3. tessalt created this gist Dec 5, 2014.
    108 changes: 108 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>

    <div id="WorldMap"></div>

    <script>

    (function ($, d3) {

    var ShopifyMarketing = {};

    var Breakpoints = ShopifyMarketing.Breakpoints;

    var EqualHeight = ShopifyMarketing.EqualHeight;

    var DotsMap = function (el) {
    this.svg = d3.select(el);

    this.enable();

    this.ripple = _.bind(this.ripple, this);

    $(el).on('click', 'circle', this.ripple);
    };

    DotsMap.prototype.enable = function () {
    this.animateIn();
    };

    // makes all circles visible in random order
    DotsMap.prototype.animateIn = function () {
    var circles = d3.shuffle(this.svg.selectAll('circle[fill="#EBEEF0"]')[0]);
    d3.selectAll(circles).each(function (d, index) {
    var circle = this;
    setTimeout(function () {
    d3.select(circle).classed('is-visible', true);
    }, index);
    });

    };

    DotsMap.prototype.ripple = function (evt) {

    var circles = d3.selectAll('circle');
    var center = d3.select(evt.target);

    var maxX = parseInt(center.attr('cx'));
    var minX = parseInt(center.attr('cx'));
    var maxY = parseInt(center.attr('cy'));
    var minY = parseInt(center.attr('cy'));

    for (var i = 0; i < 100; i++) {

    setTimeout(function() {
    var e = d3.selectAll('[cx="' + (minX - 16) + '"]');
    var w = d3.selectAll('[cx="' + (maxX + 16) + '"]');
    var ew = e[0].concat(w[0]);

    var n = d3.selectAll('[cy="' + (minY - 16) + '"]');
    var s = d3.selectAll('[cy="' + (maxY + 16) + '"]');
    var ns = n[0].concat(s[0]);

    var ewFiltered = ew.filter(function (element) {
    var cy = parseInt(d3.select(element).attr('cy'));
    return cy >= minY - 16 && cy <= maxY + 16;
    });

    var nsFiltered = ns.filter(function (element) {
    var cx = parseInt(d3.select(element).attr('cx'));
    return cx >= minX - 16 && cx <= maxX + 16;
    })

    d3.selectAll(ewFiltered).classed('ping', true);
    d3.selectAll(nsFiltered).classed('ping', true);

    maxX += 16;
    minX -= 16;

    maxY += 16;
    minY -= 16;


    }, 10 * i);

    if (i === 99) {
    circles.classed('ping', false);
    }

    }

    };


    new DotsMap(document.getElementById('WorldMap'));

    })(window.jQuery, window.d3);


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