The Greatness of Graphs

When I first learned about the graph data structure, I was confused that it looked like this:

Image from Virgina Tech

When I was used to graphs that looked like this:

Thank you for the image Ms. Parker!

According to the dictionary.com, a graph is a diagram representing a system of connections or interrelations among two or more things by a number of distinctive dots, lines, bars, etc.

In computer science, a graph is simply a collection of nodes (also called vertices) connected by edges. Does this sound similar to a data structure we already know? If you thought of a tree, you are correct! Trees are a type of graph, but with stricter rules! Graphs don’t need a root node, and rather than nodes that are connected by child-parent relationships, connected nodes in a graph are called siblings.

So where can we find graphs in our everyday developer lives? Webpack is an incredibly useful tool for front-end developers who want to use require and module.exports (or import and export in ES2015!) to connect files together. Webpack creates a graph whose edges link dependencies together in order to create one file, bundle.js, that you can plug into your index.html file. Easy peasy!

Here’s an example! Let’s say I want to create a Mammal object and use prototypal inheritance to link it to a dog object. I’ll export my Mammal and import it into my Dog file.

Notice I’m export my Dog component, so that I can import it and create a new Dachshund object with a prototypal link to Dog!

And finally, my dog Tulsi who is a Chiweenie should definitely have a link to the dachshund object. So I’ll import Dachshund into the Tulsi file.

Webpack will now create a graph, starting at index.js, that represents how these files connect to one another.

A dog-pendency graph

And now you know the greatness of graphs!

Here is a cool tool from Webpack’s Github page that allows you to create a dependency graph of your Webpack project! For bigger projects, the results are pretty trippy. Here is a graph from one of my recent projects which you can visit at bkstreetview.com.

A dependency graph of one of my recent projects!

Happy graph making!