GSoC: Treemaps in Grapher

[larsyencken]

DIFFICULTY: MEDIUM, SIZE: 350 HOURS

Overview

Treemaps are a hierarchical way of visually showing magnitude as area. We believe that they could be useful for a range of topics, from CO2 emissions, population, and a wide variety of other measures. This project would be to add support for Treemaps to grapher, the open source visualisation tool used by Our World in Data.

Grapher currently has limited support for hierarchical data. A possible sequence would be to try to build treemaps for single metrics; then to add nesting by continent or country grouping; then to investigate support for other types of hierarchy in grapher’s data model.

https://datavizproject.com/data-type/treemap/

Required skills

Javascript, React (optional), Typescript (optional), d3 (optional)

Expected outcomes

• The Grapher visualisation library has treemap support merged
• The Grapher config API that creates treemap charts has a strict schema and is well documented for others
• The Grapher admin allows the creation of treemap charts

Possible mentors:

• @danyx23
• @danielgavrilov
• @larsyencken

Feel free to ask any questions you like below!

[Abhipawar02]

Hello ,
I am Abhishek Pawar and I am a second year computer engineering student at MIT academy of engineering Pune.
Adding Treemaps in Grapher tool is a great idea of representing data in Tree hierarchical way. I explored the grapher tool repository and checked some of charts file( linecharts ,mapcharts etc) and I am interested to work on this project.
I would like to ask how shall I began? should I try to Understand the whole grapher tool repository or should I try to understand implementation of other charts in repository.
This project will require detail study of treemaps and Also at https://datavizcatalogue.com/methods/treemap.html#google_vignette I tried to study the code of tools to generate treemap visualization.
I would like to contribute to this project and would definitely try to solve some of issues.
Thank you, looking for your response.

Your new Contributor,
Abhishek

[danyx23]

Hi @Abhipawar02!

Nice to hear that you are interested in contributing to GSoC with us! Could I ask you to write an email to [email protected] if you haven't done so already? This will help us track all applicants and communicate occasional updates to everyone. Thanks!

The first steps you described are already very sensible! I don't think you have to understand all of Grapher, but it will be useful for writing the proposal if you understand how a particular chart in Grapher is constructed. The SlopeChart is one of our simpler charts and probably a good starting point to understand a few key concepts (you don't have to grok it all to write the proposal). Try to understand the role of the member functions transformTable and render and think about what those two functions would do in a tree map.

I think it would be useful if you try to start restating the project and its benefits in your own words as you start drafting your proposal. Feel free to send me your drafts at any time at [email protected]

[Mithun691]

Hi Mithun Balram here,

I am a final year undergrad at IIT Bombay. I went through the task description & understood the recursive procedure of constructing a treemap from hierarchical data. I also explored a few tiling algorithms based on different heuristics & I am implementing a few of them like slice & dice, squarify & a randomized algorithm . I will complete the implementation in a couple of days. It would be great if u can suggest which tiling algorithm would work better for the kind of data OWID deals with & some benchmark datasets for which I can share the generated treemaps using my code.

An Avid OWID reader,
Mithun

[danyx23]

Hi Mithun!

Nice to hear that you are interested in contributing to GSoC with us! Could I ask you to write an email to [email protected] if you haven't done so already? This will help us track all applicants and communicate occasional updates to everyone. Thanks!

It's great that you are already thinking so much about the implementation but if you want to contribute to this as part of Google Summer of Code then the first important step is to write a proposal.

As for your concrete question - most of our data is available at the country level and we have continents as the larger grouping (other groupings are probably coming soon, like World Bank Income Regions). As such from how I think about this problem at the moment squarify seems like a good initial choice but maybe this could also be planned in a way that different algorithms could be swapped in later?

[MahmoudHamdy02]

Hello! I have already contacted the team via email, but I would like to ask a quick question.

The Grapher config API that creates treemap charts has a strict schema
Could you elaborate more on this please? What are the details of the API and what exactly needs to be implemented? Thanks.

[danyx23]

Hi @MahmoudHamdy02! This wording is a bit confusing maybe - what we meant here is that the required configuration options for the treemap will be added to the grapher config and described in the grapher config json schema. Does this make sense?

[MahmoudHamdy02]

Yes, thank you!

[GermaVinsmoke]

Hey @larsyencken is this available to work on now? Not as a part of GSoC but as an open project without any fixed timeline 😀

[danyx23]

Hi @GermaVinsmoke! Sorry for the late reply, I was gone the last two weeks and Lars was super busy. We already have a volunteer working on Treemaps but if you are still interested in contributing to Grapher then two areas that would be quite valuable and probably not too tricky to get into are these two:

• GSoC: Find and implement a new label positioning algorithm #1294 - this is about improving the labeling on scatter plots
• Tracking issue: scatterplot improvements #1168 - this is about various improvements for scatter plots

Let me know if you have any questions on this - if you'd like to get started with one of those then tag me in an comment on the corresponding issue with your idea of first steps and I'll be happy to give feedback on those and give you some pointers!

[toni-sharpe]

Read next comment

Did these get done?

I have a prototype, messy with bugs, not as styling, but some way there, sort of, I could probably make a version of these that split down root to leaves rather than an order from largest to smallest in an arrangement (which is what they are). These are just my hacking about.

Mostly I'm putting this up because I took a few of these GSOC ideas as personal challenges before I really engaged with this team - none seemed to be completed, just mentioned - and now I may be employed soon so I'd like to leave them available at least and help implement too, I'll have some time once employed.

I have nothing but boxes that add up to 100%.

I didn't realise the tree structure was maintained.

Yeah, so, tree maps have a tree structure

   

   

   

[toni-sharpe]

Not urgent

Yes, if you took the map; via cartogramm style, for population density/projection issues; you could fold it up like Pangaea. Continents, countries, states, regions, jurisdictions ... ... down to the hectare. That's a tree-map now I actually know what one is. Except I'd consider it as a/the primary source of global choropleth data.

Just the continents until the user chooses.

All built in HTML and CSS, no SVG: faster, more accessible, better data presentation (no sea, though that folds up too I think). All boxes? No weird distorted countries needing heavy calculation?

Maps waste how much space with stretched projections and sea?

[toni-sharpe]

I would like to have a go at taking some real, existing data, and making a box shaped tree graph which would act as a choropleth map, but an abstraction to the tree-graph model (as described by @larsyencken).

With some team defined constraints designed to make it useful, not just an addition to my site. Something you can use, hopefully, so I could also dig into how data becomes visual in OWID.

It would be a big task for me, with other things going on in my life it might take a while, but I'd enjoy it and it would keep me in touch with everything too. It would be better but not essential to point me at stable data sources.

I don't expect mentor-ship, I might ask questions, but infrequently out of respect for a small, busy team.

I did also flag another task I thought I was well placed to do (Dany got that one) so I'll let you decide, there's no rush at all. Though this task I'm likely to do anyway, just in my own context if it's of no interest to OWID.

[toni-sharpe]

Separately I dropped this question into UX Stack Exchange (UXSE) a few days ago

https://ux.stackexchange.com/questions/152287/has-any-more-abstract-respresentation-of-choropleth-data-been-measured-as-more-i

Not sure UXSE is what it used to be, but there might be some useful answers on that given time.