block by emeeks b3227fc1eab2255e9e67

Ch. 3, Fig. 18 - D3.js in Action

Full Screen

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.

index.html

<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>

worldcup.csv

"team","region","win","loss","draw","points","gf","ga","cs","yc","rc"
"Netherlands","UEFA",6,0,1,18,12,6,2,23,1
"Spain","UEFA",6,0,1,18,8,2,5,8,0
"Germany","UEFA",5,0,2,15,16,5,3,10,1
"Argentina","CONMEBOL",4,0,1,12,10,6,2,8,0
"Uruguay","CONMEBOL",3,2,2,11,11,8,3,13,2
"Brazil","CONMEBOL",3,1,1,10,9,4,2,9,2
"Ghana","CAF",2,2,1,8,5,4,1,12,0
"Japan","AFC",2,1,1,7,4,2,2,4,0