Experience Learning D3 Javascript Library: Things I picked up on
I came across D3 when I was applying to a position at a media company and was asked in a code challenge to submit a bar chart with data that is within a csv file. Unfortunately I was unable to complete the challenge but it opened my eyes to what I can learn. In my previous projects I created mostly task and list tracking web apps because I’m a stickler when it comes to being organized. So writing code to produce charts was definitely out of my wheel-house. However when trying to teach myself in a limited time frame, I picked up several things that I know I would need to expand on.
Many examples online showed how to create simple bar charts with data that is hardcoded and not from another file. In this case, I had to know how to grab the data that was on the csv file and pass it through my code in order for me to create the visual bar chart.
First within my index.html file, I needed to add the following script to the top of my program in order to have the latest D3 version.
<script src="https://d3js.org/d3.v6.min.js"></script>Another thing I picked up on was how to call the file within my program in order to get the data objects I needed. To do so I needed to save the csv file within my public folder and within my index.html file I had to reference the following:
d3.csv("program-views.csv", function(d) {
return d
}This allows my program to pull the data from the csv file and return the data itself. The way the data comes through is an array of objects and for the columns from the csv file, they are also separated out if you so choose to call on them.
As you can imagine in order to create the x and y axis for your chart, you must define both axis with a label and the data you want to show from the csv file. This goes the same with setting up the scale of the chart, the width of the individual bars in the bar chart, and the color to help distinguish one bar from another. In my case, the type of bar chart I had to created would’ve been a grouped bar chart. This is because the employer wanted to show the distinct demographic types from each city based on genre of shows.
The last main thing I picked up on was the importance of svg (scalable vector graphics). This is where the chart would be contained on the page and defining the margin, width, and height.
Although I didn’t succeed in completing my task, I am now more than ever intrigued and excited to learn this new tool at my disposal. I currently just enrolled in a coursera D3 course that will help develop my understanding and skills to be able to create all the charts I can imagine!
P.S If you would like to look learn more about D3, check out the link below:
