Skip to content

Instantly share code, notes, and snippets.

View magjac's full-sized avatar

Magnus Jacobsson magjac

  • Stockholm, Sweden
View GitHub Profile
@magjac
magjac / index.html
Last active August 3, 2017 21:48
D3 timer bug (?) 1
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<h1>Open the console and look for messages</h1>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var period = 1000;
@magjac
magjac / index.html
Last active August 3, 2017 21:47
D3 timer bug (?) 2
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<h1>Open the console and look for messages</h1>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var period = 1000;
@magjac
magjac / README.md
Last active August 3, 2017 22:55
Path Tween D3 v4 High Precision Precalculate

This is a port of https://bl.ocks.org/mbostock/3916621 to D3 v4 and an attempt to be able to use much higher precision without affecting smoothness. The idea is to precalculate the resampled path before the transision starts, during its delay. The result is a big jump in all but the first transition because of problems (?) with D3 timer:

d3/d3-timer#26

d3/d3-timer#27

Actually, what I really want to do is not to use much higher precision, but to do this type of path tweening on many paths simultaneously. This was just an easier way to illustrate the idea and the problem.

@magjac
magjac / index.html
Last active August 4, 2017 18:46
D3 timer bug (?) 3
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<h1>Open the console and look for messages</h1>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
var n = 30000000;
console.time('delay1');
@magjac
magjac / README.md
Last active August 4, 2017 20:23
Path Tween D3 v4 showing timer bug (?)
@magjac
magjac / index.html
Last active September 21, 2024 15:56
d3-graphviz Basic Example
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/graphviz.umd.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
@magjac
magjac / d3-graphviz.min.js
Created August 8, 2017 21:51
d3-graphviz.min.js
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection"),require("d3-transition"),require("d3-zoom"),require("d3-interpolate"),require("viz.js")):"function"==typeof define&&define.amd?define(["exports","d3-selection","d3-transition","d3-zoom","d3-interpolate","viz.js"],e):e(t.d3=t.d3||{},t.d3,t.d3,t.d3,t.d3,t.Viz)}(this,function(t,e,n,i,r,o){"use strict";function a(){var t=this._selection,n=e.select(t.node().querySelector("svg"));if(0==n.size())return this;this._zoomSelection=n;var r=[.1,10],o=i.zoom().scaleExtent(r).on("zoom",function(){a.attr("transform",e.event.transform)});this._zoomBehavior=o;var a=e.select(n.node().querySelector("g"));return n.call(o),this._active||h.call(this,a),this}function s(t){var e=t.node().transform;if(e&&0!=e.baseVal.length){var n=e.baseVal.consolidate().matrix;return{x:n.e,y:n.f}}return{x:0,y:0}}function l(t){var e=this._translation,n=t.datum().translation,r=n.x-e.x,o=n.y-e.y;return i.zoomTransform(this._zoomSelection.node()).transla
@magjac
magjac / index.html
Last active September 21, 2024 16:15
d3-graphviz Shape Tweening Demo
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/graphviz.umd.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dotIndex = 0;
@magjac
magjac / index.html
Last active September 21, 2024 15:42
d3-graphviz Demo
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/graphviz.umd.js"></script>
<script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
var dotIndex = 0;
@magjac
magjac / .block
Last active August 13, 2017 08:45
Smooth Chained Transitions Despite Long Computational Time at the End of the First Transition
height: 250