Data join with array of objects.
From D3 in Depth book by Peter Cook.
forked from d3indepth's block: Data join with array of objects
xxxxxxxxxx
<meta charset="utf-8">
<head>
<title>Data join with array of objects</title>
</head>
<style>
circle {
fill: #ddd;
}
</style>
<body>
<svg width="760" height="140">
<g transform="translate(70, 70)">
<circle />
<circle />
<circle />
<circle />
<circle />
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script>
var cities = [
{ name: 'London', population: 8674000},
{ name: 'New York', population: 8406000},
{ name: 'Sydney', population: 4293000},
{ name: 'Paris', population: 2244000},
{ name: 'Beijing', population: 11510000}
];
var s = d3.selectAll('circle');
s.data(cities);
s.attr('r', function(d) {
var scaleFactor = 0.000005;
return d.population * scaleFactor;
})
.attr('cx', function(d, i) {
return i * 120;
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js