Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

A responsive bar chart using D3 and React with Typescript

#d3#react#typescript

@VincenzoMarcovecchio

Desktop design screenshot for the Expenses chart component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


D3 is very versatile but a bit hard to learn. I wanted to complete this challenge to practice a bit. I could have made the hover feature better but went for the title solution. I think I can make it work while fetching dynamic data.

Community feedback

@Razha90

Posted

  • i see your line is thick , you can make it a little this with opacity: 0.5;

  • And you must try to repair HTML issues from FronEndMentor.

<iframe src=https://www.casafraine.com/d3-responsive-bar-chart-with-react-and-typescript allow=geolocation style=width:100vw;height:100vh width=100% height=100% frameborder=0>

  • What is This :)
1

@VincenzoMarcovecchio

Posted

Thank you so much for your answer

Yeah I should fix the errors and be more concern to the designs

One question, is it asking for your position the iframe ? I totally forgot to remove it

FEM doesn't allow urls other than the ones they have whitelisted, this can be some kind of bypass? not really, but I just wanted to throw my solution in there. And also because I had d3 installed there

0

Please log in to post a comment

Log in with GitHub
Discord logo

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