Skip to content

Instantly share code, notes, and snippets.

/jsbin.ruwufiwe.css

Created June 7, 2014 13:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/9f33bf628b55bef88522 to your computer and use it in GitHub Desktop.
Save anonymous/9f33bf628b55bef88522 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.ruwufiwe.css
#test{
outline: 1px solid red;
}
Raw
jsbin.ruwufiwe.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg id="test">
</body>
</html>
Raw
jsbin.ruwufiwe.js
var _data = [
{value:10},
{value:50},
{value:100},
{value:20},
{value:30}
];
var parent = d3.select('#test');
parent
.attr({
width: 400,
height: 400
});
parent
.append('circle')
.attr({
cx: 200,
cy: 200,
r: 150,
stroke:'steelblue',
'stroke-width':2,
fill:'none'
});
var maxValue = d3.max(_data,function(d){
return +d.value;
});
var minValue = d3.min(_data,function(d){
return +d.value;
});
var sizeScale = d3
.scale
.linear()
.domain([minValue,maxValue]).range([10,40]);
var circularScale = d3.scale.linear().domain([0,_data.length]).range([0,2*Math.PI]);
parent
.append('g')
.attr('class','data')
.selectAll('circle')
.data(_data)
.enter()
.append('circle')
.attr({
cx: function(d,i){
return 200+ 150 * Math.cos(circularScale(i));
},
cy: function(d,i){
return 200+ 150 * Math.sin(circularScale(i));
},
r: function(d,i){
return sizeScale(d.value);
},
stroke:'none',
fill:'steelblue'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment