Expenses chart component using D3.js

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Ting-Huei, well done in solving this challenge, and I think this is the first solution I've seen where SVGs are used for the bars. Definitely not an easy task, but it works as a solution, and you did great 🙂

  Instead of using SVGs, have you tried changing the color of the background and giving the bars a height? That was what I did using JS with the json, and for both the bars and the tooltip, I just used regular divs for styling. To style the bar, I first created the bar as a new element using Javascript, and then I added a styling class, and I gave it a height using the data with a multiplier so that I can match the height in the bar chart.

  You can check out my solution here as well as the styling for the tooltip and bars: https://www.frontendmentor.io/solutions/responsive-bar-chart-component-with-json-data-fetching-b2LJ5eTGIX

  Well done here though, and I do think you solved this problem in a very creative way, even though it may not be the most economical way, but this is how we learn, so keep going!

  Marked as helpful

  0

  ---

  

  Ting-Huei Chen•180

  @hejkeikeiPosted over 2 years ago

  @elaineleung Thank you so much for your reply! I just found that D3.js(the library I used) can append divs too. All the bar chart example using D3 I found before was using SVG so I thought D3 can only do with SVGs.

  Your solution is awesome! I generated bars with JSON too but I love how you organized bars/tooltips with flexbox and position: absolute.

  About the economical issues you mentioned, do you mean that HTML elements like divs have better performance than SVGs? I'm not familiar with website efficiency so it would be good to know:) Thanks again!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @hejkeikei I just checked out your FEM profile and saw that you're based in Calgary; good to see another fellow Canadian here!

  About the economical issues, I was mainly referring to how many lines of code you had in the HTML and JS compared to mine as well as the effort needed to put it all together, but yes, I think it's always easier for the browser to style a div than to render an SVG!

  Just to show some stats, I ran a site performance test on Uptrends for both our sites; the size of my page was 42.8kB, and yours was 131.2 kB, and for the times recorded in various metrics, mine was also faster, which is no surprise when considering the size and also code complexity. Even just the size alone should be enough to show how things need to be trimmed down, since in production, you'd want to keep that as low as possible to keep server costs and bandwidth minimal.

  Hope this helps, and keep going! 😊

  0

  

  Ting-Huei Chen•180

  @hejkeikeiPosted over 2 years ago

  @elaineleung Yes but I'm actually new here. I'm just finished my first year at SAIT learning web development and trying to get an internship by building up my portfolio. You're right it's so nice to see people who are also from Canada:) Wow, that's a huge different! Thanks for the heads up! I will keep that in mind and try to trim my code in to lesser lines.

  1