Day 48: Practicing D3

Dan Esmail - 2/17/2023

Intro

I have been taking the time to try and play with D3 and learn by doing. I've got a simple bar chart to show up and that feeling is amazing! Now there is a lot that I still have to do with D3 to get anywhere but let's talk about today and save the rest for tomorrow.

I have been working with a website tutorial to get a basic idea of how to make graphs. It walks you through how to make scales and how to make actually work with the SVG. There is still a bunch of things that I have to learn and play with to understand it. I'll link the website below for everyone else to follow too. What I have learned from the website is each variable and call you to make with D3 is slowly building out the graph. I won't be able to show my code since I'm writing this after the fact of changing everything.

Building out the graph

First off to make the graph I had to set the variables for height and width. This will give me the option to change both later on if I need to. After that, I had to build the main body of the page which was the SVG. Next was creating variables to make a scale for my axies later. This will make the scale and be able to transform all the information in the array to the scale values. After the scale was done I could work on the bar. Each bar is a G element and they are appended to the SVG. As you can see everything builds on everything else to create the graph.



Day 1

Day 1