Black Lives Matter. Please consider donating to Black Girls Code today.

Show and Tell - Encarta Inspired WORLD ATLAS in Dash!

===
Update: choropleth geo-3d-map! (9 Nov 2020)

Implemented version 1 of a 3d globe choropleth map! This will display the selected dataset in 3d showing the selected dataset values as a hover tooltip. I had to convert multipolygon JSON data from Natural Earth to single Polygon (pain), clean some JSON that deck.gl did not like parsing (more pain), then colour it using a linear colour interpolation algorithm I’ve hacked up that is based on the colour array I can return from the figure data on the main map (so much pain). You can change the colour scheme in settings! Thoughts/ideas/feedback welcomed! See Gifs below :smiley:

===
Update: choropleth geo-bar-map! (7 Nov 2020)

People we have lift off. Choropleth geo-bar-graph is a thing (see screenshots below). Essentially I’m mimicking the colorwheel palette from the underlying choroplethmapbox figure. I’ve had to basically implement my own linear colour interpolation algorithm based on a colour array I can get from the figure state (so much pain). It’s not perfect but it’s close. This means you can try out different colour schemes by changing the colour palette in settings.

===

Update: dash-deck implemented!

I have got the GeojsonLayer running to build what I’m coining the “JIGSAW” view, ha. Looks like some kind of crazy lego puzzle. Also starting work on implementing the “GLOBE” view. All based on dash-deck. Screenshots below

===

PITCH: World Atlas 2.0

Hi everyone

Well I think it’s time to share my progress so far on a little labour of love I’ve been tinkering away at over the last few months in Dash. I would love to get your feedback, guidance, and ideas for improvement!

What I’m trying to build
I want to build a modern world atlas as a web application that takes inspiration from Encarta 95.
It should be fun and intuitive to look at country-scale public datasets in a visual way, using the latest open-source web and data science tools available.

Why I’m trying to build it
To be honest I’ve been really disappointed that global scale statistical datasets like those on the UN data portal don’t seem to be centralised in a visual medium. Sure you can rip down the .csv but there is lots of cleaning to do to get it in a format that is useful to interpret (i.e. it’s not very accessible to the public). You can find one-off maps on govt websites and through wikipedia but I’ve yet to find a single powerful place to view these datasets all in the one place.

I want to build a visual interface to this kind of data that kicks ass.

The pitch is really this: 25 years on from the days of Encarta, where the hell is the World Atlas equivalent of what Wikipedia is for the encyclopaedia? I haven’t been able to find it, so I’ve attempted to start building it on principle. How hard could it be? I thought to myself about 200 hours of coding ago…ha.

What I’ve done

  1. Ripped down and cleaned ~80 datasets from the UN data portal (about 100,000 observations) each with a unique set of years
  2. Grabbed some JSON polygon data (3 different resolutions)
  3. Used the choroplethmapbox map as the centrepiece, I’ve essentially built an interface around it; the book if you will, of the Atlas :slight_smile:
  4. Added buttons to download data, view charts, and adjust the settings (mapbox tile set, colorscale, and polygon resolution)
  5. Users can zoom, in, pan and seamlessly flick between datasets (When you change data sets I try to give the impression of a simple colour change, but what is actually happening is I’m rebuilding the whole graph object with the map state variables of the previous one)
  6. The time slider is programmatically rebuilt at run-time as you change selections
  7. I’ve got continuous and discrete datasets going and I’m using a simple logarithmic scale on continuous data to get good colour contrast between countries as much of the data is skewed. The goal here is communicating the information to mainstream public more than academics, so I care less about binning data and more about making continuous data readily accessible in the hover-over info etc.
  8. I’ve managed to get a download button working (with great pain) that generates a .csv file from the active selection (just a simple dataframe selection spitting out a string to the HREF with a header, by wrapping a button in a html.A component).
  9. Probably made the worlds worst call-back for my main loop

The performance seems to be pretty decent with map reload times of about 1-2 seconds with low resolution JSON polygons. It chugs up big-time if you go to high resolution. Slug size is about 120MB and I have no idea how it will scale with more users etc as I’ve never done this sort of thing before. (This is my first Dash app and I’m very new to Flask and the Python ecosystem so please go easy on me. I’m sure I’ve done something stupid.)

It’s best viewed in 1920x1080 resolution as I haven’t optimised it for much else yet. I’ve just spun it up on 3 x performance dynos on Heroku so we’ll see how it goes for a little while until my credit card catches fire.

The sorts of things I want to add in future are proper curated datasets like climate and energy data from the IPCC, IEA and UN, plus fun stuff that is interesting like visualising languages spoken etc.

Is this something you see as useful in the community? Are there specific datasets you want to see? Am I doing anything stupid or has this already been done?

Anyway, I really hope you like it and I’d love your ideas.

Dan









WORLD ATLAS 2.0 (14)
WORLD ATLAS 2.0 (19)
WORLD ATLAS 2.0 (18)

10 Likes

This is really cool, @dan_baker
I love be the idea and very neat speach audio that starts when you hit the about button :grin:
Is it too complicated to put numbers to the color bar on the right, instead of less, more labels?

Very nice! I remember visiting the CIA World Factbook in school and thinking how cool that website was. Very similar to Encarta and agreed, nice to have all of this data in one place!

Nice work on your first Dash app. Looks like you’ve explored many of Dash’s features too!

1 Like

It looks great and feels responsive! An easy way to add a download button is via the Download component.

2 Likes

Nice one! Very clean interface.

1 Like

I like the popover feature scaling according to website…I am getting hard time scaling this as feature in my Dash app

1 Like

Can you share the github link of this project?

Thanks Adam. Yes I did experiment a bit with the color bar but it becomes problematic for different continuous datasets and orders of magnitude. For example sometimes displaying scientific notation (3.2 x 10^5) and effectively becomes not very useful as it is logarithmic and basically very hard to interpret. My hack was to change the top label to “More” which just indicates values at the upper end of the colour spectrum are much more than those in the lower. It can probably be tweaked but requires lots of tedius work!

Thanks @chriddyp !

Yeh I test drove lots of the dash and dbc components so it’s almost like a working demo of many of these collective features. Also I just wanted to say thank you for all the videos and relentless tutorial posts you and the crew have done on Dash; have helped me tons.

I will grind on with the Encarta vision!

Thanks @matsujju

Happy to help out with any design problems you have if you want to message me direct. To be honest I’m not sure I’m ready to share this project publicly yet as I have a few little ideas for it in the pipeline. Very happy to share specific problem solutions though, so hit me up.

This looks really great! Kudos!

1 Like

Major kudos for sure, and I’ll be keeping an eye on this! One thing that didn’t seem intuitive to me is that More corresponds to a lighter color. I would expect darker colors (more intensity visually) to indicate More. For better graphical decoding, can you use a sequential, rather than diverging, palette? Light-to-dark color schemes usually represent more or less of something.

Thanks @ajr :slight_smile:

Yes I totally know what you mean. From the 93 colour palettes I chose one that is kind of cold to warm as default (green - white - red) but midway it’s a little misleading with the lighter white. If there is a better one you can find from playing around with the live SETTINGS please let me know and I’ll update the default one, which is fall.

I think I can invert any colour scheme too so, for example, the plasma one inverted might be a better go. What do you think??

Voilla!

This is much more logical @ajr thank you.

Set plasma as default, and reversed. Shoot any feedback my way for how it goes. I’ll look to add a button in settings to allow users to reverse colour scale too.