Greek Gods Family Tree

An interactive illustrated family tree to educate users about Greek mythology

Created as part of a website that I programmed, this illustration series was my interpretation of what various Greek gods and goddesses might have looked like. The illustration was used to create a cohesive style for the whole site and to give a more handcrafted feel to an otherwise digital project. Inspiration for the images came from mostly neoclassical paintings and sculptures.

To view the family tree, click here: https://somlieng.github.io/Greek_gods_family_tree/

Please note that as this is, obviously, from a mythological source, there are many different family trees and different parents and children. My chart is mainly created from the text of Hesiod’s Theogony.

Tools used

Procreate
Javascript
D3.js

A herculean illustration project

In total, I created 79 illustrations for this project to represent most of the gods and goddesses in my family tree. Each illustration is positioned inside a card that tells the user what type of god it is through the color and the symbols at the top-right corner of each illustration. I have included a dozen of my favorites below.

*Hecate - Goddess of Magic and Crossroads*

*Aphrodite - Goddess of Love and Beauty*

*Apollo - God of the Sun, the Arts, and Medicine*

*Phoebe - Titanness of Bright Intellect and Prophecy*

*Helios - Titan and personification of the Sun*

*Atlas - God who carried celestial sphere*

*The Charities - Goddesses of Charm, Beauty, & Grace*

*Cerebus - Three headed dog who guarded the gates of the underworld*

*Circe - Enchantress who turned men into pigs*

A hand-coded family tree diagram using Javascript and D3.js

All elements of this webpage were coded by me. The family tree contains the following features:

Users can zoom and pan at any point in the diagram
Users can hover over a card and it will highlight all the children that god/goddess has. A tooltip will also appear.
Users can click on the card and an information modal will appear
Users can click on the legend button to learn how to read the diagram
Users can click on the controls button to learn how to use the diagram
Users can click on the reset button to redraws the tree and reset the user to the original zoom position
The entire project is responsive to changes in the window size.

A complete guide to the technological aspect of this illustration project can be found on this webpage: Interactive Family Tree Documentation