What you need to know
What is the Data Visualization section of FreeCodeCamp all about? It’s about taking sets of information and displaying them in charts and graphs in different forms. This FCC section takes an estimated 300 hours to complete if you do all of the learning modules and complete the 5 projects it sets out for you. The projects are no tutorial. All you get is a list of requirements for your project and a data set. You have to do all of the code on your own. The D3.js library is used to do all of the graphing and charting. So you’ll just be using that, vanilla JavaScript, and DOM manipulation to complete your projects.
Is it worth it?
I have mixed feelings about this one. If I were to do a search on Indeed or another job hunting site for needed skills, I might find 700-900 jobs in my area wanting JavaScript, or for WordPress around 90-120. For companies looking for D3.js knowledge, the number is between 5-10. So you really need to be the judge and decide if it’s worth it to you to go through and learn this section. I think that the first 2-3 projects that you do are good because they are simple. I was able to knock these out fairly quickly. The skills are useful for creating dashboards in your projects. For example, if you have a finance application you could chart out how much someone spent. The last 2 projects are where I spent 70% of my time. They are a choropleth map and a treemap diagram. They were drastically more complicated than the first 3 projects.
How to approach
I started by going through the module section of FCC where you can learn about D3.js. I believe they may be changing that up in the near future but either way you’ll need to spend some time getting the basics before you tackle the projects. I was able to get through basics in a few days and got started on the projects right after. I felt that I pretty much had all of the knowledge I needed for the first 3 projects. They took some time and effort and before I knew it they were done. The last 2 projects were… quite difficult and there was information that was not clear in the instructions(at least for project 4.) After a ton of headache I figured out that I needed to use a topoJSON version of D3 to get project 4 to work. There was not a substantial amount of code involved, but understanding all of the pieces necessary was a challenge. The biggest issue I had was not knowing I needed that topoJSON version, as it was not in the project requirements/user story. For project 5 there was a good amount of work involved and a few things were a little tricky, but pushing through got me to the finish line.
Here are what all 5 of my projects look like and my source code in case you hit a snafu and need to look at a line or two.
Source Code: https://github.com/ColtonHibbert/d3-gdp-bar-chart
Source Code: https://github.com/ColtonHibbert/d3-cyclist-scatterplot
Source Code: https://github.com/ColtonHibbert/d3-heat-map
Source Code: https://github.com/ColtonHibbert/d3-chloropleth-map
Source Code: https://github.com/ColtonHibbert/d3-videogame-treemap
To sum up, the D3 projects are useful however, there are not many employers looking for this skill. The first 3 projects will give you the most bang for your buck. Thanks for reading and good luck out there!