Data Visualization with D3 - Change the Margin spacing of a Bar Chart

Tell us what’s happening:
How do I add a 2px margin between the bars on the graph?

  **Your code so far**
<style>
.bar {
  width: 25px;
  height: 100px;
  /* Add your code below this line */

  
  /* Add your 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 * 10 + "px"))
    .style("margin", (d) => (d + 2 "px"))
    // Change this line
</script>
</body>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44

Challenge: Data Visualization with D3 - Change the Presentation of a Bar Chart

Link to the challenge:

Well after a few more moments of trying I figured it out! For anyone that’s stuck here’s my bit:

.style(“margin”, (d) => 2);

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.