I have to do some visualizations about vaccines. I downloaded data on reported cases of vaccine-preventable diseases (for example, measles, tetanus, etc.) here. These data are absolute values. I downloaded the population from here for each country and multiplied the value by 1000
in order to have the real population value.
Then, to calculate the rate of cases I used the formula:
(number of reported cases/population)*100 --> data domain [0, 100]%
Since it was a very small value, I multiplied this result by 1000
:
((number of reported cases/population)*100)*1000 --> data domain [0, 1000]%, right?
Now I have to represent this data using the bubble on a map (for example a chart like that) and I thought of something like that. The scale I use is a sqrt scale, the data domain is [0, 1000]
while the range of the circle radius is [0, 1700]
(my choice). The circle is actually constructed with a radius that is related to the data. If valCas
is the rate of death caused by measles in France in 2015, the radius is calculated in this way (I'm using D3.js):
var circleScale = d3.scaleSqrt()
.domain([0, 1000]) // domain of cas data
.range([0, 1700]); // range of circle radius
function fromValueToRadius(valCas) {
var area = circleScale(valCas);
return Math.sqrt(area / Math.PI);
}
The legend, however, how do I build it? I don't mean I want code but I need help in theory. Aesthetically it should be like this:
To do this I should use a code like this:
var legendSize1 = ?;
var legendSize2 = ?;
var legendSize3 = ?;
svg.append('circle')
.attr('r', fromValueToRadius(legendSize1))
.attr('cx', 0)
.attr('cy', (0 - fromValueToRadius(legendSize1)));
svg.append('circle')
.attr('r', fromValueToRadius(legendSize2))
.attr('cx', 0)
.attr('cy', (0 - fromValueToRadius(legendSize2)));
svg.append('circle')
.attr('r', fromValueToRadius(legendSize3))
.attr('cx', 0)
.attr('cy', (0 - fromValueToRadius(legendSize3)));
But what is the value of legendSize1
, legendSize2
and legendSize3
? I know it's a simple problem but I don't understand what to do, if what I've done is correct and makes sense or not. Is it better for me not to change the population value (do not multiply it by 1000)? Is it better that I don't multiply the rate by 1000?
EDIT
This is what I understand:
I download data on the population and I don't multiply them
ie:
Germany, 2012, population = 81066,228
I download data on reported cases and I don't multiply them
ie:
Germany, 2012, measles = 166
I compute prevalence as:
ie:
prevalence = (166/81066,228)*1000 = 0.002047
To create
circleScale
, I need to kwon data domain. What is it?var circleScale = d3.scaleSqrt() .domain([0, ?]) // domain of cas data .range([0, 1650]); // range of circle radius
This function is correct so I don't modify it:
function fromValueToRadius(valCas) { var area = circleScale(valCas); return Math.sqrt(area / Math.PI); }
Code for legend will become:
// for bubble size var legendSize1 = 10/100000; var legendSize2 = 50/100000; var legendSize3 = 100/100000; svg.append('circle') .attr('r', fromValueToRadius(legendSize1)) .attr('cx', 0) .attr('cy', (0 - fromValueToRadius(legendSize1))); svg.append('circle') .attr('r', fromValueToRadius(legendSize2)) .attr('cx', 0) .attr('cy', (0 - fromValueToRadius(legendSize2))); svg.append('circle') .attr('r', fromValueToRadius(legendSize3)) .attr('cx', 0) .attr('cy', (0 - fromValueToRadius(legendSize3)));
So: