block by mpmckenna8 566509dd3d9a08e5f9b2

3 ways to size circles w/ data d3.js

Full Screen

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.

index.html

circlesize.js