GUI/GUI.js at master · Louisgcr/GUI · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
var w = window.innerWidth > 960 ? 960 : (window.innerWidth || 960),
    h = window.innerHeight > 500 ? 500 : (window.innerHeight || 500),
    radius = 5.25,
    links = [],
    simulate = true,
    zoomToAdd = true,
    // https://github.com/mbostock/d3/blob/master/lib/colorbrewer/colorbrewer.js#L105
    color = d3.scaleQuantize().domain([10000, 7250]).range(["#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"])

var numVertices = (w*h) / 3000;
var vertices = d3.range(numVertices).map(function(i) {
    angle = radius * (i+10);
    return {x: angle*Math.cos(angle)+(w/2), y: angle*Math.sin(angle)+(h/2)};
});
var d3_geom_voronoi = d3.voronoi().x(function(d) { return d.x; }).y(function(d) { return d.y; })
var prevEventScale = 1;
var zoom = d3.zoom().on("zoom", function(d,i) {
    if (zoomToAdd){
      if (d3.event.scale > prevEventScale) {
          angle = radius * vertices.length;
          vertices.push({x: angle*Math.cos(angle)+(w/2), y: angle*Math.sin(angle)+(h/2)})
      } else if (vertices.length > 2 && d3.event.scale != prevEventScale) {
          vertices.pop();
      }
      force.nodes(vertices).start()
    } else {
      if (d3.event.scale > prevEventScale) {
        radius+= .01
      } else {
        radius -= .01
      }
      vertices.forEach(function(d, i) {
        angle = radius * (i+10);
        vertices[i] = {x: angle*Math.cos(angle)+(w/2), y: angle*Math.sin(angle)+(h/2)};
      });
      force.nodes(vertices).start()
    }
    prevEventScale = d3.event.scale;
});
d3.select(window)
  .on("keydown", function() {
    // shift
    if(d3.event.keyCode == 16) {
      zoomToAdd = false
    }
    // s
    if(d3.event.keyCode == 83) {
      simulate = !simulate
      if(simulate) {
        force.start()
      } else {
        force.stop()
      }
    }
  })
  .on("keyup", function() {
    zoomToAdd = true
  })
var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .call(zoom)
//var force = d3.forces.force()
var force = d3.layout.force()
       .charge(-300)
        .size([w, h])
        .on("tick", update);
force.nodes(vertices).start();
var circle = svg.selectAll("circle");
var path = svg.selectAll("path");
var link = svg.selectAll("line");
function update(e) {
    path = path.data(d3_geom_voronoi(vertices))
    path.enter().append("path")
        // drag node by dragging cell
        .call(d3.behavior.drag()
          .on("drag", function(d, i) {
              vertices[i] = {x: vertices[i].x + d3.event.dx, y: vertices[i].y + d3.event.dy}
          })
        )
        .style("fill", function(d, i) { return color(0) })
    path.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
        .transition().duration(150).style("fill", function(d, i) { return color(d3.geom.polygon(d).area()) })
    path.exit().remove();
    circle = circle.data(vertices)
    circle.enter().append("circle")
          .attr("r", 0)
          .transition().duration(1000).attr("r", 5);
    circle.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
    circle.exit().transition().attr("r", 0).remove();
    link = link.data(d3_geom_voronoi.links(vertices))
    link.enter().append("line")
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; })
    link.exit().remove()
    if(!simulate) force.stop()
}