Trivially Simple Beam using D3.js

Trivially Simple Beam

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Simple Beam</title>
  <script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
  <script type="text/javascript" src="https://d3js.org/d3-geo.v2.js"></script>

rect {
      fill: #fff;
    }

#chart {
      background-color: #F7F2C5;
      width: 960px;
      height: 500px;
    }

circle,
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

circle {
      fill: #fff;
      fill-opacity: .2;
      cursor: move;
    }

circle.selected {
      fill: #ff7f0e;
      stroke: #ff7f0e;
    }
  </style>
</head>

<body>
  <div id="chart"></div>
  <script type="text/javascript">
    var chart = document.getElementById("chart"),
      w = chart.clientWidth,
      h = chart.clientHeight,
      radius = 10,
      diameter = radius * 2,
      spacing = 1.0,
      columns = Math.floor(w / diameter / spacing),
      rows = 4,
      links = [];

var nodes = d3.range(columns * rows).map(function(i) {
      return {
        radius: radius,
        x: i * diameter * spacing % w + radius * spacing,
        y: Math.floor(i / columns) * diameter * spacing + 60
      };
    })

// nodes.forEach(function(target) {
    //   var x = target.x - node.x,
    //       y = target.y - node.y;
    //   if (Math.sqrt(x * x + y * y) < 30) {
    //     links.push({source: node, target: target});
    //   }
    // });

for (var i = 0; i < nodes.length; i += columns) {
      nodes[i].fixed = true;
      nodes[i + columns - 1].fixed = true;
    }
    // var nodes = d3.range(200).map(function() { return {radius: 12}; }),

d3.geom.delaunay(nodes).forEach(function(d) {
      links.push(edge(d[0], d[1]));
      links.push(edge(d[1], d[2]));
      links.push(edge(d[2], d[0]));
    });

var path = d3.geo.path();

var svg = d3.select(chart).append("svg:svg")
      .attr("width", w)
      .attr("height", h);

svg.append("svg:rect")
      .attr("width", w)
      .attr("height", h);

// var link = svg.selectAll("line")
    //       .data(links)
    //     .enter().append("svg:line")
    //       .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; });

force.on("tick", function(e) {
      var q = d3.geom.quadtree(nodes),
        i = 0,
        n = nodes.length;

while (++i < n) {
        q.visit(collide(nodes[i]));
      }

// 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; });

node.attr("cx", function(d) {
          return d.x;
        })
        .attr("cy", function(d) {
          return d.y;
        });

// svg.selectAll("circle")
      //     .attr("cx", function(d) { return d.x; })
      //     .attr("cy", function(d) { return d.y; });
    });

function edge(a, b) {
      var dx = a.x - b.x,
        dy = a.y - b.y;
      return {
        source: a,
        target: b,
        distance: Math.sqrt(dx * dx + dy * dy)
      };
    }
  </script>

</body>

</html>

https://d3js.org/d3.v2.js

https://d3js.org/d3-geo.v2.js