@Saneef - Please help to elaborate this a bit more. The implementation code doesn't exactly allow for plug-and-play, as features and borders had to be drawn from from two separate data sources. I would expect people wish to supply one map data set. Also, I am not entirely sure what is going on with 'position'. That is, I get that it uses the municipalities polygon data to calculate a center point on which to draw the circle. However all the code here to identify each municipality by property name and then to return the centroid calculation - this seems to be asking a lot of people. Can we offer an example that does this 'automatically' from the implementation code alone?

Also: I think it's important to stress the type of data a given visualization is 'expecting'... and how to get data into that format. Examples of notebooks to help users get data into geojson format include: https://observablehq.com/@tmcw/convert-kml-to-geojson https://observablehq.com/@georift/overpass-to-geojson https://observablehq.com/@tmcw/projected-esrijson-to-geojson, ... also, I made this for Brett as a reference about capturing shapefiles; could be revisited: https://observablehq.com/d/517aaf529b715e32

Sorry to scare you. "Curse of knowledge" of the creator. I have changed the first example. Is it less scary and understandable? I'll see and add feature for non-overlapping bubbles (force simulation). It will be opt-in as it may not be suitable for some uses and it is a bit slow to render. I agree with your note data and formats. I'm think, we should have a note book on how prepare data (array of objects,...), geojson (winding order,...), csv (auto typing)

Try 'Avoid overlapping' toggle.

This visualization is difficult to get right, unfortunately. The circles when viewed on the phone are large and overlapping. I've seen people use various force methods, which I wonder if we can adapt here. E.g. : https://observablehq.com/@d3/collision-detection/2, https://observablehq.com/@d3/bubble-chart, https://observablehq.com/@solomonshy/force-directed-bubble-diagram, https://observablehq.com/@d3/clustered-bubbles

Also: https://observablehq.com/@codingwithfire/force-bubble-map-with-textures-js

Commented above `force` feature. I have fixed the problem chart ending up different on mobile.

Thank you for adding this feature :) I'll play around more. The Tanahu example doesn't render well on the phone, while the Bangalore example does. Any ideas?

Tried refreshing? Works for me on phone

Did you change something? Working well now.

Ah, I see that you did ;)

Tanahu doesn't really look all that pretty. Should we try to swap this out for another area, like Khotang, Solukhumbu, or Okhaldhunga? Also, can we format the numbers so they show a comma in the thousands?

Got it :)

How do I adjust max radius here?

avoidOverlapping doesn't seem to be working?

There was couple of problems with the data, https://observablehq.com/@adb/bubble-map#population_srilanka, causing to return undefined for position. I have commented in the cell. The function for avoid overlapping needing position need position. Can't filter out those values blindly. Need to think on how to do these kind of error handling.

How did you get this? I keep failing with my attempts on Overpass Turbo. I can get Bangalore using the following: ``` [out:json]; relation["name:en"="Bengaluru"] ["boundary"="administrative"] ({{bbox}}); out body; >; out skel qt; ```

I use QGIS. ;) Easier for me. Sometimes I smoothen, and edits. This is the generated query in QGIS: ``` [out:xml] [timeout:25]; ( node["boundary"="administrative"]["admin_level"="8"]["name:en"="Bengaluru"]( {{bbox}}); way["boundary"="administrative"]["admin_level"="8"]["name:en"="Bengaluru"]( {{bbox}}); relation["boundary"="administrative"]["admin_level"="8"]["name:en"="Bengaluru"]( {{bbox}}); ); (._;>;); out body; ```

thats only for the city border. wards are in `admin_level=10`

Yeah, I can get it for admin_level = 8, but I can't seem to get the admin_10 when searching this way

I didn't immediately find what should be appropriate min and max settings here. I figured 360 degrees?

These are identical, and yet when I try to refer back to this data source in the second chart below, it will break. Any idea why?

It's got something to do with the projection selector..

It was the winding....

Let's change this to population in Sri Lanka: https://www.citypopulation.de/en/srilanka/prov/admin/

The shape file from OSM for Sri Lanka is fatter than the geography: https://d.pr/i/RcI19f

Whoops! We need to update the text content here ..