import {vl} from '@vega/vega-lite-api'
d3 = require("d3-fetch@1")
vl.markCircle()
.data(dados)
.encode(
vl.x().fieldQ("Temperatura máxima").scale({zero:false}),
vl.y().fieldT("Data")
)
.render()
vl.markCircle()
.data(dados)
.encode(
vl.x().fieldQ("Temperatura máxima").scale({zero:false}).bin(true),
vl.y().fieldT("Data")
)
.render()
vl.markCircle()
.data(dados)
.encode(
vl.x().fieldQ("Temperatura máxima").scale({zero:false}).bin({maxbins:20}),
vl.y().fieldT("Data")
)
.render()
vl.markCircle()
.data(dados)
.encode(
vl.x().fieldQ("Temperatura máxima").scale({zero:false}).bin({maxbins:20}),
vl.y().count()
)
.render()
vl.markBar({color:"cadetblue"})
.data(dados)
.encode(
vl.x().fieldQ("Temperatura máxima").scale({zero:false}).bin({maxbins:20}),
vl.y().count()
)
.render()
vl.markCircle()
.data(dados)
.encode(
vl.x().fieldQ("Pressão Atmosférica máxima").scale({zero:false}).bin({maxbins:20}),
vl.y().fieldQ("Temperatura do ar - bulbo seco").scale({zero:false}).bin({maxbins:20}),
vl.color().count(),
vl.size().count()
)
.render()
vl.markRect()
.data(dados)
.encode(
vl.x().fieldQ("Pressão Atmosférica máxima").scale({zero:false}).bin({maxbins:20}),
vl.y().fieldQ("Temperatura do ar - bulbo seco").scale({zero:false}).bin({maxbins:20}),
vl.color().count()
)
.render()
vl.markPoint()
.data(dados)
.encode(
vl.x().fieldN("Cidade"),
vl.y().mean("Temperatura máxima").scale({zero:false})
)
.render()
vl.markPoint()
.data(dados)
.encode(
vl.x().fieldN("Cidade").sort(vl.mean('Temperatura máxima').order('ascending')),
vl.y().average("Temperatura máxima").scale({zero:false})
)
.render()
vl.markBar()
.data(dados)
.encode(
vl.x().fieldN("Cidade"),
vl.y().q3("Temperatura mínima").scale({zero:false}),
vl.y2().q1("Temperatura mínima")
)
.render()
vl.markArea()
.data(url)
.encode(
vl.x().hours("Data"),
vl.y().mean("Temperatura máxima").scale({zero:false})
)
.render()
vl.markBar()
.data(url)
.transform(
vl.calculate("datum['Temperatura máxima'] - datum['Temperatura mínima']").as("Diferença")
)
.encode(
vl.x().hours("Data"),
vl.y().mean("Diferença").scale({zero:false})
)
.render()
vl.markRect()
.data(url)
.transform(
vl.calculate("datum['Temperatura máxima'] - datum['Temperatura mínima']").as("Diferença"),
vl.filter("month(datum.Data) == 6")
)
.encode(
vl.x().hours("Data"),
vl.y().fieldN("Cidade"),
vl.color().mean("Diferença")
)
.render()
vl.markLine()
.data(url)
.transform(
vl.calculate("datum['Temperatura máxima'] - datum['Temperatura mínima']").as("Diferença"),
vl.filter("month(datum.Data) == 6 && datum.Cidade === 'Novo Repartimento'")
)
.encode(
vl.x().hours("Data"),
vl.y().mean("Diferença")
)
.render()
vl.markBar()
.data(url)
.transform(
vl.calculate("datum['Temperatura máxima'] - datum['Temperatura mínima']").as("Diferença"),
vl.filter("month(datum.Data) == 6"),
vl.aggregate(vl.average("Diferença").as("Diferença_Cidade")).groupby(["Cidade"]),
vl.window(vl.rank().as('Rank')).sort(vl.field('Diferença_Cidade').order('ascending')),
vl.filter('datum.Rank < 10')
)
.encode(
vl.x().fieldQ("Diferença_Cidade"),
vl.y().fieldN("Cidade").sort(vl.max("Diferença_Cidade").order("ascending"))
)
.render()
vl.markPoint()
.data(dados)
.encode(
vl.x().fieldQ("Precipitação")
)
.render()
vl.markPoint()
.data(dados)
.transform(
vl.filter("datum['Precipitação'] > 0") // para evitar erros com a função log
)
.encode(
vl.x().fieldQ("Precipitação").scale({type:"log", range:[0,850]})
)
.render()
vl.markCircle()
.data(dados)
.transform(
vl.filter("datum['Precipitação'] > 0") // para evitar erros com a função log
)
.encode(
vl.x().fieldQ("Umidade Relativa máxima").scale({zero: false}),
vl.y().fieldQ("Precipitação").scale({type:"log"}).sort("descending"),
)
.render()
vl.markCircle({
opacity:0.45,
size:50,
color:"cadetblue"
})
.title("Relação da Umidade Relativa Máxima do Ar com a Precipitação")
.data(dados)
.transform(
vl.filter("datum['Precipitação'] > 0"),
vl.calculate("datum['Umidade Relativa máxima'] / 100").as("perc_umid") //criar nova coluna para as etiquetas
).encode(
vl.y().fieldQ("Precipitação")
.scale({type:"log"})
.axis({orient:"right", offset:10}) // mover um pouco a escala e colocar a direita
.sort("descending") //inverter a escala
.title("Precipitação (mm) - escala logarítimica invertida"),
vl.x().fieldQ("perc_umid") // usando a nova coluna, só foi escalado, sem danos ao mapeamento visual
.scale({zero:false})
.title("Umidade Relativa Máxima")
.axis({tickCount:5, format:"%"}),
vl.tooltip([vl.tooltip().fieldT("Data"), "Cidade"])
)
.width(450)
.height(450)
.render()
dados_filtrados = completo.filter(d => d.Cidade === "Capitão Poço" || d.Cidade === "Altamira")
vl.markLine({strokeWidth:4})
.data(url)
.transform(
vl.filter("datum.Cidade == 'Capitão Poço' || datum.Cidade == 'Altamira'")
)
.encode(
vl.x().month("Data"),
vl.y().average("Temperatura máxima").scale({zero:false}),
vl.color().fieldN("Cidade")
)
.render()
vl.markArea({opacity:.65})
.title("Comparação de temperatura de Capitão Poço e Altamira")
.data(url)
.transform(
vl.filter("(datum.Cidade == 'Capitão Poço' || datum.Cidade == 'Altamira')")
)
.encode(
vl.x().month("Data").title("Meses do Ano"),
vl.y().mean("Temperatura máxima").scale({zero:false}).title("Média das temperaturas"),
vl.y2().mean("Temperatura mínima"),
vl.color().fieldN("Cidade")
.scale({
domain:['Capitão Poço','Altamira'],
range:['DodgerBlue',"MediumSeaGreen"]
})
)
.render()
vl.markRect()
.title({
text: "Diferença das Temperaturas Mínima e Máxima em Julho",
fontSize:20,
color:'gray',
dy:-20
})
.data(url)
.transform(
vl.calculate("datum['Temperatura máxima'] - datum['Temperatura mínima']").as("Diferença"),
vl.filter("month(datum.Data) == 6")
)
.encode(
vl.x().hours("Data"),
vl.y().fieldN("Cidade"),
vl.color().mean("Diferença")
.scale({scheme:"yelloworangebrown"})
// .scale({range:["yellow", "red"]}) // alternativa para usar cores manualmente, mas na dúvida use uma do Vega-Lite
.legend({
title:"Média das diferenças",
gradientThickness:30,
labelFontSize:15
}),
vl.tooltip(["Cidade", vl.mean("Diferença").as("Diferença")])
)
.render()
import {linspace} from '@benmaier/a-visually-more-appealing-fisheye-function'
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.