D3 style with a change

JavaScript
#1

Tell us what’s happening:
i just did this not 5min ago on the previous challenge and it worked. now even following the solution, its not working

Your code so far


<style>
 .bar {
   width: 25px;
   height: 100px;
   /* Only change code below this line */
 margin: 2px;
.style("height", (d) => (d * 10 + "px"))
   
   /* Only change code above this line */
   display: inline-block;
   background-color: blue;
 }
</style>
<body>
 <script>
   const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

   d3.select("body").selectAll("div")
     .data(dataset)
     .enter()
     .append("div")
     .attr("class", "bar")
     .style("height", (d) => (d + "px"))   <---- (offending code)
 </script>
</body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:85.0) Gecko/20100101 Firefox/85.0.

Challenge: Change the Presentation of a Bar Chart

Link to the challenge:

#2

Look at the error message that is generated when you run the tests. It is telling you exactly where the error is.

Oh, I see, you added that for our sake, that’s not actually what you had when you ran the test. My bad.

But you do have some errant code in the style section you need to get rid of.

Also, I don’t see where you are increasing the height of each bar by 10?

#3

d*10 was supposed to increase the height, but its not.

#4

And where is that in your code?

#5

its where i put the ‘note’

#6

Not in the code you posted above.

.style("height", (d) => (d + "px"))   <---- (offending code)

I’ll stop playing games here and just tell you :slight_smile: You have the correct code but you put it in the wrong place (specifically, the <style> tag).

#7

yeah - i just figured that out. the directions say ‘only change in this area’ - which is why i didn’t look at the other code. i changed it down there out of curiosity!

thanks

#8

I agree, that is a little confusing to have the comments in the style section say “Only change code below/above this line” and then not have these same comments below in the script section.