All geek questions in one place

Javascript Bubble Chart with Slider

The OK Cupid website has an infographic article titled 10 Sex Charts .

I really like how the Bubble Chart and slider are displayed on chart # 7.

I would like to do the same with my own Javascript visualization, ideally using the jQuery library.

Unfortunately, OK Cupid seems to have animated the Bubble Charts PNG Series.

I would appreciate some recommendations regarding whether there is an existing graphics library that might include a slider. Alternatively, you can present several Bubble diagrams using the slider and get good performance.

+6
source share
3 answers

HighChartJS + JqueryUISlider - the best solutions.

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

You need to import:

 <body> <div id="your_chart"></div> <div id="slider"></div> </body>
+2
source

The problem that you will encounter when using tall charts for this task is that the size of the bubbles will be specific to the chart currently being displayed. If you want to more realistically display the growth of the size of the bubbles, you will have to take a slightly different approach.

I used a combination of HighCharts and jQuery UI Labeled to accomplish this just recently.

You will need:

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 the tall charts, you need to set the following:

  plotOptions: { bubble: { maxSize: MAXVALUE } }

Where MAXVALUE is the highest value in all charts.

Then you updated the chart 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 the bubble in diagram 1, whose size is 100, is smaller than the bubble in diagram 2, whose size is 200, which will not happen if you simply update the data every time, as this is relative to the data displayed in the moment given.

+1
source

To solve this problem, I would use the highcharts library and the Series.SetData () function. Also jQuery UI slider

How it works:

1) Bind the function to the jquery ui slider change event

2) This function will run Series.SetData () with different data sets (depending on the current position of the slider) on the chart of high-speed cards

0
source

Source: https://habr.com/ru/post/946141/

More articles:


All Articles