Circles by nitaku

index.js

(function() {

  window.main = function() {
    /* obtain a reference to the SVG
    */
    var vis;
    vis = d3.select('svg');
    /* when the user clicks the SVG
    */
    return vis.on('click', function() {
      /* retrieve mouse coordinates
      */
      var p;
      p = d3.mouse(this);
      /* create a new circle at point p
      */
      return vis.append('circle').attr('class', 'node').attr('r', 20).attr('cx', p[0]).attr('cy', p[1]);
    });
  };

}).call(this);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Graph editor</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//d3js.org/d3.v3.min.js"></script>
        <script src="index.js"></script>
    </head>
    <body onload="main()">
        <svg width="960" height="500">
        </svg>
    </body>
</html>

index.coffee

window.main = () ->
    ### obtain a reference to the SVG ###
    vis = d3.select('svg')
    
    ### when the user clicks the SVG ###
    vis.on 'click', () ->
        ### retrieve mouse coordinates ###
        p = d3.mouse(this)
        
        ### create a new circle at point p ###
        vis.append('circle')
            .attr('class', 'node')
            .attr('r', 20)
            .attr('cx', p[0])
            .attr('cy', p[1])

index.css

.node {
  stroke-width: 4px;
  stroke: gray;
  fill: #dddddd;
}

index.sass

.node
    stroke-width: 4px
    stroke: gray
    fill: #DDD