Submitted over 1 year ago

Responsive visualisation with D3

#d3

Jake Godsall• 1,340

@jakegodsall

Preview site View code

This is a solution for...

Expenses chart component

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey everyone! 😀

I completed this challenge some time ago, but have decided to built upon it and resubmit.

In the first iteration I used a hard-coded <div> based design for the visualisation, and have now redone it completely using D3.js.

This is the first time I have worked with D3, except for a few tutorials. Hence, it would be really great if anyone with knowledge of the library could give me any feedback on how I have built the visualisation.

The visualisation code is found at ./js/visualisation.js in the accompanying repository.

Thanks again! 🥴

Community feedback

Suleman• 750

@legion40216

Posted over 1 year ago

Its pretty cool bro, there are some issue with the responsiveness on desktop mode the .grid__balance has a overflow issue, in which half of its not visible

Jake Godsall• 1,340

@jakegodsall

Posted over 1 year ago

@legion40216 Hi. I can't seem to find the overflow issue. At what viewport did you find this? Thanks

Suleman• 750

@legion40216

Posted over 1 year ago

@jakegodsall No, its good it was my bad i must have been playing with developers tools in the browser back then... Overall gj, love it...

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord