GSoC: Image sequences in Grapher

[larsyencken]

DIFFICULTY: EASY, SIZE: 175 HOURS

Overview

The Our World In Data website uses two kinds of visualisations: interactive visualisations using our custom Grapher tool; and static images that are created in Adobe illustrator or similar and embedded in the sites as PNG files. We will always need to create bespoke static images for visualisations that are very unusual or are heavily annotated; but it would be very useful if static images could be just another content type in the Grapher tool. Some of the benefits of doing this would be that static charts would gain the additional tabs that all Grapher charts have with the following functions:

• Table - to see the underlying data when available in table format
• Sources - to explain where the data came from, how the data was collected and what caveats should be understood
• Download - to download the image, ideally as either PNG or SVG when available
• Share - to share it to social media etc with a consistent link like all our other charts get as well

Additionally, we would like the ability to show several static images within Grapher in a sort of slideshow (i.e. a linear progression of images that users can navigate). This would allow authors to e.g. create different versions of a chart that highlight different aspects.

Required skills

• Javascript
• Typescript (bonus)
• React (bonus)

Expected outcomes

• A design proposal for displaying slideshows of static images within the bounds of a Grapher chart is developed and accepted
• Slideshows of static images are implemented in the Grapher visualisation engine
• The API for how to create slideshows is documented for others to use
• The Grapher admin supports interactive creation of slideshow images
• The OWID build system can render these chart types

Potential mentors

• @danyx23

Feel free to ask any questions you like below!

[pranavich18]

Hey! @danyx23 I like this project idea and would like to contribute to this project for GSoC'22. Can you please guide me on how can I start working on this project and the proposal for the same?

[danyx23]

Hi @pranavich18!

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

A good start would be for you to start sketching out the core of your proposal, i.e. to understand more about how our Grapher works and what this project would add. If you have any specific questions of understanding please feel free to ask here. When you have a first sketch of the proposal text please send it to me at daniel.bachler@ourworldindata.org and I'll give you feedback on the draft.

It is probably helpful if you follow our documentation and are able to compile Grapher and run the tests on your machine.

[waiting4U0]

@danyx23, how are you today? I'm Yuting Zeng, a third-year undergraduate student at Southwest Petroleum University studying Information Management and Information Systems. I've been programming for around two years. I prefer visuals and charts because they help people understand and accept information more easily. I'm highly interested in data-related and open-source projects, and I'd want to contribute some code to this project.
As a team leader, my team and I have developed an app for medical IoT applications using uni-app. (uni-app is a Vue-based unified framework for designing applets, H5, and apps.) Front-end visualization and graphical presentation of some vital data are implemented in the app. I've also used uni-app to create the front-end for a WeChat applet for a student group. I've been introduced to data analysis and data mining this year. I've used Python for data visualization and other data pre-processing of large data to train machine learning classification models using CCL signal data from many oil and gas wells, and I'm trying to create a paper and publish it.
I feel I possess the necessary qualifications to work on this project. I am a quick learner who is always looking for fresh information.
I really want to help with this GSoC'22 project, however, this is my first foray into the open-source world. Could you kindly advise me on how to get started on this project and the proposal for it?

[danyx23]

Hi @waiting4U0!

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

A good start would be for you to start sketching out the core of your proposal, i.e. to understand more about how our Grapher works and what this project would add. If you have any specific questions of understanding please feel free to ask here. When you have a first sketch of the proposal text please send it to me at daniel.bachler@ourworldindata.org and I'll give you feedback on the draft.

It is probably helpful if you follow our documentation and are able to compile Grapher and run the tests on your machine.

[Parth-Jain-2002]

Hello @danyx23!! I am Parth Jain and am a second year engineering student at IIT Ropar. I have read and understood the project proposal and what are the expected outcomes needed. Also I have been working with React and Javascript for last 1.5 years and made some interesting projects using that. I am very excited to be working on this idea in the upcoming summer. I would be grateful if you could guide me on how to begin exploring this idea in full depth and how to write proposal for the same?

[danyx23]

Hi @Parth-Jain-2002! Please have a look at our proposal writing guide: #1318. Write a draft proposal and then send it to me via email and I'll give you feedback: daniel.bachler@ourworldindata.org. Looking forward to your proposal!

[Yunzez]

@danyx23 I came across this project on GSoC and I hope I'm not too late. I'm Yunze Zhao, a student in University of Washington focusing on Informatics and Geography: Data Science; I have used the Our World in Data website several times for research and school projects I was impressed by the data you guys offer and the visualizations provided. I have done a few front-end projects using react.js; As a Geography student, I also do quite a bit of visualization using QGIS, Python, and d3 js and I really hope I could contribute to your work!
I think adding the static image editor is a great idea since it gives more flexibility to do more annotations and spread around.
But I do have a few questions toward this projects:
I know that the grapher itself has the tabs that are mentioned in the descriptions. But for static image, will we have the data source for user to download besides the image?
Besides, when user chooses to download, if there are a few images generated and are being presented using the "slide show", how are we gonna present the image to users? As a screenshot of the slideshow at the moment, or a few images seperately?
And lastly :0, I hope I'm not too late and if I'm not, plsss tell me what to do so I can still contribute. :)

[Ziw127]

Hi, Yunze, I am also a student from UW!
Hope that we could talk about this project and ideas together!

[danyx23]

Hi Yunzez!

I think we will sometimes have data to download for static charts and sometimes not (in the latter case the table tab would either not be shown or show a brief note about this data not being available). Source information we would probably have almost always but it's maybe better not to make it mandatory to make it easier to backport our existing static images.

The question regarding the download with multiple images is an interesting one. Feel free to suggest what you think is most useful but such a detail could also change during the project implementation. Both allowing to download a zip file or just giving several download links, one for each image could all work well.

You're not too late :). The deadline to submit a proposal to GSoC on the official website is April 19 (not sure about the time/timezone) if I remember correctly. As we wrote in our proposal writing guidance document, I can't guarantee that I can still give feedback now but feel free to try and send me a draft and I can see if I can still fit it in.

[Yunzez]

@Ziw127
Hi!! Glad to see a schoolmate here lol! Hopefully we can work on it together? My email is yunzez@uw.edu

[Yunzez]

@danyx23
Thank you for your response!
Regarding the pictures downloading option, if I place myself as the user, and I have multiple images stacked together, I'm probably trying to show the change. I think one of the good ways to do this is to give the user all the options? The user can either download the screenshot of the current image with the scroller at the location the user preferred, or multiple images in a zip, or I think we can also offer a choice to let the user download a stacked image with certain opacities so the images in the back are also visible?

And good to know I'm still on time! I will come up with a proposal and contact you soon! Thank you for the response again :) Thrilled to contribute!

[danyx23]

Yes, giving users all the options also sounds like a great plan. I'm looking forward to your proposal :)

[Ziw127]

Hi, @danyx23, I am really interested in this project and hope it's not late to communicate with you!
My name is Ziwei Tao, a Master student in University of Washington and my major is Computer Engineering. I had projects and work experience related to data management (using MySQL, PostgreSQL, MongoDB) and data visualization for 2 years. Also, I am familiar with web programming using JavaScript, Node.js and Python.
I have some questions about the outcome before I move to a proposal draft.

1. For the Slideshow creation, how do we get the static images, are this static images should be obtained through Grapher Library because I checked that this library is used for interactive data visualization ? Currently, static images that are created in Adobe illustrator.
2. For the final part of expected outcome, does this means the OWID build system could create different chart types like scatter plot, line chart, slope chart and so on for the static charts in Slideshow?
   Hope for you response!

[danyx23]

Hi @Ziw127!

1. Yes this is what is new about this project - so far Grapher was always creating svg shapes based on the data interactively. Now as part of this project charts would be created in other programs and saved as png images or simliar. These would then be uploaded somewhere and Grapher configured in the admin UI to select which image(s) to show. Optionally, the upload of the images in the Admin UI could be part of this proposal.
2. No, the Grapher would not be able to create any other views by default if images are uploaded. One exception is that if the data is uploaded then it could be feasible to show both static charts and some other, interactive chart as per usual - but I would say this combination does not have to be part of the propsal yet or could be a stretch goal.

[Ziw127]

Thank you so much for your reply!