Skip to content

Instantly share code, notes, and snippets.

@lluchs

lluchs/index.html

Created February 11, 2012 23:26
Show Gist options
  • Save lluchs/1805020 to your computer and use it in GitHub Desktop.
Save lluchs/1805020 to your computer and use it in GitHub Desktop.
Download ZIP
Regular polygon generator written with d3
Raw
index.html
<!doctype html>
<html>
<head>
<title>Polygon</title>
</head>
<body>
<section>
<form onsubmit='return false'>
<label>Number of edges: <input type=number min=3 value=5 /></label>
<label><input type=checkbox /> Show vertices</label>
<br>
<label>Radius: <input type=range min=10 max=400 value=300 /></label>
</form>
</section>
<script src='http://mbostock.github.com/d3/d3.js'></script>
<script src='poly.js'></script>
</body>
</html>
Raw
poly.coffee
# Polygons!
RADIUS = 400
svg = d3.select('section').append 'svg:svg'
svg.attr('width', RADIUS * 2).attr('height', RADIUS * 2)
g = svg.append('g').attr('transform', "translate(#{RADIUS} #{RADIUS})")
edges = document.querySelector('input[type=number]')
radius = document.querySelector('input[type=range]')
vertices = document.querySelector('input[type=checkbox]')
d3.selectAll('input').on 'change', -> update()
update = ->
n = edges.value
r = radius.value
x = r
y = 0
data = for i in [1..n]
alpha = i * 2 * Math.PI / n
px = x
py = y
x = r * Math.cos(alpha)
y = r * Math.sin(alpha)
{x: x, y: y, px: px, py: py}
points = g.selectAll('circle').data(data)
points.enter().append('svg:circle')
.attr('r', 3)
.attr('cx', (d) -> d.x)
.attr('cy', (d) -> d.y)
.attr('opacity', -> if vertices.checked then 1 else 0)
points.transition()
.attr('cx', (d) -> d.x)
.attr('cy', (d) -> d.y)
.attr('opacity', -> if vertices.checked then 1 else 0)
points.exit().remove()
lpos = (sel) ->
sel
.attr('x1', (d) -> d.px)
.attr('y1', (d) -> d.py)
.attr('x2', (d) -> d.x)
.attr('y2', (d) -> d.y)
de = g.selectAll('line').data(data)
de.enter()
.append('svg:line')
.attr('stroke', 'black')
.attr('stroke-width', 2)
.call(lpos)
de.transition()
.call(lpos)
de.exit()
.remove()
update()
Raw
poly.js
(function() {
var RADIUS, edges, g, radius, svg, update, vertices;
RADIUS = 400;
svg = d3.select('section').append('svg:svg');
svg.attr('width', RADIUS * 2).attr('height', RADIUS * 2);
g = svg.append('g').attr('transform', "translate(" + RADIUS + " " + RADIUS + ")");
edges = document.querySelector('input[type=number]');
radius = document.querySelector('input[type=range]');
vertices = document.querySelector('input[type=checkbox]');
d3.selectAll('input').on('change', function() {
return update();
});
update = function() {
var alpha, data, de, i, lpos, n, points, px, py, r, x, y;
n = edges.value;
r = radius.value;
x = r;
y = 0;
data = (function() {
var _results;
_results = [];
for (i = 1; 1 <= n ? i <= n : i >= n; 1 <= n ? i++ : i--) {
alpha = i * 2 * Math.PI / n;
px = x;
py = y;
x = r * Math.cos(alpha);
y = r * Math.sin(alpha);
_results.push({
x: x,
y: y,
px: px,
py: py
});
}
return _results;
})();
points = g.selectAll('circle').data(data);
points.enter().append('svg:circle').attr('r', 3).attr('cx', function(d) {
return d.x;
}).attr('cy', function(d) {
return d.y;
}).attr('opacity', function() {
if (vertices.checked) {
return 1;
} else {
return 0;
}
});
points.transition().attr('cx', function(d) {
return d.x;
}).attr('cy', function(d) {
return d.y;
}).attr('opacity', function() {
if (vertices.checked) {
return 1;
} else {
return 0;
}
});
points.exit().remove();
lpos = function(sel) {
return sel.attr('x1', function(d) {
return d.px;
}).attr('y1', function(d) {
return d.py;
}).attr('x2', function(d) {
return d.x;
}).attr('y2', function(d) {
return d.y;
});
};
de = g.selectAll('line').data(data);
de.enter().append('svg:line').attr('stroke', 'black').attr('stroke-width', 2).call(lpos);
de.transition().call(lpos);
return de.exit().remove();
};
update();
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment