There is an other, newer variant with Miso Project's d3.chart.js and with a little bit of more serious explanation. That chart can be found here on bl.ocks.org.
( feedback is welcomed: @CodeXmonk )
We Just Need To Make Use Of What We Have...
I'm not a programmer. I only was a pilot who became a psychologist so now as a psychologist I work for/with pilots and do some research/statistics in the field of flight psychology and around. So I am not a programmer just a Code Monkey.
I know that everyone here deals with data but for instance I don't use graphs so I don't know much about them (as I don't know much about javascript or English neither, excuse me for that). So allow me to go into details a little bit.
In psychology we use a specially standarized value the so-called: T Score. A little trickery is allowed here and in this way the mean of the sample will be 50 and standard deviation: 10. It is good for us because we like more numbers like:43 than -0,67. First one is T score and the second one is Z score of the same value.
The other reason why T score is better sometimes is that we can came to realize straightaway that it (43) is not too far away from the middle (50), in the range [40-60] where 68,27% of sample elements can be found.
An old hungarian humor - I try to translate it...
Imagine that I want to introduce two persons to you. I tell you that one of them is 168,78 cm tall and weighs 61,31 kilos, while the other's height is 168,78 cm and the weight is 61,31 kg. What do you know now? Not too much (except your opinion that CodeXmonk must be as sophisticated person as this stupid example!-) Ok, I give you other information as well. One of them is a man and the other one is a woman - probably they are hungarian persons.
I think now you know more. In this situation, to know means (from statistical point of view) that you are aware of the sample and population statistics (mean, standard deviation, etc.).
So, if you look at them now, what will you see? Their equality? Yes and no. YES, because they are equal to each other in these aspects (height, weight). And NO: because what will be obtrusive in no time is that the man although he seems to be average as a hungarian person, at the same time he is not as tall and is thinner than what could be anticipated if we think of an averige man. It is the same with the woman only the shoe is on the other foot: she is taller and heavier than an averige woman.
Bluish background stands for population statistics - mean: 50, sd: 10, and areas/ranges accordingly, meaning:
These values are hard coded in json/data: ...,"ranges":[30,40,50,60,70],...
Greyish background stands for sample statistics. Mean and standard deviation must be computed. These values can be put (as computed here) in: ...,"measures":[38.93,47.15,63.59,71.81],...
And ...,"markers":[55.37,Tscore]...
Sample values, measures[0-3] and markers[0] are computed results converted to T score based on sample statistics.
"terjedelem" is the hungarian word for the statistical term: range. Much of the excitements can be found somewhere around the middle (50) in the range of 20-80. That is why most of the time we don't need the range of 0-100.
The smaller the "terjedelem", the more precise resolution we get.
I suppose that the english word: "range" could have been used here but range, ranges, rangez would be too much in terms of readability.
Although it is 20-80 now, as a general rule I would use: ...,"terjedelem":[10,90],...
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js