I am trying to use the same code to generate multiple bubble maps (Geo-location) on button click with different data for every bubble-map.For instance i have 5 different buttons and each button should display unique geo bubble map according to data.I tried a lot to solve the problem on my own but could not generate bubble map as i wanted to.
Any help would be appreciated.
I do not know how to link all my codes to each other and i am doing some grave mistakes which i am not seeing.
The code can me found on git hub .
datadoc
1 Like
This is a forum for discussing Observable - a notebook environment for using Javascript to explore data visualization. While we do see some Javascript and D3 specific questions here, they tend to be within the context of Observable, rather than HTML+JS+CSS as you’ve provided. If you’re interested in producing bubble maps with Observable, there are lots of examples.
2 Likes
Hi Flammenz!
Mark is an excellent resource, and it’s great he’s looking into your question! If I may rephrase a bit (please forgive me Mark, if this isn’t exactly what you mean): you did well to share your GitHub code, but generally the help shared on this forum is most beneficial to folks when they try to use and share an Observable notebook. I am working with bubble maps this week too, and would be happy to take a crack at the problem. However the overhead of switching environments between GitHub and here is high. Perhaps you would be willing to have one more go at your problem, and to try to create and share an Observable notebook that we can work with?
1 Like
Hello mcmcclur,
Thank you very much for your insight regarding my issues. I am really new to D3js and that is why i shared the GitHub code as i was unaware of Observable Notebook.
I have created a Notebook today but as i am very new to observable notebook ,i have managed to create a lots of unwanted errors .( could be because of my java script functions) I do not know if i can use java script functions in d3js and would be glad if you could have a look and give me some feedback about resolving the issues.
Thank you very much for having the look at my issue.
Hello Aaron ,
Thank you very much for your insight regarding my issues. I am really new to D3js and that is why i shared the GitHub code as i was unaware of Observable Notebook. What i am actually trying to achieve is, create a website and use my D3js code for bubble plotting on world map from my .csv data.(that is the reason there are CSS codes and HTML and java script files in my GitHub page. I have created a notebook and i am not sure if i have done it correctly. Would be great if you could have a look and help me clear some of those issues . i think i have somehow managed to create a lot of errors.
untiltled d3js
@flammenz There is also a Slack entirely dedicated to D3 where you can chat with the community and get more direct feedback:
1 Like
Before jumping into “Multiple bubblemaps on button click” with 5 buttons and multiple data sets, I would recommend that a beginning D3 user try to plot a single data set on a map. You could then build programmatically from there. That is, change the data set with code, then try to tie that code to a button, etc. It is definitely a bit of a process.
Here is about the simplest D3 bubble map I could muster:
This uses a file of type TopoJSON that describes the boundaries of the countries and also includes populations of those countries. If you’d like to plot other data, say in a CSV file, then you’d need to the rows in the CSV file to match some way with the polygons in the map file.
Hope that helps and have fun!
2 Likes
Thank you mcmcclur,
I really appreciate your help .Yeah you are completely right. I should have first implemented the Bubble map first on one single dataset and moved on to others but i tried to did all at once and landed with a mess.
I will try to implement my datasets in the map you provided and will see how it works.
If i come with unsolvable problems ,i will be posting on this thread again.
Thank you very much for your help.
2 Likes
You’re doing just fine. You can edit fork notebooks over and over. Making a mess helps with learning!
I just made more of a mess in your notebook after discovering that I was shared on it. Specifically, I moved in Mark’s bubble map implementation. I also started taking apart your code… showing how you can separate out variable definitions, etc. You can undo all of this using the history feature, or you may wish just to work from this point of departure to start seeing if you can get your target values into one of the maps. We’re here to help! After you’re comfortable with how a Bubble Map is made, we can help you figure out the button toggles.
1 Like
Thank you Aaron !
Thanks for looking into my code .I realized you have helped me a lot in making improvements in my code. i started where you left and edited some of the codes .Now the bubble map is visible but still got some issues which i am looking forward to solve ASAP:
1 Like
Why is it so,that i am unable to plot the world map with my own local geojson file?
It would be handy if i could do so,i would be able to plot the bubbles easily,is not it ?
@flammenz From your last couple of questions, it sounds like you’ve worked on your notebook and expect that we can see your new results. As far as I can tell, though, your notebook is unchanged. Perhaps you’ve made changes but have not republished the notebook?
Sorry, I introduced a few bugs when I was poking around to learn the different parts. You can certainly use your own geojson file. Mark’s example already had a countries file that he converted to GeoJSON, so I just used that one for convenience. I’ve tried switching it back to your countries.json file, but I think it’s also in topojson format (rather than geojson), so I have to learn more about how to get it working.
I also added a basic example of showing inputs using native Observable inputs. We’re still a bit of a ways off from having everything connected.
I see that you republished. The changes I am speaking of will only be visible to you.
I’d say at this point you might wish to focus on isolating the different values you wish to show, and then to figure out how to substitute these values for the ones Mark supplied with his example.
You’re getting close! Keep it up!
1 Like
I have confusion and i.e , I have used geojson file from Mark’s example which is running great.
What i actually want to achieve is ,use the data from my CSV file where there are only few datas which i require.
My question is , when i use Mark’s file, the data is read via :: .data(countries.features) and i can use every data from his file but:
My confusion : when i try to use the data from my csv file it shows errors. ( 1 reason my csv file have no feature, so how can i come up with the solution where i can make it use world-map from Mark’s file and read the country data from my file.
sorry for asking this annoying question
If you want to map data defined in a CSV file on top of a map generated by TopoJSON, you’ll need some way to associate the rows of the CSV with the countries in the TopoJSON. In your example, you might hope that the CountryName variable in the CSV file matches with the NAME property in the JSON. When the data come from different sources, it’s not at all uncommon for this type of matching to be imperfect so might have to manually adjust some things. Once you do that, you can plot your bubbles using the CSV data; you’ve just got to look up the centroids using your matching.
Here’s my fork of your notebook that illustrates these techniques:
A couple other comments:
- I used a larger TopoJSON file that includes finer detail and, therefore, more countries.
- There’s no reason to
requireD3; it’s already built in. You certainly don’t want to require an old version of D3; that’s why you needed to replace my .join with a .enter/append.
2 Likes
My fault for including d3@4. The original code had a method in it that has depreciated. I required d3@4 to make it work… But never highlighted why. Your code seemed to be backward compatible
Thank you very much . You are awesome. I have edited the missing countries in my .csv file and uploaded in github. Unfortunately i could not update all of them. The data in my .csv comes from Cia Fact book and they unfortunately don’t have all the country listed as in geojson file from Mark’s. Notheless i have updated the name of some countries and now i an working further to improve the bubble map.
Thank you very much Mark and Aaron. I really appreciate the help.
2 Likes
Sorry I am here once again with my never ending questions:
First of all ,do not get annoyed , i had to fork many times as i edited Mark’s code and got errors.
I have changed all the possible Countries Name to match on Mark’s JSON file.
My Question : As far as i understand, the bubbles are now plotted according to country name( but why are they plotted differently on each button click ,since i assume they are not reading population,airports or median age and median age has too many bubbles i reckon) and
if i want the bubble to be plotted lets say with data from airports (but in their own geo location) what will be your suggestion.
How can i make a good approach to plot data according to the need ?
One more question @Mark : I see in the json file the country name properties is NAME , do i need to make a change in csv file and change the CountryName properties to NAME or is this a bad question.
Sorry for the stupid question and do forgive me for getting on your nerves . 
I’m not sure I follow. On my map, the center of each bubble is always the computed centroid of the country. The size of each bubble depends on the value of the radio button, though, and this is achieved via the viewof operator. As far as I can tell, your map has not been republished since I last looked.
Personally, I’d leave the input data alone and check things like
GEO.properties.NAME == CSV.CountryName
if that makes sense. 
1 Like
Hi Mark
Thank you for the quick reply and sorry for making you confused.
No i have not published my notebook yet ,as i am still looking the awesome changes you made and trying to understand it.
What i was asking was , how can i make the plot according to my csv file ,because if i want to plot median age from the csv file , ( i think since there is no median age in json file) is it possible to read medianage without doing something like this:
GEO.properties.NAME == CSV.CountryName