A graph is a data structure consisting of a collection of nodes with edges. A graph can be directed or undirected.

A directed graph contains sides that function like a one-way street. Edges flow from one node to another.

For example, you might have a chart of characters and movies in which each person can have multiple favorites, but the movies have no favorites.

An undirected graph contains edges of two-way flow, similar to a two-way road, with traffic in both directions.

For example, you might have a pet chart where each pet has an owner, and each owner has a pet.

Note :(below) two-way arrows represent an edge, but I drew two arrows for clarity.

There is no clear hierarchy of information in the graph **.


We’re going to create a chart of people and ice cream flavors. This would be a digraph, because people can like certain flavors, but the flavors don’t like people.

We will create three classes:

  • PersonNode
  • IceCreamFlavorNode
  • Graph


The PersonNode class will take one argument: a person’s name. This will be its identifier.

The PersonNode constructor will contain two attributes:

  • name: Unique identifier
  • favoriteFlavors: an array of IceCreamFlavorNodes

Additionally, the PersonNode class contains a method: addFlavor. This passes in a parameter, an IceCreamFlavorNode object, and adds it to the array favoriteFlavors.

Class definitions are as follows:

class PersonNode {
  constructor(name) {
    this.name = name;
    this.favoriteFlavors = [];

  addFlavor(flavor) {
    this.favoriteFlavors.push(flavor); }}Copy the code


The IceCreamFlavorNode class will pass in one parameter: ice cream flavor. This will be its identifier.

The class doesn’t need to contain any methods because it is an undirected graph, and the data flows from Person to flavors, but there is no backflow.

This class is defined as follows:

class IceCreamFlavorNode {
 constructor(flavor) {
   this.flavor = flavor; }}Copy the code


The Graph class takes no arguments, but its constructor will contain three attributes:

  • peopleNodes: Character node array.
  • iceCreamFlavorNodes: Array of ice cream flavor nodes.
  • edges: containsPersonNodesandIceCreamFlavorNodesArray between edges.

The Graph class will contain six methods:

  • addPersonNode(name): takes a parameter, a person’s name, and creates one with that namePersonNodeObject and push it topeopleNodesThe array.
  • addIceCreamFlavorNode(flavor): Take a parameter, an ice cream flavor, and create one with that flavorIceCreamFlavorNodeObject and push it toiceCreamFlavorNodesIn the array.
  • getPerson(name): takes a parameter, a person’s name, and returns that person’s node.
  • getFlavor(flavor): Accepts an argument, an ice cream flavor, and returns the flavor node.
  • addEdge(personName, flavorName): Accepts two parameters, a person’s name and an ice cream flavor, retrieves two nodes that willflavorAdd to humanfavoriteFlavorsArray and push edges toedgeThe array.
  • print(): Simply print outpeopleNodesEach person in the array, along with their favorite ice cream flavor.

Class definitions are as follows:

class Graph {
  constructor() {
    this.peopleNodes = [];
    this.iceCreamFlavorNodes = [];
    this.edges = [];

  addPersonNode(name) {
    this.peopleNodes.push(new PersonNode(name));

  addIceCreamFlavorNode(flavor) {
    this.iceCreamFlavorNodes.push(new IceCreamFlavorNode(flavor));

  getPerson(name) {
    return this.peopleNodes.find(person= > person.name === name);

  getFlavor(flavor) {
    return this.iceCreamFlavorNodes.find(flavor= > flavor === flavor);

  addEdge(personName, flavorName) {
    const person = this.getPerson(personName);
    const flavor = this.getFlavor(flavorName);
    this.edges.push(`${personName} - ${flavorName}`);

  print() {
    return this.peopleNodes.map(({ name, favoriteFlavors }) = > {
      return `${name}= >${favoriteFlavors.map(flavor => `${flavor.flavor}, `).join(' ')}`;
    }).join('\n')}}Copy the code

Virtual data

Now that we have three classes, we can add some data and test them:

const graph = new Graph(true);
graph.addIceCreamFlavorNode('Chocolate Chip');
graph.addIceCreamFlavorNode('Cookie Dough');

graph.addEdge('Emma'.'Chocolate Chip');
graph.addEdge('Emma'.'Cookie Dough');
graph.addEdge('Kai'.'Cookie Dough');
graph.addEdge('Kai'.'Chocolate Chip');
graph.addEdge('Maranda'.'Cookie Dough');

Copy the code

Here’s what our digraph looks like:

If you want to see the full code, check it out on my CodePen.

The latter

Original text: dev. To/emmawedekin…

First article: github.com/reng99/blog…

More: github.com/reng99/blog…