Skip to content

Instantly share code, notes, and snippets.

View kirjavascript's full-sized avatar

Kirjava kirjavascript

115 followers · 100 following
View GitHub Profile
@kirjavascript
kirjavascript / index.html
Last active January 15, 2016 17:59
Nested data binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
<script>
@kirjavascript
kirjavascript / index.html
Last active January 9, 2016 01:18
signature scrawler
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head><title>thom</title></head>
<style>
svg{position:absolute;top:0;left:0;right:0;bottom:0;background:whitesmoke}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
@kirjavascript
kirjavascript / index.html
Last active January 7, 2016 17:40
clip path hax with snap.svg.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>stroke dash hax with Snap.svg.js</title>
</head>
<body>
<svg></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
@kirjavascript
kirjavascript / index.html
Last active January 5, 2016 16:24
stroke dash hax with Snap.svg.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>stroke dash hax with Snap.svg.js</title>
</head>
<body>
<svg></svg>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
@kirjavascript
kirjavascript / index.html
Created December 22, 2015 01:30
AoC #3
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
/*
created by snkenjoi/kirjava/colourful/cake
*/
var data = "^^<<v<<v><v^^<><>^^<v<v^>>^^^><^>v^>v><><><<vv^^<^>^^<v^>v>v^v>>>^<>v<^<v^><^>>>>><<v>>^>>^>v^>><<^>v>v<>^v^v^vvv><>^^>v><v<><>^><^^<vv^v<v>^v>>^v^>v><>v^<vv>^><<v^>vv^<<>v>>><<<>>^<vv<^<>^^vv>>>^><<<<vv^v^>>><><^>v<>^>v<v^v<^vv><^v^><<<<>^<>v>^v>v<v<v<<>v<^<<<v>>>>>^^v>vv^^<>^<>^^^^<^^^v<v^^>v<^^v^^>v>^v^^^^>><<v<>v<>^v^<v<>><>^^><<^^<^^>vv<>v^<^v<vv<<<>^>^^>^<>v^^vv<>>v><<<>vvv<>v<>><^<^v<>^vv>^^v<v<v><^<>>vv<^>>^>>vv^v<vv^vv<^<<>>^v^<>^>>>>vv>^^>v>vv>v><^vv^<<v>^<<^^<v<v>vv<v^^<>^^v>^>>v><^<<vv<<v^vv^^^v>>v<<v^><vv^><vv<^vv<<vv^v<<^v<^^v>><<v^>>^^<>v>><<v<>>^^<v>>^^>>vvv^><<<<<^<^vv<^<><v<<>^^^<<<^>^^^<v<<vv>vv<>^<>v<^v>^<<<v<v<v>>^v<>>v<<^<<v<<>^<<<><><>^>>>>^>v^v<<v<v<<>>vv<^vvv^^^^<vv>vv>^v^^v^<v^v><^vv<^vv>v<^>vv<>>^>^><vv<><^>v>^v>vvv<>^>^v<><>vv>><^v^<><><v>>v^v^><^<^>vv>v<^>vvv>v<<<<<^<v<<vv<^^^<<>>^v<vv<^<>v>^<v<>><><>^<<v>v^>^<vv
@kirjavascript
kirjavascript / index.html
Last active December 22, 2015 01:28
Fractals
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head><title>fractal</title></head>
<style>
svg{width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1}
</style>
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
@kirjavascript
kirjavascript / index.html
Last active December 20, 2015 00:08
AoC #18
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head><title>GoL</title></head>
<body></body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script>
/*
created by snkenjoi/kirjava/colourful/cake
*/
@kirjavascript
kirjavascript / README.md
Last active December 15, 2015 01:30
Incorrectly Animated Tree
@kirjavascript
kirjavascript / README.md
Last active December 15, 2015 01:38
"Correctly" Animated Tree

This is my solution (hack) for fixing the incorrectly animated tree.

The issue occurs because animations are interrupted when new data comes from an API at this speed. I know I can queue the data instead but I would prefer to try without doing that (it doesn't look as stuttery).

When loading a new path, d3 seems to give you the position the source node will be upon finishing the animation instead of a transitional value.

My fix for this is to assign the id of each node as an attribute so that when a path needs to load mid animation it can directly pull the position from the node instead of the data position used by d3. This feels ugly.

Does anyone have a better fix?

@kirjavascript
kirjavascript / index.html
Last active February 23, 2016 20:59
sonicgolf
<body></body>
<script>
w="+2786568;<=>979;999323446772,***/02479";j=s=y=t=[];for(k=[];t<293;)f=atob("AAAAAAAAEQAgIhIRESIAECEiIgIgIxERACIiIjQjgREBIgJCMwOIGAECAEIUgYiIEQAAAgARGBGBEQAAIAKBGBGZGBgBAAAgAqgYkaqJEYEAIgIiEIgRqqoHESciIiIiAhERqqp3ECciIgAAoap6h3ciIgAAqKp3egsgIgKkiqqqtLcAACIiNDOqqjN3BwAiIiI0MzMzMyAiIiIiNDMzRAYiIiIiJ0JERGYiInInAmYmMjMDNEMmM0QENDNDMkQiAjQzQzIkIgJEM2QipJqaAERktyKmqaoCACCbCQC5mSkgJ7eZkpkZIHK3mRIiEiISIhIim6q6mbm7mbubeZZpprabdmaWult3m3lmtllVVXV3ZmdmW1VVVVV1Z3Z3d3d3d3d3d3c")[o='charCodeAt'](t++),k.push(f&15,f>>4);q=".+*2(6<'*6;(-6.5-6+8);(<'=&>+9-7,9*;)9)9(9-3/2.3-4-4,6,7,7,'0,7+1*7(3(7(2(7(2(7(0+6*0+6+/2/4.7.9.9";(p=document.body.style).width=c="10px";for(p.height=c;j<98;)for(a=q[o](j++)-(e=38),b=q[o](j++)-e,i=0;i<b;)y.push((i+++a)*10);for(i=v=[];i<e;)v.push(w[o](i++)-e);for(i=1;i<e;)v[i]+=v[i++-1];for(i=u=0;i<586;)-1<v.indexOf(i)?u+=10:s,s[i]=y[i]+"px "+u+"px#"+"24C44E22AEA8A64E0080000066EAAAFFF888".match(/.../g)[k[i++]];p.boxShadow=s
</script>