How can I improve my code here? Bar Chart D3 Visualization

Code Feedback
1

Hi guys.
I’ve just finished my first data visualization project and it would be great if you give me a feedback.
I understand that my project looks just like a copy of the FCC example but I’m making an emphasis on programming and not on a design. But I added my own colors ( and that’s it ).

Most of all I’m interesting my programming technique: is the JS code clear? how can I improve my coding style to be more understandable? what I shouldn’t do that I did here etc.

And one more question: I thought about global objects and I didn’t want to create one of them. I wrote all code within a request. Is it ok? Or it would be better create a global array ( or something) then push data in it and work with it in global scope? Inside the request I’ve tried make clear functions (and I didn’t success). But I hope somebody will explain.

Thank you all for your feedback.

Here is a link on the project: Data Visualization Projects - Visualize Data with a Bar Chart (ZeroWheel version)

2

For me what is more important than the layout of the code (which is very pretty) is comments explaining the code.
They say code should “self document” but I still prefer to write out comments explaining what things do.
This helps me when reading back the code months later.

Also, I would imagine it would take more time to layout your code like that so I would has you, how long did it take?

Regarding the global versus request, how you did it looks fine to me. However, if the API call fails for some reason you get a blank page. How do you handle the error?

3

Thank you for your feedback.
I didn’t spend a lot of time to layout the code like that. I try to follow this from the beginning.

And comments is a good suggestion. I forgot about them. Thanks.

Usually I handle errors with event listener ‘error’ and then do some. Just like that.

const xhr = new XMLHttpRequest();
xhr.addEventListener(“load”, XHRLoadHandler);
xhr.addEventListener(“error”, XHRErrorHandler);
xhr.open(“GET”, “my_Missing_file.txt”);
xhr.send();

function XHRLoadHandler(event) {
console.log(“Loaded”);
}

function XHRErrorHandler(event) {
console.log(“Error”);
}

But I haven’t included that into the project. I realized my mistake.

Thank you one more time.

1 Like