Selections lesson

Built with blockbuilder.org
Lesson in selections and some basic functions, from D3 in Depth by Peter Cook

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body{
      font-family:"Arial", Arial, sans-serif;
      font-size:16px;
      margin:10px;
    }
  </style>
</head>

<body>
  
  <div class="title"></div>
  
  <svg width="760" height="140">
      <g transform="translate(70, 70)">
        <circle r="40" />
        <circle r="40" cx="120" />
        <circle r="40" cx="240" />
        <circle r="40" cx="360" />
        <circle r="40" cx="480" />
      </g>
    </svg>
  
  <script>
    
    // Select div class title, append text
    d3.select('.title')
			.text('D3 in Depth selection example');
    
    // Fill circles in orange, random generate size
    d3.selectAll('circle')
      .style('fill', 'orange')
    	.attr('r', function() {
        return 10 + Math.random() * 40;
      });
    
    // Change colour of fourth circle
    d3.select('circle:nth-child(4)')
    	.style('fill', 'turquoise');
    
    // Turn circles pink on mouseover
    d3.selectAll('circle')
    	.on('mouseover', function(d, i) {
      d3.select(this)
      	.style('fill', 'magenta');
    });
    
    // Turn them back on mouseout
    d3.selectAll('circle')
    	.on('mouseout', function(d, i) {
      d3.select(this)
      	.style('fill', 'orange');
    });
    d3.select('circle:nth-child(4)')
    	.on('mouseout', function(d, i) {
      d3.select(this)
      	.style('fill', 'turquoise');
    });

</script>
</body>

https://d3js.org/d3.v4.min.js