Multiple bubblemaps on button click same code different datas

Community Help
22

I think that’s exactly what my notebook is already doing; just change the radio button to “Median Age”.

Here are the relevant lines of code in the definition of map:

let p = parameter.toLowerCase().replace(" ", "_");
let max = d3.max(country_data.map((o) => +o[p]));
let bubble_group = svg.append("g");
bubble_group
  .selectAll("circle")
  .data(country_data.filter((o) => centroid_map.has(o.CountryName)))
  .join("circle")
  .attr("cx", (d) => centroid_map.get(d.CountryName)[0])
  .attr("cy", (d) => centroid_map.get(d.CountryName)[1])
  .attr("r", (d) => 20 * Math.sqrt(+d[p] / max))
  .attr("fill", "lightblue")
  .attr("stroke", "black");

Now, if you examine the code defining the radio button labeled “Parameter to show”, you’ll see the following:

viewof parameter = Inputs.radio(["Population", "Airports", "Median Age"], {
  value: "Population",
  label: "Parameter to show:"
})

What this does is bind the variable parameter to the value of the radio button list. Thus, anytime that you refer to parameter in code, you get one of the following:

  • "Population",
  • "Airports", or
  • "Median Age".

Furthermore, this value is changed dynamically and propagated throughout the notebook when you change the radio button. Thus, when you see

let p = parameter.toLowerCase().replace(" ", "_");

in the map code, the parameter refers to the radio button and changing the radio button immediately updates the map. The .toLowerCase().replace(" ", "_") business simply translates the displayed radio value to the object key in your data.

Finally, we use p to define the radius of a circle displayed on the map in this line:

.attr("r", (d) => 20 * Math.sqrt(+d[p] / max))

In this line, the variable d arises from your data and, since we’ve already defined p to be the object key that we want, d[p] extracts the value that you want.

1 Like
23

Oh i see now.
I was too dumb not to look at the radio button.
Thank you very much for the clarification Mark. Now i get it, how is the bubble working with the parameters.
Thank you Mark once again. I will now try to update the notebook with the datas.

1 Like
24

Hi Aaron ,Hi Mark

i have published the notebook with updated parameters and till now its working fine.Is there some way to see if the bubble are fetching the correct data?

@ Aaron i have updated the csv file with updated parameters name.

25

I just fixed a minor bug you had in your data labels. Seems to be working now. Congrats on working through it!

1 Like
26

Thank you Aaron.
Appreciate your’s and @mcmcclur help and effort on making it work .
Moving to the next Phase , ill try to make the bubble size appear according to the data-size for each country and data view on mouse hover.

2 Likes
27

I set it up so that the radius is proportional to the square root of the parameter value. Put another way, the parameter value is proportional to the area of the circle, which I think works well.

I use Tippy.js for tooltips. Here are a couple of bubble maps that I’ve made recently that use this technique:

2 Likes
28

Thank you for the link. I will study those functions on the provided link and will try my best to implement it in my use-case.
If i have confusion (as always i will have some :slight_smile: ,I will ask for some assistance.
Thank you Mark .

29

Hello Mark Hello Aaron,
I have published a slightly edited map where the countries name can be viewed on mouse-over.(Reference to marks link)
But although i am unable to make it read the data as of view-of parameters.
I think it is because i am using a div and the div can read only single data from csv file. Is there any good approach on making it read the datas as the graph changes.
One more thing is bothering me i.e the countries are plotted according to long and lat, but after i hovered over some countries in my map and compared it to world map on google,i think they are not on a same longitude and latitude as per world map projection.
could that be a bug on my code which is hampering the correct projection?
If you have time ,please have a look (i think i am doing something wrong)

30

I sent you the suggestions via this notebook. If they help, you can simply merge the notebooks.

The key issues (I think) are:

  • The data used to place the circles should match the data to define the tooltips and
  • The content of the tooltip should reflect the parameter

As I think about it, though, I used a d3.format function that is probably only good for population. It’d probably be best to remove that. Better yet, you could pick a format function that reflects the parameter as well.

2 Likes
31

Thank you Mark for quick response. I will give it a try.

32

I have tried to add some new features in the bubble plot. Some were successful whereas some are not working.
I gave distinguishable color to the continents ,which is working well so far.
Increased the fill opacity and instead of using “let” i have used “var”.
Since the bubbles are overlapping, i tried to use d3.forceCollide and imported it, but i dont think it is working at all.
Will it be possible to make the bubbles appear according to the datas (for example if i go on population graph then could it be done so that the countries with highest population gets bigger bubble and the lowest gets smaller bubble. Could it be done in every single parameters).
Please have a look at the link -
trial version

33

I don’t know much about this, but I think let is similar to const (not expecting change) whereas var anticipates a change. That being said, I don’t think the difference influences code operability… Mostly I think these are signals to your readers ( however I am not that familiar with any of this… Mostly flagging that you should read into it)

1 Like
34

Check it out! Your notebook made into trending! Nice perseverance!

2 Likes
35

Hi @mcmcclur @mcmcclur
I have been trying to adjust the bubble sizes for smaller values meaning the bubble sizes are barely visible for some smaller datas and tried different approaches without any good solution.
Do you have any suggestions how can i maybe atleast set minimum radius value or make the smaller bubble also slightly more visible on the map?
Thank you

36

tried rendering but i think i made some pretty good mistake there triedrendering

37

Sure! Simply replace

.attr("r", (d) => 20 * Math.sqrt(+d[p] / max))

with

.attr("r", (d) => d3.max([3.141, 20 * Math.sqrt(+d[p] / max)]))

Then, the minimum displayed radius will be 3.141.

Of course, the only variable you have where that really becomes a problem is inflation rate, which is ridiculously skewed due to Venezuela. That’s kind of important so I don’t know if this is an improvement or not.

1 Like
38

Thank you Mark for quick reply and suggestion. The d3.max function works very well for others but as you told Venezuela is a problem in inflation rate. Either i have to remove it or can i assign the radius parameter to each and every parameters separately meaning for i have 8 parameters and if i assign every one of them with their own circle properties?

39

Any suggestion, where can i exactly call d3.forceCollide () ?
I imported force collide from a notebook but it is not actually making any impact . Could be i have been calling it in a false position ?

40

currentstatus
for the moment i have used min radius of 10 so that the smaller datasets are also visible as Bubbles .

41

Hello @mcmcclur and hello everyone
I tried to make a clustered circle for my data with reference to clusteredbubbles. I have categorized the data according to ContinentCode and created an array, but how can i make it read the data and form a cluster according to continents. Do you have any suggestions?
Link to approach : approach

I am getting NaN value for cx and cy because the value d is empty in my case. Is there any approach where i can assign value to d such as in the example by m.bostock ?

thank you.