-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexpo2015.html
15 lines (15 loc) · 3.81 KB
/
expo2015.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Expo 2015</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body,html{width:100%;height:100%;margin:0}#content{width:100%;height:100%;position:relative;overflow:hidden}#content svg{position:absolute;top:-100%;bottom:-100%;left:-100%;right:-100%;margin:auto}
</style>
</head>
<body>
<div id='content'></div>
<script>
function tick(){quadtree=d3.geom.quadtree(data);for(var a=0;a<data.length;a++)quadtree.visit(collide(data[a]))}function reView(){circles.attr("cx",function(a){return a.x}).attr("cy",function(a){return a.y})}function collide(a){var b=a.rad,c=a.x-b,d=a.x+b,e=a.y-b,f=a.y+b;return function(b,g,h,i,j){if(b.point&&b.point!==a){var k=a.x-b.point.x,l=a.y-b.point.y,m=Math.sqrt(k*k+l*l),n=a.rad+b.point.rad;n>m&&(m=.5*((m-n)/m),a.x-=k*=m,a.y-=l*=m,b.point.x+=k,b.point.y+=l)}return g>d||c>i||h>f||e>j}}var width=960,height=500,data=[{r:10,c:"#C10A26"},{r:200,c:"#FBB900"},{r:40,c:"#95C11E"},{r:70,c:"#0070BA"},{r:50,c:"#EF7F13"}],radiusScale=.5,logoPath='<path d="M0,1.229h28.614V12.57H12.907v7.852h15.229v11.336H12.907v8.676h15.707v11.334H0V1.229z"/><path d="M49.931,24.859L34.29,1.229h14.617l8.67,14.412l8.399-14.412h14.549L65.091,25.133l17.485,26.635H67.96L57.032,33.873 L46.651,51.768H32.243L49.931,24.859z"/><path d="M104.44,1.229c9.354,0,12.836,1.436,15.571,3.691c3.961,3.275,5.94,8.262,5.94,13.387c0,5.119-2.115,10.514-5.328,13.246 c-3.484,2.939-6.898,4.369-14.75,4.369h-5.053v15.846H87.913V1.229H104.44z M100.821,24.584h4.712c1.228,0,3.276,0,4.986-0.75 c1.705-0.75,3.071-2.32,3.071-5.322c0-3.006-1.434-4.443-3.209-5.193c-1.775-0.748-3.894-0.748-5.329-0.748h-4.231V24.584z"/><path d="M129.17,27.047c0-16.525,12.704-26.771,26.637-26.771c15.567,0,26.702,12.156,26.702,26.225c0,14.064-11.064,26.225-26.772,26.225c-15.909,0-26.566-12.635-26.566-25.609V27.047z M142.077,26.43c0,7.719,5.262,14.959,13.934,14.959c9.148,0,13.59-8.332,13.59-14.822c0-6.557-4.441-14.955-13.729-14.955 c-8.943,0-13.795,7.652-13.795,14.752V26.43z"/><path d="M197.048,29.885c3.496-3.373,6.951-6.783,10.406-10.154c2.9-2.73,5.974-5.375,6.145-9.256c0-4.137-2.816-6.742-6.486-6.742c-3.669,0-6.313,2.859-6.439,7.68h-3.37c0.085-3.07,0.938-5.672,2.73-7.594c2.089-2.514,5.204-3.197,7.421-3.197c5.845,0,9.725,4.266,9.641,9.684c-0.129,3.41-1.704,5.801-4.816,9.043c-3.459,3.455-6.912,6.912-10.412,10.365h15.313v3.027h-20.131V29.885z"/><path d="M220.928,17.043c0-9.727,7.552-16.422,16.465-16.422c9.257,0,16.468,7.082,16.468,16.336c0,9.258-7.168,16.34-16.468,16.34c-9.341,0-16.465-7.209-16.465-16.209V17.043z M224.468,16.957c0,7.424,5.588,13.225,12.967,13.225c7.469,0,12.926-6.014,12.926-13.225c0-7.209-5.457-13.225-12.968-13.225c-7.423,0-12.925,5.889-12.925,13.182V16.957z"/><path d="M263.362,4.205h-6.355V1.176h9.898V32.74h-3.543V4.205z"/><path d="M297.823,1.176v3.029h-12.498l-1.791,9.381c1.108-0.768,2.814-1.957,5.972-1.957c6.526,0,10.494,5.459,10.494,10.66 c0,5.717-4.563,11.049-11.092,11.049c-4.989,0-10.237-3.367-11.005-9.598h3.539c0.641,4.096,4.137,6.441,7.424,6.441 c4.053,0,7.594-3.494,7.594-7.764c0-4.352-3.456-7.848-7.637-7.848c-1.408,0-4.01,0.381-6.186,3.369l-2.899-0.723l2.856-16.041 H297.823z"/>',force=d3.layout.force().size([width/4,height]).nodes(data).gravity(.1).charge(0).start(),content=d3.select("#content").append("svg").attr("height",height).attr("width",width),logo=content.append("g").attr("class","logo").attr("transform","translate("+width/4+",0)");content.append("g").attr("class","logotype").attr("transform","translate("+width/2+","+height/2+")").html(logoPath);var circles=logo.selectAll("circle.dot").data(data);circles.enter().append("circle").attr("class","dot").attr("r",function(a){return a.rad=a.r*radiusScale}).style("fill",function(a){return a.c}).call(force.drag);for(var i=100;i>0;--i)force.tick(),tick();reView(),force.on("tick",function(){tick(),reView()});
</script>
</body>