Inserting image into circles

This is the code for Chapter 3, Figure 18 from D3.js in Action showing how to load external images (in this case PNGs) and append them as SVG image elements to g elements.

forked from emeeks's block: Ch. 3, Fig. 18 - D3.js in Action

<html>
<head>
  <title>D3 in Action Chapter 3 - Example 7</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
  
  text {
font-size: 10px;
}

g > text.active {
font-size: 30px;
}

circle {
fill: pink;
stroke: black;
stroke-width: 1px;
}

circle.active {
fill: red;
}

circle.inactive {
fill: gray;
}

.highlight {
  font-size: 24px;
}

</style>
<body>
<div id="viz">
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>
  d3.csv("worldcup.csv", function(data) {
    overallTeamViz(data);
  })
  
function overallTeamViz(incomingData) {
d3.select("svg")
.append("g")
.attr("id", "teamsG")
.attr("transform", "translate(50,300)")
.selectAll("g")
.data(incomingData)
.enter()
.append("g")
.attr("class", "overallG")
.attr("transform", function (d,i) {return "translate(" + (i * 50) + ", 0)"});
    
var teamG = d3.selectAll("g.overallG");
    
teamG
.append("circle")
.attr("r", 20);

teamG
.append("text")
.style("text-anchor", "middle")
.attr("y", 30)
.text(function(d) {return d.team});

d3.selectAll("g.overallG").insert("image", "text")
.attr("xlink:href", function(d) {
return "" + d.team + ".png"
})
.attr("width", "45px").attr("height", "20px").attr("x", "-22")
.attr("y", "-10")

}

</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js