Skip to content

Instantly share code, notes, and snippets.

View JohnDelacour's full-sized avatar

JohnDelacour

View GitHub Profile
@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 05:59
Rotating with only one parameter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Rotating using only the angle parameter</title>
<link type="text/css" href="rotation_using_group.css" rel="stylesheet" />
<script src="http://d3js.org/d3.v3.min.js"></script>
@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 09:28
Translate and Rotate 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Translate and Rotate</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css" href="translate_and_rotate.css">
</head>
<body>
<div id="legend">
@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 09:29
Translate and Rotate 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script >
</head>
<body>
<h4 style="position:absolute; left:50px; top:10px; font:12pt sans-serif; color:navy;">
Click the background to reanimate
</h4>
@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 09:38
2-speed Revolving Bar
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>2-speed Revolving Bar</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css" href="revolving_bar.css">
</head>
<body>
<div id="topline">
@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 12:19
Master and Slave Levers
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Levers</title>
<link rel="stylesheet" type="text/css" href="levers.css">
<style type="text/css">
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<html>
@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 12:39 — forked from mbostock/.block
Wavy Text (M. Bostock)
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v2.js"></script>
<script>
var svg = d3.select("body").append("svg")
.attr("viewBox", "0 0 500 300");
svg.append("defs").append("path")
@JohnDelacour
JohnDelacour / data.js
Last active December 17, 2015 13:19
Simple Drag Demo
var circle_data = [
{x:20, y:60},
{x: 45, y:56},
];
var square_data = [
{x:100, y:100, width:80, height:80},
{x:150, y:150, width:80, height:80},
];
@JohnDelacour
JohnDelacour / README.md
Created May 21, 2013 14:32 — forked from mbostock/.block

Click on any arc to zoom in. Click on the center circle to zoom out.

A sunburst is similar to a treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 15:09
Slider for Rotation
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Slider for Rotation</title>
<link type="text/css" href="slider.css" rel="stylesheet" />
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div id="degrees">0.00°</div>
<svg width="960" height="500">
@JohnDelacour
JohnDelacour / index.html
Last active December 17, 2015 21:19
A Radius Follows the Mouse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mouse Spoke</title>
<link type="text/css" href="rotating_spoke.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<script>