This is the code for Chapter 1, Figure 25 from D3.js in Action showing simple data binding using an array of filler data (literally an array of four instances of the word “filler”). This highlights three key aspects of data binding:
<html>
<head>
<title>D3 in Action Chapter 1 - Example 2</title>
<meta charset="utf-8" />
<script src="//d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
</head>
<style>
#vizcontainer {
width: 200px;
height: 100px;
border: 1px gray solid;
}
</style>
<body>
<div id="vizcontainer">
</div>
</body>
<footer>
<script>
var someData = ["filler", "filler", "filler", "filler"];
d3.select("body")
.selectAll("div")
.data(someData)
.enter()
.append("div")
.html("Wow")
.append("span")
.html("Even More Wow")
.style("font-weight", "900");
</script>
</footer>
</html>