Reputation: 3608

Javascript Bubble Chart with slider

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.

Upvotes: 6

Answers (3)

johnmadrak

Reputation: 825

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.

Upvotes: 1

nayfun

Reputation: 116

HighChartJS + JqueryUISlider are the best solutions.

The bubble chart is here : http://www.highcharts.com/demo/bubble

You need to import :

http://code.jquery.com/jquery-1.9.1.min.js
http://code.jquery.com/ui/1.10.3/jquery-ui.js

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>

Upvotes: 2

Vadim

Reputation: 538

For resolve this task I would used highcharts library and its Series.SetData() function. Also jQuery UI slider

How it works:

1) Bind the function to jquery ui slider change event

2) This function will run Series.SetData() with different sets of data (based on current slider position) on highcharts chart

Upvotes: 0

Javascript Bubble Chart with slider

Answers (3)

Related Questions