Skip to content

Instantly share code, notes, and snippets.

@tmcw tmcw/index.html
Created Feb 14, 2013

Embed
What would you like to do?
geometry daily two
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
stroke:#b73438; stroke-width:1; fill:transparent;
}
svg {
float:left;
}
#vis {
width: 400px;
height: 400px;
}
#matte {
background:#f1f1f1;
width: 400px;
height: 400px;
padding:50px;
}
</style>
<body>
<div id='matte'>
<div id='vis'></div>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src='viz.js'></script>
</body>
var a = -90, b = 0, c = 90, d = 180;
var g = d3.select('#vis')
.selectAll('svg')
.data([a, b, a, b, d,
c, d, d, a, a,
b, a, d, b, c,
b, c, b, c, b,
c, d, c, d, b])
.enter()
.append('svg')
.attr({ width: 80, height: 80 })
.append('g')
.attr('transform', function(d) { return 'rotate(' + d + ', 40, 40)'; });
var line = d3.svg.line()
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; });
function unit(angle) { return [Math.cos(angle), Math.sin(angle)]; }
function mult(x, y) { return x.map(function(_) { return _ * y; }); }
function gen(i) {
var angle = Math.PI * 0.5 * (i / 30);
return [[0, 0],
mult(unit(angle), (1 / Math[(angle < Math.PI/4) ? 'cos' : 'sin'](angle) * 80))
];
}
g.selectAll('path.a')
.data(d3.range(0, 31).map(gen))
.enter().append('path')
.attr({ 'class': 'a', d: line });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.