D3 Bar Chart - Project Feedback, and D3 Comments --- Is this widespread in the industry?

Project Feedback
#1

Hi campers,

After climbing the “React” mountain, it is time to conquer the next “mountain”, the notorious D3.js. If a computer-averse person like me can do it, you can too.

Please see my D3 Bar Chart.

Some questions and comments:

  1. Mismatches between FCC tutorials and D3 reality: The FCC tutorial into D3 is pretty great, but please think of it as an intro. There are a lot of things not covered directly, namely d3.json() (to drag in data from API), .scaleTime( ), ticks( ), nice( ) and implementing tooltips via “div” rather than “title”. Is there a reason the tutorial is more like an intro? Or is it b/c of point 2…

  2. Relatively frequent D3.js Version Updates My research indicates that D3 is constantly going through updates, moving from v4, v5, v6 pretty quickly (adopted September 2020). Why did the developers think that this is a good idea?? Please really make sure that you are using the correct version to implement the code, b/c the syntax changes quite a bit (specifically, event Listeners). See D3 6.0 migration guide: https://observablehq.com/@d3/d3v6-migration-guide#pointer. Some of the forum information on D3 pertains ONLY to v4/v5/v6, so just be careful.

image
image672×846 59.2 KB

  1. I have to say, converting the dates, first to JS dates, and then to “Q1…2…3…4” was an interesting regex exercise, which I feel like you have to figure out on your own.

  2. Initial Thoughts D3 is hyper-specific about the positioning of items, and it is unlike anything in the earlier parts of FCC (not exactly JS, not exactly a framework). It is a lot like drawing in AutoCAD but with text only. While I can see how it is highly customizable, I’m wondering how practical it is? Do software devs ever come across D3 a lot in their work, or is it more like a super niche skillset?

2 Likes
#2

Congratulations.

I assume it has to do with how wide the library is and probably the need to force learners to read the documentation. It is impossible to complete the projects without reading the documentation. D3 is really changing fast. Most of the tutorials you can find are actually for v3 yet about three major releases have been made since that version. Regarding the popularity of D3, I don’t think it is really that popular and even the learning curve is making thing worse.

1 Like
#3

Your first d3 project looks great. All tests pass! Looking at your code I just wanted to suggest the extent method that gets both - min and max. Mine is on github and minimal, i.e. I did not fiddle with tooltip coordinates, just did enough to pass tests. Link to gihub pages in about. https://github.com/missKatiaPunter/bar-chart-1

1 Like
#4

Thanks! Didn’t know about extent, seems very helpful!!

#5