Skip to content

Instantly share code, notes, and snippets.

@kirjavascript
kirjavascript / index.html
Created December 12, 2015 03:35
AdventOfCode Day9
View index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head><title>9</title></head>
<body><p>Faerun to Norrath = 129
Faerun to Tristram = 58
Faerun to AlphaCentauri = 13
Faerun to Arbre = 24
Faerun to Snowdin = 60
Faerun to Tambi = 71
@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
View README.md

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 December 20, 2015 00:08
AoC #18
View index.html
<!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 / index.html
Last active December 22, 2015 01:28
Fractals
View index.html
<!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>
View index.html
<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 January 5, 2016 16:24
stroke dash hax with Snap.svg.js
View index.html
<!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 7, 2016 17:40
clip path hax with snap.svg.js
View index.html
<!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 9, 2016 01:18
signature scrawler
View index.html
<!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 15, 2016 17:59
Nested data binding
View index.html
<!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>