The SPerm Bank Gene Pool

2020 in react and 2o23 in Observable, Personal project

The IDea

Back in 2019, I went down a deep, deep wormhole looking into what I was calling the Sperm Bank Gene Pool. Many sperm banks offer free browsing of their sperm donor catalogs, so I made several free accounts for the five banks with the largest number of donors in their catalogs.

This was before COVID, before I finished my Masters degree in Information Design, before my wife and I were married, and before we took any steps towards growing our family that was distinctly not "the old fashioned way."

I did the project in vanilla JS back then and it still lives in an old github repo of mine (gah, forgive my poorly aged design choices!) but nearly 4 years have past since then and I wanted to update it.

Not only do I have new skills, but together we have a kid now! I'm making this notebook because I wanted to revisit this tool to see how my data viz skills have improved, and to see what it felt like to be on the other side of such an important decision.

Read the Full Story on Observable

Design Principles

My visualization idea is based on the idea of a pool (or petri dish?) with all the sperm options swimming around that I could sort in ways that would help me narrow down my choices. This meant creating a force-directed diagram, or maybe even a beeswarm chart.

Like all good product design for data viz, I followed the Information Seeking Mantra:

Overview First
Zoom and Filter
Details on Demand

Overview First

Showing an overview first worked best by creating a force-directed diagram, or maybe even a beeswarm chart in which:

each of the donors would be a single dot,
radius, color, and positions scaled to various dimensions
dynamic axes to reshuffle and reorganize the dots.

Try it out for yourself!

Sperm Donors Grouped by Quality

Zoom

While it’s certainly possible to zoom in on each cluster in the beeswarm, there are other ways to zoom too.

I created a “zoom” on each cluster by breaking each cluster of dots into its components via a sorted bar chart.

Filter

What if someone wanted to filter for very specific criteria: say, a blue-eyed Aquarius? That should be possible too, even though those make up only 1.35% of the gene pool in the sperm bank catalogs.

Try the filters for yourself and see how many options you’ve got based on your own criteria!

Details on Demand

In my dream data product, I'd be able to click on a dot and see the details of that dot. But I need more practice with coding views in Observable to be able to do that, so instead let's just take a peek at what details we've got about any given donor.

Key Takeaways

You of course may be wondering: Ellen, you and your wife have a kid now so...

Which sperm donor did you pick?
Why did you pick them?
Did the tool help?

To be honest, that's all very personal, so I'm not going to tell you that. Sorry!

¯\_(ツ)_/¯

But I will share two things.

One is my philosophy about choosing how to grow your family: all that matters is that it's YOUR choice and that you can defend your choice to yourself, your partner, and your kids. That's it. Families look all sorts of ways, and you get to decide what is important to you and your family and nobody else gets to say shit about it.

And the other is: let me show off my absolutely incredible, adorable, perfect kid with whom I share no genetic material but love more than anything and anyone else in this entire universe.