Menu
The OK Cupid site have an infographic article called 10 Charts about Sex.
I really like the way Chart #7 is incorporates a Bubble Chart & a slider.
I would like to do the same thing with my own Javascript visualisations ideally using a jQuery library.
Unfortunately the OK Cupid appear to have animated a series of PNG images of Bubble Charts.
I would appreciate some guidance on whether there is an existing charting library that can incorporate the slider. Alternatively is it possible to present several Bubble Charts using a slider and still get good performance.
526
HighChartJS + JqueryUISlider are the best solutions.
The bubble chart is here : http://www.highcharts.com/demo/bubble
You need to import :
http://code.highcharts.com/highcharts.js
And do something like that :
/* Here create your Highchart script (see bubble chart link) */
var chart = [...];
$( "#slider" ).slider({
value:25,
min: 0,
max: 100,
step: 5,
slide: function( event, ui ) {
chart.series[0].setData([...] );
}
});
<body> <div id="your_chart"></div> <div id="slider"></div> </body>
74
The issue you'll run into when using highcharts for this task is that the size of the bubbles will be specific to the chart you're currently displaying. If you want to display growth in the size of the bubbles more realistically, you'll have to take a slightly different approach.
I used a combination of HighCharts and jQuery UI Labeled slider to accomplish this quite recently.
You'll need to have:
In highcharts-more.src.js, find this section:
for (i = 0, len = zData.length; i < len; i++) {
zRange = zMax - zMin;
pos = zRange > 0 ? // relative size, a number between 0 and 1
(zData[i] - zMin) / (zMax - zMin) :
0.5;
radii.push(math.round(minSize + pos * (maxSize - minSize)) / 2);
}
And replace it with this:
for (i = 0, len = zData.length; i < len; i++) {
radii.push((zData[i]/maxSize)*100);
}
Then, when you initialize highcharts you need to set the following:
plotOptions: {
bubble: {
maxSize: MAXVALUE } }
Where MAXVALUE is the highest value across all charts.
You would then update the chart's data using your preferred method based on each tick. Example:
$( "#slider" ).labeledslider({
value:0,
min: 0,
max: 7,
step: 1,
slide: function( event, ui ) {
adjustHighchart(ui.value);
}
});
This will make sure that a bubble on chart 1 that has a size of 100 is smaller than a bubble on chart 2 that has a size of 200, which would not be the case if you simply updated the data each time since it's relative to the currently displayed data.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
