Project 1 — The Education Effect

The Education Effect is a data-driven, visual exploration of the effect increased education levels have on the world around us.

I started this project with a hypothesis. I suspected that countries with high educational enrollment rates would also be the ones with high scores in the LGBT+ Legal Equality Index.

I have always heard that increased education leads to a more accepting population, and I was curious to see if the data would back this up.

I'm a big fan of the data-driven storytelling done by publications like The Pudding, so I I knew I wanted to try and emulate some of what they do and really tell a compelling story with my visualizations.

View it Live | Source Code | Demo Video

About the Data

For this project I ended up using three different datasets from Our World in Data.

• Primary, secondary and tertiary education enrollment and completion rates, World

  • I used the enrollment rate data here, which tracks the number of students enrolled in primary, secondary, or tertiary education programs versus the officially reported size of the age group.

• GDP per capita

  • GDP per capita tracks the total gross domestic product per person. Since it adjusts for population size it is much more useful for understanding and comparing the economic output of humans than pure GDP.

• LGBT+ Legal Equality Index, 2025

  • The LGBT+ Legal Equality Index captures to which extent LGBT+ people have the same rights as straight and cisgender people. It combines 15 individual policies, such as the legality of same-sex relationships, marriage, and gender marker changes.

Each of these datasets had countries and country codes in common and all but the LGBT+ Legal Equality Index have years for each data point.

Design Stage

Once I knew I was working with educational data and had settled on a title I began brainstorming themes and colors for the design of my project.

I tried a couple different concepts before I cam up with the idea to style it like those handwriting workbooks kids use when they are first learning to write.

I used this concept, not only for the logo, but also the color scheme and chart axes/ticks.

Once I had found my design inspiration and theme I began to prototype the layout of the story and my charts in Figma.

One idea I really liked, but just couldn't get to look right with my theme, now matter how hard I tried was using some form of book for the bars on my bar chart and histogram. I tried 2D, I tried isometric, different colors, different themes. None of it was working so I sadly gave up on the concept.

I was almost done with the design but something still felt like it was missing in the header. I had tried unsuccessfully to search for an image or illustration that fit well with my theme and colors, but everything I was finding felt too realistic or out of place.

Finally inspiration struck in the form of an origami model I had still sitting on my desk! While the model sitting on my desk was not quite right, I could fold some elementary origami models, take pictures of them and then trace them to produce some perfect illustrations of my own!

I think these illustrations turned out to be just the extra pop I was missing and really helped tie my whole theme together quite nicely.

The Visualization

The first visualization in the story shows the increase in gross enrollment rate from 1970 to 2023. It animates and auto plays when you scroll it fully into view, but also has manual playback controls if you want to pause or restart it.

Next I show a histogram that bins the number of countries with certain GDP per capita and similarly animates over time.

With both these visualizations I had few enough bars and other elements on the graph at a time I was able to fit some of the information that would normally be relegated to detail-on-demand type interactions front and center making it really easy to see and discover.

Next I allowed the reader to see a comparison of educational enrollment rates and GDP per capita through an animated scatterplot. This had all the same animation controls as before, but also included an x-axis selector that lets you chose which type of enrollment rate you wanted to see displayed.

For the scatterplots enough data was shown at once that it became necessary to start adding detail-on-demand information in tooltips when you hover over a point.

Since it was potentially a bit difficult to find or keep track of a specific country over time in the scatterplot I also included a choropleth map showing all the same educational enrollment and GDP data as before with a selector to switch between them and compare.

Finally, I included a visualization that compares the LGBT+ Legal Equality Index with educational enrollment rates. Since the LGBT+ Legal Equality Index is a somewhat new data set, only one year is currently available so this visualization does not animate over time and instead uses the most recently available educational enrollment data for each country.

In several of these visualizations there were potentially confusing data points (like percents that went above 100) so when necessary I included expandable "Understanding the data" sections that provide helpful context and explanations for the reader.

Insights

If you've already read the story (which I encourage you to do) I go more in depth into all the insights I gathered from each of the visualizations. But to sum it all up, I found that while we cannot say just from these data alone that educational enrollment is responsible for increases in GDP per capita or LGBT+ legal equality, we can reasonably conclude that countries with higher educational enrollment rates are more likely to have better results in both of these measures.

This is probably most exemplified in the scatterplot of per capita GDP by secondary enrollment rate.

While by no means conclusive, there definitely appears to be a correlation between these two measures.

Implementation Details

Other than D3, I didn't really use any 3rd party software for the visualizations and story themselves. All the design and graphics are my own. I used Figma for the UI and visualization design and Affinity Studio for my illustrations. I used Merriweather Sans and Serif by Sorkin Type as my main typefaces. The logo is set in Playwrite USA Modern which is a typeface inspired by the way writing is taught in US elementary schools.

I used Vite without a framework to build and bundle my app and a lot of the data preprocessing was done using Python and Pandas.

AI Use

I didn't really use AI at all for the D3 and web development aspect of this project, but I did use it to write the vast majority of the Python data preprocessing scripts I used.

Future Work

There are probably two main things I would like to go back and add if I had more time to work on this project.

First, I did not design some of my first visualizations with filtering and/or brushing in mind. I was really concerned that loading and processing such a large dataset would be slow and problematic and cause the page to become unresponsive and unusable.

This is a large part of why I did so much data preprocessing especially for the first few graphs. The data for each of those visualizations are as slimmed down and minimal as possible containing only the exact data points that would be needed to display in that specific visualization.

This meant that by the time I got closer to the end and was looking to implement brushing and filtering I was missing a lot of the attributes I would need to make it work. I simply ran out of time to go back and rework those visualizations and instead decided to prioritize making what I did have the best I could.

Second, although I did still manage to tell a story with my visualizations if I had more time I would have loved to add some of the annotations or scroll driven insights and callouts common in scrollytelling.

I think I rightly recognized from pretty early on that as this was my first time doing any real data visualization work, trying to also learn how to use scrollytelling libraries or techniques might be biting off more than I could chew.

If I had more time though this is something I would love to learn and explore more.

Demo Video

You can view a short demo video of my project here!