title: Writing simple force layout app using D3.js
body: <p>I am starting to learn D3.js and wanted to write a simple app using force layout. The goal is to create 3 nodes which are floating around and can be dragged using the mouse. This is how far I have gotten using the documentation, however all I see is a small black circle in top-left corner of my window (I assume all three are overlapping over there). I have put comments on each step - at least that's what I think they are doing.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Simple Force Layout&lt;/title&gt;
      &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="canvas"&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
  
  var conf = {
      canvasWidth: 600,
      canvasHeight: 400
  }
  
  var nodes = [
      { 'name': 'Node 1' },
      { 'name': 'Node 2' },
      { 'name': 'Node 3' }
  ];
  
  // Add nodes to force layout and start it
  var force = d3.layout.force()
      .nodes(nodes)
      .size([conf.canvasWidth, conf.canvasHeight])
      .start();
  
  // Create an svg element
  var svg = d3.select("#canvas")
      .append("svg:svg")
      .attr("width", conf.canvasWidth)
      .attr("height", conf.canvasHeight);    
  
  // Create a circle for each node
  var circle = svg.append("svg:g").selectAll("circle")
      .data(force.nodes())
    .enter().append("svg:circle")
      .attr("r", 6)
      .call(force.drag);
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My questions:</p>
  
  <ol>
  <li>What am I missing? What else do I need to do for the nodes to float around and be draggable?</li>
  <li>I would like to have a mix or circular and rectangular nodes (based on some attribute of the node). How do I do this?</li>
  <li><p>When I run the application, I see the following errors in Firebug: </p>
  
  <p>"NetworkError: 404 Not Found - <a href="http://mbostock.github.com/d3/d3.geom.js?1.29.1" rel="nofollow">http://mbostock.github.com/d3/d3.geom.js?1.29.1</a>"
  d3.geom.js?1.29.1</p>
  
  <p>"NetworkError: 404 Not Found - <a href="http://mbostock.github.com/d3/d3.layout.js?1.29.1" rel="nofollow">http://mbostock.github.com/d3/d3.layout.js?1.29.1</a>"</p></li>
  </ol>
  
  <p>Why is this? Some force layout examples I tried are also giving this error, but they seem to be working fine!</p>