Skip to content

Instantly share code, notes, and snippets.

@tomgp
tomgp / index.html
Last active August 29, 2015 13:57
Small multiple maps
<html>
<head>
<title>small multiple maps</title>
<style type="text/css">
body{
font-family: sans-serif;
}
.map{
display: inline-block;
text-align: center; }
@tomgp
tomgp / index.html
Last active August 29, 2015 14:02
adding a particular date to an SVG axis
<html>
<head>
<title>Tweak axis ticks</title>
<style type="text/css">
path{
fill:none;
stroke:#333;
shape-rendering:crispEdges;
}
line{
@tomgp
tomgp / index.html
Last active August 29, 2015 14:03
lables round a circle
<html>
<head>
<title>Labels on a circle</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.guide{
stroke:#aaa;
fill:none;
stroke-width:1;
stroke-dasharray:1,1;
@tomgp
tomgp / index.html
Created September 22, 2014 14:36
Different style for origin tick
<html>
<head>
<title>scale with different styled origin</title>
<style>
svg{
font-family: sans-serif;
}
line {
@tomgp
tomgp / index.html
Created December 18, 2014 14:16
very simple tick formatter
<html>
<head>
<title>tick format example</title>
<style type="text/css">
svg{font-family: sans-serif;}
.domain{fill:none; stroke:#000;}
.tick, line{stroke:#000;}
.tick, text{stroke:none;}
</style>
</head>
@tomgp
tomgp / index.html
Last active August 29, 2015 14:20
New Political Compass
<html>
<head>
<title>new political compas</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="ternary.js"></script>
<style media="screen">
sup{
vertical-align: top;
font-size: 0.8rem;
@tomgp
tomgp / index.js
Created May 5, 2015 18:18
do two DOM elements overlap?
function intersection(elementA, elementB){
var a = elementA.getBoundingClientRect(),
b = elementB.getBoundingClientRect();
var overlap = (a.left <= b.right &&
b.left <= a.right &&
a.top <= b.bottom &&
b.top <= a.bottom);
return overlap;
}
@tomgp
tomgp / index.js
Created May 5, 2015 18:19
get an SVG transform attribute and split it into an object with properties
function parseTransform (a){
var b={};
a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g);
for (var i in a){
if(a.hasOwnProperty(i)){
var c = a[i].match(/[\w\.\-]+/g);
b[c.shift()] = c;
}
}
return b;
@tomgp
tomgp / index.html
Last active August 29, 2015 14:22
Complex number division
<html>
<head>
<title>Complex number division</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<style type="text/css">
body{
font-family:sans-serif;
}
@tomgp
tomgp / d3.v3.js
Created June 19, 2015 16:47
digital heatmap
!function(){function n(n){return n&&(n.ownerDocument||n.document||n).documentElement}function t(n){return n&&(n.ownerDocument&&n.ownerDocument.defaultView||n.document&&n||n.defaultView)}function e(n,t){return t>n?-1:n>t?1:n>=t?0:0/0}function r(n){return null===n?0/0:+n}function u(n){return!isNaN(n)}function i(n){return{left:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)<0?r=i+1:u=i}return r},right:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)>0?u=i:r=i+1}return r}}}function o(n){return n.length}function a(n){for(var t=1;n*t%1;)t*=10;return t}function c(n,t){for(var e in t)Object.defineProperty(n.prototype,e,{value:t[e],enumerable:!1})}function l(){this._=Object.create(null)}function s(n){return(n+="")===pa||n[0]===va?va+n:n}function f(n){return(n+="")[0]===va?n.slice(1):n}function h(n){return s(n)in this._}function g(n){return(n=s(n))in this._&&delete this._[n]}function p(){var n=[]