Skip to content

Instantly share code, notes, and snippets.

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 Dec 15, 2015
"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?

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
*/
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 Jan 5, 2016
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 Jan 7, 2016
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 Jan 9, 2016
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 Jan 15, 2016
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>