Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created August 27, 2014 19:32
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 tmcw/ed852ebbb74d9cee4f1d to your computer and use it in GitHub Desktop.
Save tmcw/ed852ebbb74d9cee4f1d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.circle {
fill: steelblue;
}
</style>
<div class="d3" id="foo"></div>
<div class="d3" id="bar"></div>
<div class="d3" id="baz"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var data = [{name: 'bar', value: 5}, {name: 'foo', value: 10}, {name: 'baz', value: 15}];
var margin = {top: 5, right: 5, bottom: 5, left: 5},
width = 300 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
d3.selectAll('.d3').each(function() {
var id = this.id;
this.__data__ = data.filter(function(_) { return _.name == id; })[0];
});
d3.selectAll('.d3')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('class','group')
.append('circle')
.attr('class','circle')
.attr('cx', 50)
.attr('cy', 50)
.attr('r', function(d) { return d.value; });
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment