Why should I choose the D3 library over JavaScript's Document Object Model (DOM)?

In grasshopper, the D3 library is used for various tasks in the exercises. However, when I first learned JavaScript, I used the Document Object Model (DOM) for similar purpose, including selecting an element, changing properties, adding event listeners, and so on.
I’m not an experienced developer, but I think that using the DOM increases the understanding of objects, their properties and methods, etc. The syntax is a bit longer (e.g. document.getElementsByTagName("svg").fill = "blue" or document.addEventListener() and many more examples can be given), but it highlights the fundamentals more. Using D3 does reduce code, but it works at a higher level of abstraction, thus depriving the learner from the fundamentals.
So, I would like to know if there is any benefit of starting with D3 other than more abstraction and less code, and why the grasshopper team chose it over DOM manipulation.
Thanks in advance.


Hey @dabis,

Great question! There are a few different reasons we decided to teach the D3 library:

  • We wanted to introduce the idea of libraries, as they are very common when coding professionally.
  • D3 is a new(er) library with powerful functionality, that is used to create a lot of the interactive graphics you see around the web. We want to teach skills that are relevant to the current industry, and D3 seemed like a good choice.
  • D3 can create interactive graphics fairly easily, making puzzles more fun!

The DOM is obviously a big component of the web (and something we will teach — we’re working on it!), but since we haven’t covered HTML or CSS yet, we chose D3 to introduce animations.

H :slight_smile:


To get use with that, we need to use CSS and HTML to help