Skip to content

Instantly share code, notes, and snippets.

@JuanBarros2
Last active November 9, 2017 13:20
Show Gist options
  • Save JuanBarros2/f375af5f1f2ddc961b3e8bcac80dc0a5 to your computer and use it in GitHub Desktop.
Save JuanBarros2/f375af5f1f2ddc961b3e8bcac80dc0a5 to your computer and use it in GitHub Desktop.

Nessa visualização podemos ter uma noção geral do como o açude vem perdendo água no período dos últimos três anos. A tarefa principal dessa visualização está voltada para mostrar os extremos em relação ao volume aquífero em um período de mais de vinte anos, que períodos o açude está mais cheio ou mais vazio. Para isso utilizei de uma estratégia segura de visualização que consiste na disposição das porcentagens registradas no eixo vertical enquanto temos um eixo horizontal representando a passagem do tempo. A escolha da marca foi baseada na melhor verificação do componente "volume" representado por sua altura no eixo y em que conseguimos rapidamente ter uma noção dos extremos e sendo complementado com o eixo temporal dá uma noção melhor de mudanças. Ao utilizar linhas e pontos a marca não foi tão significativa e logo concluí que a melhor escolha seria o uso da área. Outra característica que pude tirar dessa visualização foi a fonte que capturou esses dados. Diferenciados pela cor, podemos ter uma noção geral de quem é a autoria de maior parte desses dados. Como as variáveis são nominais, apliquei o filtro de cores visto que existem poucas categorias. Com isso, pude notar rapidamente que a maior parte dos dados teve como fonte a ANA e que seu engajamento na consulta dos dados é algo recente.

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.6/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-rc5/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc6/vega-embed.js"></script>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div id="vis"></div>
<script>
const spec = "visualizacaoboqueirao.json";
vegaEmbed('#vis', spec).catch(console.warn);
</script>
</body>
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"title": "Visualização retirada de dados da AESA/ANA",
"data": {
"url": "https://api.insa.gov.br/reservatorios/12172/monitoramento",
"format": {
"type": "json",
"property": "volumes",
"parse": {
"DataInformacao": "utc:'%d/%m/%Y'"
}
}
},
"vconcat": [{
"width": 800,
"height": 400,
"mark": "area",
"encoding": {
"x": {
"timeUnit": "yearmonthdate",
"field": "DataInformacao",
"type": "temporal",
"scale": {
"domain": {"selection": "brush"}
},
"axis": {"title": "Tempo"}
},
"y": {
"field": "Volume",
"axis": {"title": "Volume"},
"type": "quantitative"
},
"color":{
"type":"nominal",
"field":"Fonte"
}
}
}, {
"width": 800,
"height": 100,
"mark": "area",
"selection": {
"brush": {"type": "interval", "encodings": ["x"]}
},
"encoding": {
"x": {
"timeUnit": "yearmonthdate",
"field": "DataInformacao",
"type": "temporal",
"axis": {"title": "Tempo"}
},
"y": {
"field": "VolumePercentual",
"type": "quantitative",
"axis": { "title": "Volume (%)"}
},
"color":{
"type":"nominal",
"field":"Fonte"
}
}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment