---
id: 587d7fa8367417b2b2512bca
title: Change the Presentation of a Bar Chart
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: Alterar a apresentação de um gráfico de barras
---
## Description
O último desafio criou um gráfico de barras, mas há algumas alterações de formatação que podem melhorá-lo: 1) Adicione espaço entre cada barra para separá-las visualmente, o que é feito adicionando uma margem ao CSS para a classe de bar
2) Aumentar a altura das barras para melhor mostrar a diferença de valores, o que é feito multiplicando o valor por um número para dimensionar a altura
## Instructions
Primeiro, adicione uma margin
de 2px à classe de bar
na tag de style
. Em seguida, altere a função de retorno de chamada no método style()
para que ele retorne um valor 10 vezes o valor dos dados originais (mais o "px"). Nota
Multiplicar cada ponto de dados pela mesma constante apenas altera a escala. É como aumentar o zoom e isso não altera o significado dos dados subjacentes.
## Tests
```yml
tests:
- text: O primeiro div
deve ter uma height
de 120 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(0).css("height") == "120px" && $("div").eq(0).css("margin-right") == "2px", "The first div
should have a height
of 120 pixels and a margin
of 2 pixels.");'
- text: O segundo div
deve ter uma height
de 310 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(1).css("height") == "310px" && $("div").eq(1).css("margin-right") == "2px", "The second div
should have a height
of 310 pixels and a margin
of 2 pixels.");'
- text: O terceiro div
deve ter uma height
de 220 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(2).css("height") == "220px" && $("div").eq(2).css("margin-right") == "2px", "The third div
should have a height
of 220 pixels and a margin
of 2 pixels.");'
- text: O quarto div
deve ter uma height
de 170 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(3).css("height") == "170px" && $("div").eq(3).css("margin-right") == "2px", "The fourth div
should have a height
of 170 pixels and a margin
of 2 pixels.");'
- text: O quinto div
deve ter uma height
de 250 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(4).css("height") == "250px" && $("div").eq(4).css("margin-right") == "2px", "The fifth div
should have a height
of 250 pixels and a margin
of 2 pixels.");'
- text: O sexto div
deve ter uma height
de 180 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(5).css("height") == "180px" && $("div").eq(5).css("margin-right") == "2px", "The sixth div
should have a height
of 180 pixels and a margin
of 2 pixels.");'
- text: O sétimo div
deve ter uma height
de 290 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(6).css("height") == "290px" && $("div").eq(6).css("margin-right") == "2px", "The seventh div
should have a height
of 290 pixels and a margin
of 2 pixels.");'
- text: O oitavo div
deve ter uma height
de 140 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(7).css("height") == "140px" && $("div").eq(7).css("margin-right") == "2px", "The eighth div
should have a height
of 140 pixels and a margin
of 2 pixels.");'
- text: O nono div
deve ter uma height
de 90 pixels e uma margin
de 2 pixels.
testString: 'assert($("div").eq(8).css("height") == "90px" && $("div").eq(8).css("margin-right") == "2px", "The ninth div
should have a height
of 90 pixels and a margin
of 2 pixels.");'
```
## Challenge Seed
## Solution
```js
// solution required
```