Last active
August 29, 2015 14:23
-
-
Save infographicstw/9ae795246892f1ae0416 to your computer and use it in GitHub Desktop.
forcely-voronoit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html><html lang="en"><head prefix="og: http://ogp.me/ns#"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>template</title><!-- libraries--><link rel="icon" type="image/x-icon" href="thumbnail.png"><script type="text/javascript" src="//codeorigin.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script><!-- custom files--><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="index.js"></script></head><body><svg width="100%" height="300px" viewbox="0 0 1200 600" preserveAspectRatio="xMidYMid"></svg></body></html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| doctype html | |
| //- basic libraries: jquery(1.10.2), d3js(3.3.11), angularjs(1.2.3), bootstrap(3.0)/semantic-ui(0.9.3/0.9.5) | |
| - var use = { cdn: true, og: false, favicon: true } | |
| - var lib = { jquery: true, d3js: true, angular: false, bootstrap: false, semantic: false } | |
| - var assets = "assets" | |
| - var thumbnail = "thumbnail.png" | |
| - var favicon = "thumbnail.png" | |
| html(lang="en") | |
| head(prefix="og: http://ogp.me/ns#") | |
| meta(charset="utf-8") | |
| meta(name='viewport', content='width=device-width, initial-scale=1.0') | |
| title template | |
| // libraries | |
| include library.jade | |
| // custom files | |
| link(rel="stylesheet",type="text/css",href="index.css") | |
| script(type="text/javascript",src="index.js") | |
| body | |
| svg(width="100%",height="300px",viewbox="0 0 1200 600",preserveAspectRatio="xMidYMid") |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){var n,r,t,o,a,e,u,i,c,p,d;return n=[800,600],r=n[0],t=n[1],o=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19].map(function(n){var o,a,e,u,i,c;return o=[Math.random()*r,Math.random()*t],a=o[0],e=o[1],u=i=40,c=-100,{x:a,y:e,idx:n,rx:u,ry:i,charge:c}}),a=d3.geom.voronoi().clipExtent([[0,0],[r,t]]).x(function(n){return n.x}).y(function(n){return n.y}),e=function(){var n,r;return n=a(o),r=40,o.map(function(t,o){var a;return a=d3.geom.polygon(function(){var n,t,o=[];for(n=0,t=r;t>n;++n)o.push(n);return o}().map(function(n){return[t.x+t.rx*Math.cos(3.14*(360/r)*n/180),t.y-t.ry*Math.sin(3.14*(360/r)*n/180)]})),t.jump&&(t.px=t.x+100*Math.random(),t.py=t.y+100*Math.random(),t.jump=0),t.polygon=n[o].length?a.clip(d3.geom.polygon(n[o])):[]})},e(),u=d3.select("svg"),i=c=u.selectAll("path.voronoi").data(o).enter().append("path"),i.attr("class","voronoi"),i.on("mouseover",function(n){return n.jump=1}),p=function(){return e(),c.data(o).attr({stroke:"#000","stroke-width":"1",fill:"rgba(0,0,0,0.1)",d:function(n){return n.polygon.length?"M"+n.polygon.join("L")+"Z":void 0}}),d.alpha(.9)},d=d3.layout.force().size([r,t]).nodes(o),d.charge(function(n){return Math.random()<.1?-10:n.charge}),d.on("tick",p).start()}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <- $(document).ready | |
| [w,h] = [800,600] | |
| data = [0 til 20]map (idx)-> | |
| [x,y] = [Math.random!*w, Math.random!*h] | |
| rx = ry = 40 | |
| charge = -100 | |
| {x,y,idx,rx,ry,charge} | |
| voronoi = d3.geom.voronoi!.clipExtent [[0,0], [w,h]] .x(->it.x) .y(->it.y) | |
| recalc = -> | |
| polygons = voronoi(data) | |
| count = 40 | |
| data.map((d,idx) -> | |
| ext = d3.geom.polygon([0 til count].map(->[ | |
| d.x + d.rx * Math.cos(3.14 * (360/count) * it / 180), | |
| d.y - d.ry * Math.sin(3.14 * (360/count) * it / 180) | |
| ])) | |
| if d.jump => | |
| d.px = d.x + Math.random! * 100 | |
| d.py = d.y + Math.random! * 100 | |
| d.jump = 0 | |
| d.polygon = if polygons[idx].length => | |
| ext.clip(d3.geom.polygon(polygons[idx])) | |
| else [] | |
| ) | |
| recalc! | |
| svg = d3.select \svg | |
| path = svg.selectAll \path.voronoi .data data .enter!append \path | |
| ..attr \class, \voronoi | |
| ..on \mouseover -> it.jump = 1 | |
| render = -> | |
| recalc! | |
| path.data(data).attr do | |
| stroke: \#000 | |
| "stroke-width": \1 | |
| fill: "rgba(0,0,0,0.1)" | |
| d: -> if it.polygon.length => "M#{it.polygon.join(\L)}Z" | |
| force.alpha 0.9 | |
| force = d3.layout.force!size [w,h] .nodes data | |
| force.charge -> if Math.random!<0.1 => -10 else it.charge | |
| force.on \tick, render .start! |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import vars | |
| @import basic | |
| html,body | |
| width: 100% | |
| height: 100% | |
| margin: 0 | |
| padding: 0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment