In [1]:

    

%%javascript
require.config({
  paths: {
      d3: '//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min',
  }
});


    

In [2]:

    

%%javascript

require(
['d3'],

function(d3) {
    
}
);


    

In [3]:

    

%%svg
<svg width="720" height="120">
  <circle id="circle0" cx="40" cy="60" r="10"></circle>
  <circle id="circle0" cx="80" cy="60" r="10"></circle>
  <circle id="circle0" cx="120" cy="60" r="10"></circle>
</svg>


    

In [7]:

    

%%javascript

require(['d3'], function(d3) {
    var circle = d3.selectAll("#circle1");
    circle.style("fill", "red");
    circle.attr("r", 10);
});


    

In [6]:

    

%%svg
<svg width="720" height="120">
  <circle id="circle1" cx="40" cy="60" r="10"></circle>
  <circle id="circle1" cx="80" cy="60" r="10"></circle>
  <circle id="circle1" cx="120" cy="60" r="10"></circle>
</svg>


    

In [9]:

    

%%javascript

require(['d3'], function(d3) {
    var circle = d3.selectAll("#circle2");
    circle.style("fill", "red");
    circle.attr("r", 30);
    
});


    

In [8]:

    

%%svg
<svg width="720" height="120">
  <circle id="circle2" cx="40" cy="60" r="10" style="fill:blue;"></circle>
  <circle id="circle2" cx="80" cy="60" r="10" style="fill:blue;"></circle>
  <circle id="circle2" cx="120" cy="60" r="10" style="fill:blue;"></circle>
</svg>


    

In [11]:

    

%%javascript

require(
['d3'],
    
function(d3) {
    var circle = d3.selectAll("#circle3");
    
    circle.attr(
        "cx",
        function() {
            return Math.random() * 720;
        }
    );
}

);


    

In [10]:

    

%%svg
<svg width="720" height="120">
  <circle id="circle3" cx="40" cy="60" r="30" style="fill:red;"></circle>
  <circle id="circle3" cx="80" cy="60" r="30" style="fill:red;"></circle>
  <circle id="circle3" cx="120" cy="60" r="30" style="fill:red;"></circle>
</svg>


    

In [12]:

    

%%svg
<svg width="720" height="120">
  <circle id="circle4before" cx="40" cy="60" r="10" style="fill:red;"></circle>
  <circle id="circle4before" cx="240" cy="60" r="10" style="fill:green;"></circle>
  <circle id="circle4before" cx="500" cy="60" r="10" style="fill:blue;"></circle>
</svg>


    

In [15]:

    

%%javascript

require(
['d3'],

function(d3) {
    var circle = d3.selectAll("#circle4after")
    
    circle.data([50, 150, 600]);
    
    circle.attr(
        "r",
        function(dataitem) {
            return Math.sqrt(dataitem);
        }
    );
}

);


    

In [14]:

    

%%svg
<svg width="720" height="120">
  <circle id="circle4after" cx="40" cy="60" r="10" style="fill:red;"></circle>
  <circle id="circle4after" cx="240" cy="60" r="10" style="fill:green;"></circle>
  <circle id="circle4after" cx="500" cy="60" r="10" style="fill:blue;"></circle>
</svg>


    

In [16]:

    

%%svg
<svg width="720" height="120">
  <rect id="rect0" x="1" y="0"  width="100" height="100" style="fill:red;"></rect>
  <rect id="rect0" x="5" y="0" width="100" height="100" style="fill:green;"></rect>
  <rect id="rect0" x="9" y="0" width="100" height="100" style="fill:blue;"></rect>
</svg>


    

In [18]:

    

%%javascript

require(
['d3'],

function(d3) {
    var rect = d3.selectAll("#rect1")
    
    rect.data([0, 40, 100]);
    
    rect.attr(
        "x",
        function(dataitem, index) {
            return index * 100 + dataitem;
        }
    );
}

);


    

In [17]:

    

%%svg
<svg width="720" height="120">
  <rect id="rect1" x="1" y="0"  width="100" height="100" style="fill:red;"></rect>
  <rect id="rect1" x="5" y="0" width="100" height="100" style="fill:green;"></rect>
  <rect id="rect1" x="9" y="0" width="100" height="100" style="fill:blue;"></rect>
</svg>


    

In [19]:

    

%%svg
<svg width="500" height="100">
<g stroke="green">
<line x1="10" y1="30" x2="10" y2="100" stroke-width="1"></line>
<line x1="20" y1="30" x2="20" y2="100" stroke-width="1"></line>
</g>
</svg>


    

In [20]:

    

%%svg
<svg width="720" height="120">
  <circle cx="40" cy="60" r="10"></circle>
  <circle cx="80" cy="60" r="10"></circle>
  <circle cx="120" cy="60" r="10"></circle>
</svg>


    

In [21]:

    

%%javascript

require(
['d3'],

function(d3) {
    var svg = d3.select("svg");
    
    var circle = svg.selectAll("circle");
    
    circle.data([5, 10, 15, 20]);
    
    circle.attr("r", function(d) { return d; });
    
    console.log(circle);
    
    var circleEnter = circle.enter().append("circle");
    
    circleEnter.attr('r', function(d) {return 100;})
}

);