Skip to content

Instantly share code, notes, and snippets.

@Andrew-Reid
Andrew-Reid / d3-fuse.js
Last active August 23, 2018 21:48
d3-fuse Map
/*v0.0.1*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3)); }(this, (function (exports,d3Quadtree) { 'use strict';
var c = function(f) { return (typeof f == "function") ? f : (function() { return f; }) }
var fuse = function(n) {
var nodes = n || [], padding = 0, pi = Math.PI;
@Andrew-Reid
Andrew-Reid / d3-fuse.js
Last active August 23, 2018 21:30
D3-fuse
/*v0.0.0*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3)); }(this, (function (exports,d3Quadtree) { 'use strict';
var c = function(f) { return (typeof f == "function") ? f : (function() { return f; }) }
var fuse = function(n) {
var nodes = n || [], padding = 0, pi = Math.PI;
@Andrew-Reid
Andrew-Reid / index.html
Last active April 5, 2024 20:46
~ 20 000 Simultaneous Canvas Transitions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas, Lots of Transitions</title>
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
</head>
@Andrew-Reid
Andrew-Reid / index.html
Last active October 17, 2023 02:42
~20 000 Simultaneous SVG Transitions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG Lots of Transitions</title>
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
</head>
@Andrew-Reid
Andrew-Reid / d3-cluster.js
Last active July 25, 2018 17:08
D3 Marker Clustering w/Unified Mercator & Tile
// https://d3js.org/d3-force/ Version 1.1.0. Copyright 2017 Mike Bostock.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree'), require('d3-collection'), require('d3-dispatch'), require('d3-timer')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree', 'd3-collection', 'd3-dispatch', 'd3-timer'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3));
}(this, (function (exports,d3Quadtree,d3Collection,d3Dispatch,d3Timer) { 'use strict';
var constant = function(x) {
return function() {
@Andrew-Reid
Andrew-Reid / d3-slippy.js
Last active August 27, 2018 22:16
d3-slippy: Slippy Projection
// Andrew Reid 2018
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3));
}(this, function (exports) { 'use strict';
function geoTile() {
// Basic Constants
@Andrew-Reid
Andrew-Reid / d3-cluster.js
Last active July 23, 2018 05:13
D3 Marker Clustering - Shipwrecks
// https://d3js.org/d3-force/ Version 1.1.0. Copyright 2017 Mike Bostock.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree'), require('d3-collection'), require('d3-dispatch'), require('d3-timer')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree', 'd3-collection', 'd3-dispatch', 'd3-timer'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3));
}(this, (function (exports,d3Quadtree,d3Collection,d3Dispatch,d3Timer) { 'use strict';
var constant = function(x) {
return function() {
@Andrew-Reid
Andrew-Reid / d3-cluster.js
Last active December 8, 2023 02:48
D3 Marker Clustering
// https://d3js.org/d3-force/ Version 1.1.0. Copyright 2017 Mike Bostock.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree'), require('d3-collection'), require('d3-dispatch'), require('d3-timer')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree', 'd3-collection', 'd3-dispatch', 'd3-timer'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3));
}(this, (function (exports,d3Quadtree,d3Collection,d3Dispatch,d3Timer) { 'use strict';
var constant = function(x) {
return function() {
@Andrew-Reid
Andrew-Reid / index.html
Last active July 4, 2018 20:57
Force Transitions to End State and Trigger End Event (v3)
<script src="https://d3js.org/d3.v3.js"></script>
<body>
<script>
d3.selection.prototype.finish = function() {
// check if there is a transition to finish:
if (this.node().__transition__) {
// get each transition in progress:
var transitions = this.node().__transition__;
@Andrew-Reid
Andrew-Reid / index.html
Last active May 8, 2018 01:23
Leaflet and Popup with D3.js 2
<!DOCTYPE html>
<html>
<head>
<title>Leaflet with D3 popups</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>