Link: https://codepen.io/ThePrakashKumar/pen/ExxovZL
Trying to center the things by flexbox but could not able to.
I want the height of rect with lower value to be a little taller so that I can see the hover effect.
What three requirements am I missing?
Thanks!
Edit: I am able to short out some of above problems refined the code too, but could not pass the test.
Addressing your first concern…
Trying to center the things by flexbox but could not able to.
You have:
<div>
<h1 id="title">United States GDP</h1>
</div>
both div and h1 are block-level elements, so there’s no need here to wrap the h1 heading in a div for your case.
If you give two block-level elements the same class and use the “margin” property, you can center both simultaneously as two elements in a column.
html
<div id="main">
<h1 class="main-content" >Title</h1>
<div class="main-content" ></div>
</div>
css
.main-content {
margin: auto;
}
Addressing your second concern…
I want the height of
rectwith lower value to be a little taller so that I can see the hover effect.
You have:
const yScale=d3.scaleLinear()
.domain([d3.min(dataset, (d) => d[1]), d3.max(dataset, (d) => d[1])])
.range([graphHeight, 0])
Think of the a in .domain([a, b]) as the smallest value that will be visible on your chart. That value represents the top of the first rectangle. Of course, you’d like to see more than just the top of your rectangle, so it makes sense to set the a value in your domain to be something lower than d3.min(dataset, (d) => d[1]). Since your vertical axis starts at zero, why not just set a to 0?
Addressing your last concern (more like three concerns, really)…
Take some time to play around with D3 bar charts, and come back to this project after you’re comfortable with how things work. Brad Traversy has a decent series on beginning with D3. Check out videos 5 and 6 in the series; they’re the most relevant for your situation.
Thank you so much for your help, I really appreciate your effort. I am working again on the third problem.
If you click on the Tests button it will show the errors for each test.
There is also something wrong with the data/domain/tool-tip. See screenshot (also Q4s are showing before Q1s)
