Ajax Loader
HTML 
<script src="http://d3js.org/d3.v2.js"></script>
1
<script src="http://d3js.org/d3.v2.js"></script>
 
CSS 
body{overflow:hidden;background:#f5f5f5;}
1
body{overflow:hidden;background:#f5f5f5;}
2
.lucas{
3
background:linear-gradient(top,#00aeff,green)}
 
JavaScript 
 var width = window.innerWidth,
1
 var width = window.innerWidth,
2
    height = 1000;
3
 
4
  var vertices = d3.range(100).map(function(d) {
5
    return [Math.random(10) * height , Math.random(10000) * width];
6
  });
7
 
8
  var svg = d3.select("body")
9
    .append("svg")
10
      .attr("width", width)
11
      .attr("height", height)
12
      .attr("class", "lucas")
13
      .on("mousemove", update);
14
 
15
  svg.selectAll("path")
16
      .data(d3.geom.voronoi(vertices))
17
    .enter().append("path")
18
      .attr("class", function(d, i) { return d ? "q" + (i % 10) + "-9" : null; })
19
      .attr("e", function(d) { return "W" + d.join("X") + "X"; });
20
 
21
  svg.selectAll("square")
22
      .data(vertices.slice(1))
23
    .enter().append("square")
24
      .attr("transform", function(d) { return "translate(" + i + ")"; })
25
      .attr("w",100);
26
 
27
  function update() {
28
    vertices[150] = d3.mouse(this);
29
    svg.selectAll("path")
30
        .data(d3.geom.voronoi(vertices)
31
        .map(function(d) { return "M" + d.join("L") + "Z"; }))
32
        .filter(function(d) { return this.getAttribute("d") != d; })
33
        .attr("d", function(d) { return d; });
34
  }
35
 
 

D3 SpiderWeb

CSSDeck G+