curriculum/challenges/english/blocks/data-visualization-with-d3/587d7fa7367417b2b2512bc6.md
D3 lets you add inline CSS styles on dynamic elements with the style() method.
The style() method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
selection.style('color', 'blue');
Add the style() method to the code in the editor to make all the displayed text have a font-family of verdana.
Your h2 elements should have a font-family of verdana.
const headingTwo = document.querySelector('h2');
assert.exists(headingTwo);
const fontFamily = window.getComputedStyle(headingTwo)['font-family'];
assert.strictEqual(fontFamily, 'verdana');
Your code should use the style() method.
assert.match(code, /\.style/g);
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select('body')
.selectAll('h2')
.data(dataset)
.enter()
.append('h2')
.text(d => d + ' USD');
// Add your code below this line
// Add your code above this line
</script>
</body>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select('body')
.selectAll('h2')
.data(dataset)
.enter()
.append('h2')
.text(d => d + ' USD')
.style('font-family', 'verdana');
</script>
</body>