Skip to content

Instantly share code, notes, and snippets.

View ZJONSSON's full-sized avatar

Ziggy Jonsson ZJONSSON

85 followers · 56 following
View GitHub Profile
@ZJONSSON
ZJONSSON / index.html
Last active May 27, 2022 17:14
Simple transitioning slides with SVG and D3
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="svg_slides.js"></script>
<script src="svg_interact.js"></script>
</head>
<body>
<script>
// There are probably better ways of loading the SVG, but this is one example I found
@ZJONSSON
ZJONSSON / index.html
Created October 1, 2011 19:36
Using data() enter and exit in D3
<!DOCTYPE html>
<html>
<head></head>
<body></body>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript">
// Define the SVG domain in a viewbox to get automatic resize to
// window. This is a good alternative to d3.scale for simple stuff
svg=d3.select("body")
@ZJONSSON
ZJONSSON / index.html
Created October 5, 2011 00:20
SVG slippy map using Viewbox with D3
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="svg_interact.js"></script>
<script type="text/javascript" src="svg_map.js"></script>
</head>
<body></body>
@ZJONSSON
ZJONSSON / 111010eq.csv
Created October 11, 2011 12:36
Icelandic earthquakes (D3)
no dags timi lat lng dypi m ml
1 19950102 000307.555 66.17882 -18.04517 10 0.43 0.59
3 19950102 010116.694 64.00346 -20.74676 2.705 0.62 0.87
5 19950102 015416.201 64.03271 -21.19423 3.287 0.2 0.19
6 19950102 055250.945 66.28475 -19.29296 10 1.27 1.71
8 19950102 063401.656 64.02326 -21.17583 2.031 0.24 0.29
9 19950102 082206.221 66.27399 -16.64717 2.468 0.58 1
10 19950102 095751.370 66.21056 -18.76856 24.896 0.17 0.23
11 19950102 102110.204 64.0312 -21.1858 3.299 0.55 0.59
12 19950102 131453.720 63.94886 -20.3362 6.708 0.03 0.36
@ZJONSSON
ZJONSSON / index.html
Created October 14, 2011 17:11
Update speed based on number of SVG elements in viewBox
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body>
<div id="graph"></div>
<div id="fps">FPS: <SPAN>?</SPAN></DIV>
Number or circles
@ZJONSSON
ZJONSSON / index.html
Created October 14, 2011 22:26
[separate SVG boxes ] Update speed based on number of SVG elements in viewBox
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<STYLE>svg { border: dashed;border-width:1px;}</STYLE>
</head>
<body>
<div id="graph"></div>
<div id="fps">FPS: <SPAN>?</SPAN></DIV>
@ZJONSSON
ZJONSSON / index.html
Created October 14, 2011 23:11
Update speed based on length of an unrelated static path object
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<STYLE>svg { border: dashed;border-width:1px;}</STYLE>
</head>
<body>
<div id="graph"></div>
<div id="fps">FPS: <SPAN>?</SPAN></DIV>
@ZJONSSON
ZJONSSON / index.html
Created October 17, 2011 00:51
Using D3 to create and animate X3D - with x3dom
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
</body>
@ZJONSSON
ZJONSSON / index.html
Last active September 27, 2015 15:28
Simple X3D with D3
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://raw.github.com/mbostock/d3/v2.4.3/d3.js"></script>
<script type="text/javascript" src="http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
</body>
@ZJONSSON
ZJONSSON / index.html
Created October 20, 2011 04:31
Contour Test using Jason Davis implementation with D3
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://paulbourke.net/papers/conrec/conrec.js"></script>
<script type="text/javascript" src="multiplot.js"></script>
</head>
<body>
<script type="text/javascript">
var c = new Conrec(),
xs = d3.range(0, data[0].length),