D3 Examples - Data join example

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Data join example</title>
</head>
​
<style>
circle {
  fill: #ddd;
}
</style>
​
<body>
  <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 src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script>
var scores = [ 
  {
    "name": "Andy",
    "score": 25
  },
  {
    "name": "Beth",
    "score": 39
  },
  {
    "name": "Craig",
    "score": 42
  },
  {
    "name": "Diane",
    "score": 35
  },
  {
    "name": "Evelyn",
    "score": 48
  }
];
​
d3.selectAll('circle')
  .data(scores)
    .attr('r', function(d,i) { 
        return d.score;
    });
​
  </script>
</body>
</html>
    