emeeks/cities.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

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

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
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>