Skip to content

Instantly share code, notes, and snippets.

@kaezarrex kaezarrex/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
sunburst
<html>
<head>
<title>Sketch1</title>
<style>
body {
margin: 0;
background-color: #000;
}
line {
stroke: #333;
stroke-width: 4;
stroke-linecap: round;
}
</style>
<script src="http://coffeescript.org/extras/coffee-script.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/coffeescript" src="main.coffee"></script>
</head>
<body>
</body>
</html>
body = d3.select 'body'
WIDTH = parseInt body.style('width'), 10
HEIGHT = parseInt body.style('height'), 10
REACH = 200
DENSITY = 1 / 500
distance = (p1, p2) -> Math.sqrt Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)
zip = (lists...) ->
result = []
for _, i in lists[0]
item = []
for list in lists
item.push list[i]
result.push item
return result
Point = (pair) -> x: pair[0], y: pair[1]
Line = (p1, p2) -> p1: p1, p2: p2, length: (distance p1, p2)
svg = body.append 'svg'
.style
width: WIDTH
height: HEIGHT
color = d3.scale.linear()
.domain [0, REACH]
.range ['#f00', '#ff0']
opacity = d3.scale.sqrt()
.domain [0, REACH]
.range [1, 0]
numPoints = WIDTH * HEIGHT * DENSITY
xs = (Math.floor(Math.random() * WIDTH) for x in [0..numPoints])
ys = (Math.floor(Math.random() * HEIGHT) for x in [0..numPoints])
points = zip(xs, ys).map Point
update = () ->
mouse = Point d3.mouse @
candidates = points.map (p) -> Line p, mouse
data = candidates.reduce (memo, line) ->
if line.length <= REACH then memo.push(line)
return memo
, []
lines = svg.selectAll 'line'
.data data, (d) -> "#{ d.p1.x },#{ d.p1.y }"
lines.enter().append 'line'
lines.exit().remove()
lines
.attr
x1: (d) -> d.p1.x
y1: (d) -> d.p1.y
x2: (d) -> d.p2.x
y2: (d) -> d.p2.y
.style
'stroke-opacity': (d) -> opacity d.length
'stroke': (d) -> color d.length
.sort (a, b) -> a.length - b.length
svg.on 'mousemove', update
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.