block by emeeks d5c745f00ac1f433dee7

Ch. 2, Fig. 11 - D3.js in Action

Full Screen

This is the code for Chapter 2, Figure 11 from D3.js in Action that loads data from a CSV and binds that data to create elements.

index.html

<html>
<head>
  <title>D3 in Action Chapter 2 - Example 1</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
</style>
<body>

<div>
</div>
</body>
  <footer>
    
<script>
d3.csv("cities.csv",function(error,data) {dataViz(data)});
function dataViz(incomingData) {
d3.select("body").selectAll("div.cities")
.data(incomingData)
.enter()
.append("div")
.attr("class","cities")
.html(function(d,i) {return d.label})
	}


</script>
  </footer>

</html>

cities.csv

"label","population","country","x","y"
"San Francisco", 750000,"USA",37,-122
"Fresno", 500000,"USA",36,-119
"Lahore",12500000,"Pakistan",31,74
"Karachi",13000000,"Pakistan",24,67
"Rome",2500000,"Italy",41,12
"Naples",1000000,"Italy",40,14
"Rio",12300000,"Brazil",-22,-43
"Sao Paolo",12300000,"Brazil",-23,-46