Skip to content

Instantly share code, notes, and snippets.

@ne8il

ne8il/README.md

Created March 11, 2013 23:34
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 ne8il/5138924 to your computer and use it in GitHub Desktop.
Save ne8il/5138924 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Example 2 : Data Binding
Raw
README.md

Binding JS Objects to dom elements

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 960px;
height: 500px;
position: relative;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var names = [{'name' : 'Frank', 'color' : 'blue'},
{'name' : 'Tom', 'color' : 'red'},
{'name' : 'Peter', 'color' : 'green'},
{'name' : 'Mary', 'color' : 'purple'}];
var ul = d3.select('ul');
var selection = ul.selectAll('li')
.data(names);
selection.enter()
.append('li')
.html(function(d, i){
return i + '. ' + d['name'];
})
.style('color', function(d){
return d['color']
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment