Skip to content

Instantly share code, notes, and snippets.

@emeeks
Last active March 18, 2016 15:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emeeks/d5c745f00ac1f433dee7 to your computer and use it in GitHub Desktop.
Save emeeks/d5c745f00ac1f433dee7 to your computer and use it in GitHub Desktop.
Ch. 2, Fig. 11 - D3.js in Action

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.

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
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment