34:["$","title",null,{"children":"Exercício - Gráfico com escala e rótulos | carolx | Observable"}] 3c:T509,# Exercício - Gráfico com escala e rótulos Nesse exercício, você irá retornar ao gráfico de barras que fizemos na primeira aula, mas agora incluindo escala vertical e os rótulos. Para quem entendeu a dinâmica do html e css, fazer um gráfico que possa variar a altura e largura não tem muitos segredos. Para este exercício, você vai utilizar: - display: flex - display: grid - unidades relativas - seletores de css **ENTREGA:** **16/3 até 18h** - Envie o link do seu exercício no ObservableHQ para o Blackboard com um parágrafo avaliando o exercício --------------- **IMPORTANTE** - Lembre-se de clicar em "FORK" no topo da página para duplicar o exercício na sua própria conta, antes de começar - Para visualizar as mudanças que fizer nos blocos de código, use as teclas *shift + enter* ou clique no pequeno botão de play --------------- Caso precise relembrar, volte aos notebooks que fizemos anteriormente: - [Posicionamento - parte 1](https://observablehq.com/@845b73f2d04459f8/propriedade-display-parte-1) - [Posicionamento - parte 2](https://observablehq.com/@845b73f2d04459f8/posicionamento-em-css-parte-2) **Cheatsheets:** - [Grid](https://grid.malven.co/) - [Flex](https://codepen.io/) - [Seletores CSS](https://frontend30.com/css-selectors-cheatsheet/)3d:T51d,### Passo a passo: A estrutura básica está criada em html. Vamos definir as dimensões dessa esstrutura de modo que o gráfico se adapte a larguras menores de tela, mas não passe de 700px em telas maiores. **Para isso, no CSS:** - Defina para a div com classe "caixa" uma largura de 100%, e largura máxima de 700px (largura máxima é definida usando a propriedade *max-width*) - Defina para a div com classe "caixa" uma altura fixa de 470px; - Também para "caixa", defina a propriedade *display* para que use o método *grid*, e a propriedade *grid-template-rows* para que o grid tenha 1 coluna e 4 linhas. Dicas: - Usar a marcação *auto* faz com que a altura da linha acompanhe o conteúdo; - No grid-template-rows, as linhas 1, 2 e 4 devem ter altura automática (*auto*) e a linha 3 deve tomar todo o resto do espaço disponível (a unidade *1fr* permite isso); - Também para "caixa", defina a propriedade *border* de 1px, *solid*, com a cor *#999*. - Todas as divs que sejam filhas diretas de "caixa" devem ter um padding para criar espaçamentos. (*15px* top e bottom, e *30px* nas laterais) - As divs com a classe "titulo" e "fonte" devem ter um fundo (*background-color*) da cor cinza (*#efefef*) - A div do título deve ter *font-size* de *24px*; e o peso (font-weight) deve ser *bold*;3e:T993,### Passo a passo: Vamos começar definindo um grid para posicionar os elementos do gráfico. O grid deverá ter 2 linhas e duas colunas: ![grafico-parte-2.jpeg](${await FileAttachment("grafico-parte-2.jpeg").url()}) - Crie uma regra de css para o elemento "grafico", onde precisamos definir: - a propriedade *display* com o valor *grid* - as propriedades *grid-template-columns* e *grid-template-rows* com os tamanhos de linhas e colunas desejadas. - Os tamanhos das colunas são *30px* e *1fr* (a segunda coluna preenche todo o restante da área disponível). - Os tamanhos das linhas são *1fr* e *auto* (a segunda linha terá o tamanho do texto que houver nos rótulos, e a primeira se esticará para preencher o resto) - Crie uma regra de css para a "escala". Nessa regra, precisamos definir: - que o modo de *display* será *flex*, na direção vertical (*flex-direction: column;*) - que o elemento "escala" terá fonte menor (*font-size: 10px*) - que haverá uma borda na lateral direita para definir o eixo vertical (*border-right: 1px solid #333;*) - Agora precisamos definir o comportamento de cada marca. Crie uma regra de css para selecioná-lass (`.nome-da-classe > nome-da-tag`). Para os elementos das marcas, defina: - Que os elementos devem crescer proporcionalmente para preencher o elemento pai (*flex-grow: 1;*) - Que o texto da marca deve se alinhar à direita (*text-align: right;*) Se você aplicou corretamente os estilos até aqui, já vai ver as marcas numéricas distribuídas igualmente no eixo vertical, e uma linha delimitando o eixo. Mas estão faltando os tracinhos marcando a posição de cada número. Para isso, vamos usar um truque de css, que cria pseudo-elementos que não foram definidos no html. Para finalizar a escala: - No bloco de css, há uma regra que não está válida, pois está comentada. Descomente todo esse bloco, apagando os caracteres `/*` e `*/` que estão em volta dessa regra - `/* .escala > div:after { } */` - Estamos quase lá, falta só um detalhe. Os números de cada marca não estão alinhados com os tracinhos. Isto se deve à altura da linha de texto. Para corrigir, coloque a propriedade *line-height: 0px;* na regra para as divs que contêm os números Pronto! Temos uma escala montada. E como usamos medidas relativas para a altura da linha onde está a escala, caso queiramos aumentar ou reduzir a altura do gráfico, a escala continuará correta.3f:Tcd9,### Passo a passo: Vamos começar definindo o posicionamento dos blocos que contêm as barras e os rótulos. - Crie uma regra de CSS para selecionar tanto o bloco "barras" quanto o bloco "rotulos". Queremos que ambos se empilhem em linha, na horizontal, sem nunca passar para uma próxima linha. Logo, vamos usar *display: flex;* com *flex-direction: row;* - Ainda para os dois blocos, defina uma largura de 100% e altura de 100% da célula do grid que cada um ocupa; Repare que os rótulos não estão na coluna correta. Isso é porque o grid distribuiu os elementos automaticamente. Vamos corrigir isso. - Crie uma regra de css somente para o bloco "rotulos", e defina em qual coluna e linha ele deve se posicionar, usando as propriedades *grid-column* e *grid-row*. Lembre do exercício sobre grid. Que valores colocamos nessas propriedades para que o rótulo se posicione na coluna 2 e linha 2, ocupando só uma célula do grid? Adicione estes valores e teste o layout. Agora vamos alterar cada barra e rotulo, para que todas tenham a mesma largura e se distribuam por todo o espaço disponível. **Barras:** - Crie uma regra de css para selecionar as barras, ou seja, as divs que sejam filhas diretas do elemento "barras". - Defina para elas a propriedade *flex-grow: 1*. Defina também *flex-basis: 100%*, para que as barras se ajustem ao espaço disponível com tamanhos iguais. - Para ver as barras, adicione uma cor de fundo (*background-color*) com o valor *fuchsia* **Rótulos:** - Crie uma regra de css para selecionar os rótulos, ou seja, as divs que sejam filhas diretas do elemento "rotulos". - Defina também para elas a propriedade *flex-grow: 1* além de *flex-basis: 100%*, para que os rótulos se ajustem ao espaço disponível com tamanhos iguais. - Adicione um *padding* de *20px* no topo para que o texto dos rótulos se descole das barras. - Centralize o texto dos rótulos usando *text-align: center* Agora as barras e rótulos se esticaram, mas precisamos incluir um espaço entre elas. - Na regra que você criou para tanto o bloco "barras" quanto "rotulos", inclua um espaço de 15px entre os itens com propriedade *gap*. - Inclua também um *padding* na lateral esquerda, de *30px*, para descolar as barras da escala. **Finalizando:** Agora só falta alinhar as barras no eixo de baixo, e ajustar as alturas das barras de acordo com os valores do PIB dos países. Como você se lembra, usamos os seguintes dados de PIB, de 2021: - **EUA:** U$22,94 trilhões - **China:** U$16,86 trilhões - **Japão:** U$5,10 trilhões - **Alemanha:** U$4,23 trilhões - **Reino Unido:** U$3,11 trilhões Para calcular a altura de cada barra, basta fazer uma regra de três. Por exemplo, para os EUA: - 25 (o valor máximo na escala) ----------- 100% - 22.94 (o valor dos EUA) --------------------- x - x = (22.94 * 100) / 25 = 91.76% **X será então o valor da propriedade *height* para a barra com a classe "eua"** Mas, peraí, as barras ainda estão alinhadas ao topo! Como vimos no exercício sobre flexbox, é fácil ajustar o alinhamento. Basta usarmos, no bloco que contém as barras, a propriedade *align-items: end* Pronto! Se quiser alterar a cor de cada barra de acordo com a porcentagem, você pode usar a propriedade *opacity: 50%;*40:[{"id":"87f850b5dac39360b1ab499d4cdee919e3f8dec4dea476e1f6145fd3414e08e211393c00c9acefa1c69225400a2a7b5c9e30950490a271bd71bb5be37b3c368b","href":"https://static.observableusercontent.com/files/87f850b5dac39360b1ab499d4cdee919e3f8dec4dea476e1f6145fd3414e08e211393c00c9acefa1c69225400a2a7b5c9e30950490a271bd71bb5be37b3c368b","name":"grafico-parte-1@1.jpeg","type":"image/jpeg","lastModified":1646858661005.781,"size":65774},{"id":"35a9c74988a6ed61c3a6cf15bbc4ae46ee71a2ac6e96c89177cf1f1dc28604c28ad560c710a6966bc428f0f65477cfc88001e3929fc5e421b3d894d5d7228b0a","href":"https://static.observableusercontent.com/files/35a9c74988a6ed61c3a6cf15bbc4ae46ee71a2ac6e96c89177cf1f1dc28604c28ad560c710a6966bc428f0f65477cfc88001e3929fc5e421b3d894d5d7228b0a","name":"grafico-parte-2.jpeg","type":"image/jpeg","lastModified":1646858661005.781,"size":22995},{"id":"613e42a4ec67cb6825b1aa03fcf56c473ba2b1fa2456e06ff16e5ca55d91c2ec8183d2444e0104f70a4571e6dfcb56fd028a8815c4bf2cddade8b8def8155672","href":"https://static.observableusercontent.com/files/613e42a4ec67cb6825b1aa03fcf56c473ba2b1fa2456e06ff16e5ca55d91c2ec8183d2444e0104f70a4571e6dfcb56fd028a8815c4bf2cddade8b8def8155672","name":"image@1.png","type":"image/png","lastModified":1646858661005.781,"size":28222}] 38:{"id":"f67b78e3242ad0d0","slug":"exercicio-grafico-com-escala-e-rotulos","title":"Exercício - Gráfico com escala e rótulos","thumbnail":"06574eefb67663e15aeb7719931e6b4619b0d0ff56df0e711058f61c904bb18f","access_level":"public","create_time":"$D2022-03-09T20:44:21.005Z","update_time":"$D2022-03-14T19:56:57.522Z","view_time":null,"first_public_time":"$D2022-03-09T20:46:55.577Z","has_unpublished_edits":null,"fork":{"id":"7a6ff16fa0774c2b","slug":"resolucao-do-exercicio-grafico-com-escala-e-rotulos","title":"RESOLUÇÃO do Exercício - Gráfico com escala e rótulos","owner":{"id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":602,"publish_version":602,"role":null,"authored":false,"authors":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":28,"collection":{"id":"bfe1f0fd95ab6ced","slug":"programacao-web-introducao","title":"Programação Web - Introdução","owner":{"id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx"}},"type":"notebook","body":{"titling":"auto","title":"Exercício - Gráfico com escala e rótulos","cells":[{"id":0,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"

Os maiores PIBs do mundo em 2021

Valores em trilhões de dólares (US$)

\n \n

Fonte: Fundo Monetário Internacional, 10/2021

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"$3d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"## Parte 2 - Escala\n\nA escala é provavelmente a parte mais difícil desse gráfico, pois deve ter precisão com relação às barras. Pensando esquematicamente, a escala é um bloco de conteúdo que empilha items na vertical com espaçamento igual entre eles. Como nosso valor máximo está entre 20 e 25 trilhões de dólares, defini como altura máxima o número arredondado de 25 trilhões, para que a escala fique dividida de 5 em 5 trilhões.\n\nComo tenho 5 marcas, cada marca deve estar a exatamente 20% da altura total da escala (100% / 5). Se você se lembra dos exercícios de flexbox, já deve desconfiar o que precisamos fazer. \n\nVamos lá. No bloco html abaixo, incluimos um elemento com classe \"escala\", que contém 5 filhos – cada um representando uma marca.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":192,"value":"\n

Os maiores PIBs do mundo em 2021

Valores em trilhões de dólares (US$)

\n \n

\n\n

\n \n

Fonte: Fundo Monetário Internacional, 10/2021

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":208,"value":"$3e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":420,"value":"## Parte 3 - Barras e rótulos\n\nAgora vamos completar o gráfico em si, criando as barras e os rótulos de cada barra embaixo delas. No html a seguir, completamos o layout incluindo divs para as barras e para os rótulos.\n\n![image@1.png](${await FileAttachment(\"image@1.png\").url()})\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"\n

Os maiores PIBs do mundo em 2021

Valores em trilhões de dólares (US$)

\n \n

\n\n

\n \n

EUA

China

Japão

Alemanha

Reino Unido

\n \n \n

Fonte: Fundo Monetário Internacional, 10/2021

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":444,"value":"\n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"$3f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 33:null