categori.se

Saneef H. Ansari

Aaron Kyle Dennis

charts and plots

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?

Did you change something? Working well now.

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?

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.

@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)

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

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 ..