Letting users add their own set of data in Observable Notebook

flammenz 0
Viewed 53

This question is a follow-up from my previous post . After successfully creating a World Bubble Map based on geolocation on Observable Notebook, with help from Chris.

I want to make my Notebook user-friendly. For instance, I have already some sets of data that are plotted as bubbles according to parameter selection. Now what I want to achieve is, if somebody wants to use their own set of data on my Observable Notebook I want their data to be plotted as bubbles based on geolocation of the countries (same as my data).(Make a path where they can upload their own data) And since the dropdown menu content has been manually modified according to the parameters name, will it be possible to make the dropdown menu content change automatically when someone adds a new set of data ?

How can I do something like this ? Any suggestions? Thank you in advance.

A link to my Notebook : Bubble Maps

bubble-chart d3.js observable javascript
1 Answers

This is partial solution with some open Issues : I have created a second map where users can use their own set of data to plot the bubbles. Although, it will only work if the Country Code of uploaded .CSV data is the same as ISO_A2 (Country Code)from the .JSON file used in my Notebook. There are some issues I could not resolve. Mainly 1 . Some countries appear on the top left corner of the map which is not actually correct (the second map should actually plot the countries like the first map as both map has same longitude and latitude) 2. The same zoom function is working for the first map but not for the second map (that is kind of confusing me) 3. Will it be possible to generate input buttons automatically from the uploaded file, or should it be done manually every time. If I could get some help and suggestions, it would be so great. I have included a dummy data in my notebook (in the data pane—File Attachments) which can be used to test the second map. Here is the link : Bubble Map

The Radio button code: viewof userparameter = Inputs.select(new Map([ ["Area (Sq. Km)", "areasqkm"],["Population", "population"], ["Airports", "airports"],["Gold in tonnes","Goldtonnes"],["GDP in dollar","gdpdollar"] ]), { value: "Area (Sq. Km)", label: "User Parameter to show:" })

The zoom properties: viewof userparameter = Inputs.select(new Map([ ["Area (Sq. Km)", "areasqkm"],["Population", "population"], ["Airports", "airports"],["Gold in tonnes","Goldtonnes"],["GDP in dollar","gdpdollar"] ]), { value: "Area (Sq. Km)", label: "User Parameter to show:" })

flammenz0
Related