Skip to content

Instantly share code, notes, and snippets.

@lindep

lindep/README.md

Last active February 5, 2016 22:08
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 lindep/ab86192708c9d98f97ae to your computer and use it in GitHub Desktop.
Save lindep/ab86192708c9d98f97ae to your computer and use it in GitHub Desktop.
Download ZIP
svg circle with text
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100%; height: 100%; }
</style>
</head>
<body>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 17};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
var dataset = [{x:190,y:167,val:18}];
var stats = svg.selectAll('circle')
.data(dataset, function(d){return d.x+d.y+d.val} );
stats.enter().append('circle')
.attr("r", function(d) { return d.val; })
.attr('cx',function(d) { return d.x; } )
.attr('cy',function(d) { return d.y; } )
.attr("style", "fill:green;opacity:1;stroke:white;stroke-width:1;cursor:pointer;");
stats.enter().append('svg:text')
.text(function(d){return "val="+d.val})
.attr('x',function(d){return d.x})
.attr('y',function(d){return d.y})
.attr("fill","black")
.attr('stroke',"white")
.attr('stroke-width',0.1)
.attr("transform", function(d){ return "translate(0,"+-(d.val)+")" } )
.attr("font-size",12)
.attr("text-anchor", "middle");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment