Welp, d3 did indeed turn out to have a steep learning curve. This isn’t a normal package that you can just grab, use, and throw away (though I’m a JavaScript novice, as well). Luckily, I got my hands on an amazing, lifesaving, should-be-the-offical-documentation level book. Get this!
My impression so far is that the essential operations of d3 are selection, grouping, chaining attributes / appending, and aligning data with image components (with whatever importing, creation, trimming, etc. of images or data that might be necessary).
This is my first js widget too 🙂 So, let’s take a look at the js and I’ll explain what I did.
The whole thing is going to be a heart made out of colored bars (this was a birthday card for my partner) which change color and spell out “HAPPY BIRTHDAY” when you hover over each bar in turn.
The first thing you see looking in the js is the data that we will be associating with the widget. d3 stands for “data-driven documents”. I chose to make an array of arrays which each contain the information for one bar. a height factor, a width factor, and a letter that will be visible when we hover our cursor over the associated element.
I think of working in d3 as though you are in a jungle swinging vine to vine and adding leaves onto the vines as you go. First, to create the canvas that we are working on, we grab on to the body tag of the larger HTML document and append an SVG block. We specify the dimensions we want for it by appending those dimensions as attributes.
Now, here’s an example of the weird part. We grab on to the SVG canvas we just made (technically, it’s actually a window into the underlying canvas, but for our purposes it’s the canvas itself) and “select all the rectangles in it”. As of now, there are no rectangles in it, but we do it anyway. So we are holding on to an empty, null element. We associate the dataset we talked about earlier to this “set of rectangles” that doesn’t have anything in it. Now, when we use the .enter() method, the magic happens. This adjusts the set of rectangles to contain an appropriate number of rectangles for all of the data elements (those inner arrays that “are” the individual bars), so now we do have rectangles! (There is a way to do the opposite in d3 too, where you can trim the object set or trim the data set to match eachother.)
From now on, everything we do in this little “stanza” of code (known as method chaining), we are doing to the individual bars, all at once. We append all the attributes we want, referring to the contents of the data at will when necessary. Color, size, behavior. An interesting moment is where we append a class as an attribute. That class is “bar”, and check out what that means in the CSS tab. “Bar” means that it changes color to pink when you hover over it. The title and text lines use the letters (“H”, “A”, etc. in “HAPPY BIRTHDAY”) from the bar-associated arrays in our associated data to create tooltips when you hover over each bar.
I’m really happy about this! It’s so stimulating and dopamineurgic to create something that actually interacts with you, and d3 gives you such fine control over every aspect. I can’t wait to use this for my networks.
PS the FreeCodeCamp course in d3 is so good. This is a pretty niche-community package so if you’re interested, please take my advice and bookmark this link and get the book I showed above (I might take some pictures inside the book later).