Skip to content

Instantly share code, notes, and snippets.

@mpmckenna8

mpmckenna8/circlesize.js

Last active August 29, 2015 14:02
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 mpmckenna8/566509dd3d9a08e5f9b2 to your computer and use it in GitHub Desktop.
Save mpmckenna8/566509dd3d9a08e5f9b2 to your computer and use it in GitHub Desktop.
Download ZIP
3 ways to size circles w/ data d3.js
Raw
readme.md

These are three examples of how to make circles from a dataset using values included in that dataset to influence the radius of each circle. Each way you get a change in size with a change in data but because we're setting the radius value it's a little tricky to get the areas to change proportionally.

The text above each circle shows a Area calculation rounded to the nearest whole number. The way to change stuff which I liked the most has a green background and is the code associated with the var twos. The areas for these circles change proportionally with the data and show just how different the results are than when you just change the radius in proportion to the data.

The last one is probably the most useful but poorly implemented way to change the circles. This way I created a linear scale of acceptable radius values then have them assigned depending on where in the range of the data the value are. This is a great way to make sure your circles don't get too big or too small yet if you do set a minimum size (like I did) you should be careful because values of zero will show up as the min value. The first circle which isn't in the other svgs shows how this happens.

Raw
circlesize.js
var h = 100
var w = 295
var xspa = 30
var svg = d3.select('body').append('svg').attr('width', w).attr('height', h).attr('class','radSol');
// look at chp 7 of vizualizing data
var circs = [0,1,2,3,4,14,28]
var rscale = d3.scale.linear()
svg.selectAll('.circles').data(circs)
.enter()
.append('circle')
.attr('r', function(d){
return d
})
.attr('class','circles')
.attr('cy', h/2)
.attr('cx',function(d,i){
// console.log(i)
return 20+ 40 *i
})
svg.selectAll('text')
.data(circs).enter().append('text')
.text(function(d){
console.log(this)
return Math.round((Math.pow(d,2))*Math.PI)
})
.attr('font-size', 10)
.attr('fill', 'pink')
.attr('x', function(d,i){
return 20 +40*i
})
.attr('y', h/5)
.attr('text-anchor', 'middle')
d3.select('body').append('html:br')
// Also not really useful example I guess but I think I mae it so the areas are proportional to d. Need to check the results. http://chimera.labs.oreilly.com/books/1230000000345/ch06.html#_size
var twos = d3.select('body').append('svg').attr('width', w).attr('height', h).attr('class','radArea');
twos.selectAll('.circles').data(circs)
.enter()
.append('circle')
.attr('r', function(d){
// Multiplying the value by 4 is mucking up the result area maybe but the results might be proportional to data w/out it
return (Math.sqrt(d *4/Math.PI));
})
.attr('class','circles')
.attr('cy', h/2)
.attr('cx',function(d,i){
console.log(i)
return 20+40 *i
})
twos.selectAll('text')
.data(circs).enter().append('text')
.text(function(d){
console.log(this);
var circRad = (Math.sqrt(d *4/Math.PI));
return Math.round((circRad * circRad)*Math.PI)
})
.attr('font-size', 10)
.attr('fill', 'pink')
.attr('x', function(d,i){
return 20 +40*i
})
.attr('y', h/4)
.attr('text-anchor', 'middle')
d3.select('body').append('html:br')
// this part is drawn from http://chimera.labs.oreilly.com/books/1230000000345/ch07.html#_refining_the_plot
var threes = d3.select('body').append('svg').attr('width', w).attr('height', h).attr('class','radLin');
var rscale = d3.scale.linear()
.domain([0,d3.max(circs)])
.range([3,20])
threes.selectAll('.circles').data(circs)
.enter()
.append('circle')
.attr('r', function(d){
return rscale(d);
})
.attr('class','circles')
.attr('cy', h/2)
.attr('cx',function(d,i){
// console.log(i)
return 20+40 *i
})
threes.selectAll('text')
.data(circs).enter().append('text')
.text(function(d){
console.log(this);
var circRad = rscale(d);
return Math.round((circRad * circRad)*Math.PI)
})
.attr('font-size', 10)
.attr('fill', 'brown')
.attr('x', function(d,i){
return 20 +40*i
})
.attr('y', h/4)
.attr('text-anchor', 'middle')
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.radSol{
background:red;
}
.radArea{
background:green;
}
.radLin{
background:yellow
}
.circles{
color:pink;
font-size:29
}
</style>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="circlesize.js"> </script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment