--description--

The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.

In SVG, a rect shape is colored with the fill attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.

--instructions--

Add an attr() method to set the fill of all the bars to the color navy.

--hints--

The bars should all have a fill color of navy.

const rect = document.querySelector('rect');
assert.exists(rect); 
const fill = window.getComputedStyle(rect)['fill'];
assert.strictEqual(fill, 'rgb(0, 0, 128)');

--seed--

--seed-contents--

html

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    const w = 500;
    const h = 100;

    const svg = d3
      .select('body')
      .append('svg')
      .attr('width', w)
      .attr('height', h);

    svg
      .selectAll('rect')
      .data(dataset)
      .enter()
      .append('rect')
      .attr('x', (d, i) => i * 30)
      .attr('y', (d, i) => h - 3 * d)
      .attr('width', 25)
      .attr('height', (d, i) => 3 * d);
    // Add your code below this line



    // Add your code above this line
  </script>
</body>

--solutions--