GSoC: World maps with annotated observations

[larsyencken]

DIFFICULTY: HARD, SIZE: 350 HOURS

Overview

World maps are a tremendous place to get an overview of a topic, but as we currently use them at Our World In Data, you have to mouse over a country to get the details of a data point. However, alternative map designs manage to annotate countries with observations, increasing the amount of insight you can get by glancing at the map.

For example, the following maps demonstrate the concept of annotating observations directly onto the map.

Technically, the challenge is to identify the layout and size of annotations, to add units where possible, and to mark small nations and islands effectively. By implementing this feature, you will contribute to global understanding of multiple important topics.

Required skills

• Javascript/Typescript
• React (bonus)
• Data visualisation (bonus)

Expected outcomes

• Merge support for annotations in world maps into the Grapher codebase, either as an option on current maps or as a new map type
• Document the Grapher API changes in such a way that others can reuse your work and create charts with these annotations

Potential mentors

• @danyx23
• @larsyencken

[rishits321]

Hello developers,

I am Rishikesh Suryavanshi and I am currently pursuing a bachelor's in Information Technology at Pune Institute of Computer Technology.

Being a second-year student I have become confident and fairly experienced in Web development languages including Javascript, CSS, Bootstrap, React, and different frontend as well as backend frameworks. This project falls well in my current capabilities and I will be very excited to work on this.

I suggest that this be made a new map type as some users will by default prefer this type of representation while others want. Also using the right layout and size will be tremendously important to not make the map look cluttered or disoriented.
I am happily willing to devote my time this summer to this project. Please let me know if any different software will also be required while working on this project so I can get familiar with it early. The fact that I will contribute to a global understanding of multiple important topics excites and motivates me even more.
I would like to connect with mentors for this project to guide me, I also want to get familiar with the codebase used in this organization so any important guidelines or tips will be much appreciated.

I look forward to hearing from you and further working on this project.

Thank you for reading,
Rishikesh

[danyx23]

Hi Rishikesh,

Great to hear that you are interested in this project. You are definitely right that this should not replace the existing map. Whether it should be a new chart type (i.e. similar to discreet bar chart, line chart etc) or simply an option on the map chart type we will have to see. I agree that figuring out the placement etc of the values is very important.

As I said in the other question you started - I think the best next step is for you to try and compile our project and start drafting a few ideas for the project proposal that outlines what steps you plan to take. Looking forward to it!

[rishits321]

Thank you for replying. I will follow the steps mentioned by you and get back to you soon.

[rishits321]

Hello, @danyx23 as I said I have successfully set up the grapher codebase in Visual Studio Code with remote container and docker, and I have also looked into the working of the code along with running a few tests. Here are some images of the same.

As I already said that this project seems most appropriate for me as I feel by working on this project I will be able to contribute to the community and increase global understanding and insights into multiple important topics. This will help users get an instant big picture and understand the general trend of any particular topic of importance. So I feel strongly to contribute to this project for the GSOC 2022 program to the best of my knowledge and ability. I do have doubt because I have not worked on such a large-scale project before, but I know that the mentors will guide me at any dead ends and I am sure that I can pull this off.

I will soon request PR for some good first issues. Meanwhile, I have also sent you a proposal draft through the mail, please provide me with your valuable feedback and let me know if any changes need to be done. I will submit my final GSOC 2022 proposal on google's site by the 15th or 16th of April, so it will be great if you could evaluate my draft before that.

Very Excited and looking forward to working on this project with you and all other mentors.
Thank you for reading,
Rishikesh S

[danyx23]

Hi Rishikesh!

Great to hear - however I have just checked and we have not received a draft from you yet. Could you send it again via email to daniel.bachler@ourworldindata.org? The actual submission has to happen via the Google Summer of Code website but for draft feedback please email me personally. If I get your draft by tomorrow, Thursday then I'll try to still give you a round of feedback.

[EmmanuelTheCoder]

Hi,

My name is Emmanuel Aiyenigba, I'm a software engineer with about 5 years of experience building products using modern technologies such as JavaScript, Typescript, React, Redux, and Node.js.

I am interested in contributing to this project. I believe that bringing annotated observations to World maps will help shape data visualization with very minimal actions required.

I just submitted my proposal and I will appreciate if the mentors can help review it - getting a feedback needed to effect a change to the proposal might not be possible given that the application is closing in a few hours.

I hope I make it into this program. I really look forward to working with and learning from you all.

Best,
Emmanuel

[toni-sharpe]

I tried this one and it was awkward.

@danyx23 @larsyencken this actually pulls apart that borders array to show how different countries are built with regards to the challenge in this discussion, focusing on a few useful examples. Then because part of my challenge was to push the envelope a bit, I also add some graphs to the map.

Simplest way

Get furthest N, E, S and W points, make a box, get the center. Try Norway.

Concave box

Some algorithm online will do the opposite but it's not as easy as one might think, especially when Canada is spread over 50 elements and some countries are shaped like Senegal.

Manual positioning

Yep. I find where the rigid logic of computers crashes into the organic nature of life and humanity we end up with manual code. I add country labelling to translations, tax systems (and translated country labels) as my examples of stuff that you could program but it would end up more complex than manual. They're just too human. Or maybe I am wrong. First of all they need to be visually centered with zoom level considered, then sometimes two bits of a country have two names (Italy and Sicily) or several bits have just one name. Sometimes centering isn't actually right visually, or you need to place two labels off-center in opposite directions so they don't overlap. Given therer are only 200 or so this is what I went for, it's not the "code" solution, but sometimes one needs to know when to drop ther code and use the human. Plus it's actually easier for non-tech folk, like researchers and translators.

I don't have continents yet, though I do have a file building up the ID sets for about 30 different WB/political entities etc. and they'll need labels done the same way. Some of these will overlap (G7, EU, NATO). This system should scale easily, so a world can exist where researchers can group countries in way that suits their story.

But, the array does have sensible center variables for country names in English (and most in German). It would be easy to augment with a callback that allowed editing to add data or replace the name. The text is also centered in SVG as default (using the SVG text align attributes). The maps in the OP also show the semi-circular/ring style labeling I describe here.

 

The code

// Italy shows how fiddly the labels can be
// Full translated the label center values might need to move
83: {
  "countryBorder": [
    0: [
      0: […],
      ...
      10: { // yes, I'm using the last array spot for meta-data, which does need to be kept per border instance, probably not perfect though
        c: { x: 514, y: 136.5 }, 
        label: { x: 514, y: 136.5 },
        countryName: "Sicily",
      }
    ],
    1: [
      0: […],
      ...
      9: { 
        c: { x: 501.5, y: 128.5 },
        label: { x: 501.5, y: 128.5 },
        countryName: "Sardinia",
      }
    ],
    2: [
      0: […],  
      ...
      65: { 
        c: { x: 501.5, y: 122.5 }, 
        label: { x: 505, y: 113.5 }, // label centers aren't necessarily geographical centers, 
        countryName: "Italy",
      }
    ]
  ],
  countryCode: "ITA", // for zooming out / translation keys
  countryId: 83,
  countryName: "Italy", // fall-back for translation

// The Maldives, simpler, just two islands
102: {
  countryId: 102,
  countryBorder: [
    [
      [675,240],[675,240],[675,240],[675,240],[675,240],[675,240],
      { c: { x: 675, y: 240 } }
    ],
    [
      [675,237],[675,237],[675,237],[675,237],
      { c: { x: 675, y: 237 } }
    ]
  ],
  countryName: 'Maldives',
  labelCenter: { x: 675, y: 238.5 }
},

// Monaco, really simple, probably just needs a center
196: {
  countryId: 196,
  countryBorder: [
    [[497,118]]
  ],
  countryCenter: { x: 497, y: 118.5 },
  countryName: 'Monaco',
},

// Norway, several regions, one center for the label
197: {
  countryId: 197,
  countryBorder: [
    [[535,47],[535,45],[533,44],[530,45],[529,47],[528,48],[525,47],[523,47],[521,46],[519,47],[518,47],[518,48],[515,48],[514,49],[512,49],[511,51],[510,54],[507,58],[508,59],[507,60],[505,60],[504,62],[505,66],[506,67],[506,71],[504,72],[503,74],[502,72],[498,76],[495,76],[492,75],[491,72],[490,65],[492,64],[497,61],[501,59],[504,55],[509,50],[512,48],[516,45],[520,44],[524,44],[526,42],[529,42],[533,41],[539,43],[537,44],[539,46],[536,47]],
    [[522,26],[518,27],[515,26],[516,26],[515,25],[518,24],[519,25]],
    [[510,22],[516,23],[512,24],[511,26],[510,26],[509,28],[507,28],[503,27],[505,26],[502,25],[498,24],[497,22],[501,21],[502,22],[505,22],[505,21],[508,21]],
    [[521,20],[525,21],[523,22],[518,22],[513,22],[513,21],[510,21],[508,20],[513,20],[516,20],[517,20]]
  ],
  countryCenter: { x: 498, y: 67 },
  countryName: 'Norway',
},

Italy zoomed

Graphs

This bit was more fun, and benefited from the array structure and the common pattern for data shared between Histograms and DragGraphs. Complicated data can be shown per country, in country but I don't know how well this works. The graphs are all different scales and detail and they are fully functional tiny versions of the bigger ones (with bits switched off) - but the zoom is essential here, it's probably a feature, if it's any use, where a portion of a map is focused on to show just a few countries.

However, I have now taken this out, my prefered direction is to have the selected countries build up grouped histograms, linegraphs, or whatever, depending on data. So map and graph-set would define the cleanest look at the data of the page. This I think I might work on next, I've been interested in it for a while.

Still though, there might be use, selecting one country at a time and showing that country's regions. Or just letting the user have it and mess it if they like.

The code

This just shows the array in action, the code just loads either the histogram or a drag graph. Separately I'm now working with the same base structure for each graph because that feels like a good idea, so the grouped histogram is the same as the drag-graph, ideally there's a special place where the data can be put into either without much pain (convention over configuration).

  180: {
    dragData: [
      ['k1', { length: 27 }],
      ['k2', { length: 12 }],
      ['k3', { length: 26 }],
      ['k4', { length: 29 }],
      ['k5', { length: 35 }],
      ['k2', { length: 22 }],
      ['k3', { length: 22 }],
      ['k4', { length: 59 }],
      ['k5', { length: 55 }],
    ]
  },
  181: {},
  182: {},
  183: {
    dragData: [
      ['k1', { length: 27 }],
      ['k2', { length: 25 }],
      ['k3', { length: 26 }],
      ['k4', { length: 26 }],
      ['k5', { length: 45 }],
    ]
  },
  184: {},
  185: {
    barCountPerBlock: 2,
    barMargin: 2,
    blockSize: 94 / 8,
    histogramBarGroupList: [
      ['0-10', { symp_1: [1, 15], test_1: [1, 82] }],
      ['10-20',{ symp_1: [1,  2], test_1: [1, 67] }],
      ['20-30',{ symp_1: [1, 34], test_1: [1, 41] }],
      ['30-40',{ symp_1: [1, 15], test_1: [1, 32] }],
    ],
  },