import {vl} from '@vega/vega-lite-api'
d3 = require("d3-fetch@1")
dados = d3.csv("https://raw.githubusercontent.com/tiagodavi70/vl-altair-tutorial/master/datasets/dados.csv", d => {
let colunas_numericas = ["Precipitação","Pressão Atmosférica ao nível da estação","Pressão Atmosférica máxima","Pressão Atmosférica mínima","Radiação Global","Temperatura do ar - bulbo seco","Temperatura do ponto de orvalho","Temperatura máxima","Temperatura mínima","Temperatura orvalho máxima","Temperatura orvalho mínima","Umidade Relativa máxima","Umidade Relativa mínima","Umidade Relativa do Ar","Direção Horária do Vento","Rajada Máxima de Vento","Velocidade Horária do Vento"];
for (let k of colunas_numericas)
d[k] = parseFloat(d[k]);
return d
})
vl.markArea({opacity:.45})
.data(url)
.transform(
vl.filter("(datum.Cidade == 'Capitão Poço' || datum.Cidade == 'Altamira')")
)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("Temperatura orvalho máxima").scale({zero:false}).title("Média dos pontos de orvalho °C"),
vl.y2().average("Temperatura orvalho mínima"),
vl.color().fieldN("Cidade")
)
.render()
vl.markLine({opacity:.85})
.data(url)
.transform(
vl.filter("(datum.Cidade == 'Capitão Poço' || datum.Cidade == 'Altamira')"),
vl.calculate("(+datum['Temperatura orvalho máxima'] + +datum['Temperatura orvalho mínima']) / 2").as("temp_mid")
)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("temp_mid").scale({zero:false}).title("Ponto médio °C"),
vl.color().fieldN("Cidade")
)
.render()
{
let orvalhoMinMax = vl.markArea({opacity:.45})
.data(url)
.transform(
vl.filter("(datum.Cidade == 'Capitão Poço' || datum.Cidade == 'Altamira')")
)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("Temperatura orvalho máxima").scale({zero:false}).title("Média dos pontos de orvalho °C"),
vl.y2().average("Temperatura orvalho mínima"),
vl.color().fieldN("Cidade")
)
let orvalhoMid = vl.markLine({opacity:.85})
.data(url)
.transform(
vl.filter("(datum.Cidade == 'Capitão Poço' || datum.Cidade == 'Altamira')"),
vl.calculate("(+datum['Temperatura orvalho máxima'] + +datum['Temperatura orvalho mínima']) / 2").as("temp_mid")
)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("temp_mid").scale({zero:false}).title("Ponto médio °C"),
vl.color().fieldN("Cidade")
)
return vl.layer(orvalhoMinMax, orvalhoMid).render()
}
{
let orvalhoMinMax = vl.markArea({opacity:.45})
.title("Comparação do Ponto de Orvalho e Umidade")
.data(url)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("Temperatura orvalho máxima").scale({zero:false}).title("Média dos pontos de orvalho °C"),
vl.y2().average("Temperatura orvalho mínima")
)
let umidade = vl.markLine({opacity:.85})
.data(url)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("Umidade Relativa do Ar").scale({zer:false})
)
return vl.layer(orvalhoMinMax, umidade).render()
}
{
let orvalhoMinMax = vl.markArea({opacity:.45})
.title("Comparação do Ponto de Orvalho e Umidade")
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("Temperatura orvalho máxima").scale({zero:false}).title("Média dos pontos de orvalho °C"),
vl.y2().average("Temperatura orvalho mínima")
)
let umidade = vl.markLine({
opacity:.85,
interpolate: "monotone",
color: "#333"
})
.transform(
vl.calculate("+datum['Umidade Relativa do Ar'] / 100").as("perc_umid") // criar nova coluna para as etiquetas
)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("perc_umid").scale({zero:false}).axis({format:"%"}).title("Umidade Relativa do Ar - %")
)
return vl.layer(orvalhoMinMax, umidade)
.data(url)
.resolve({scale: {y:"independent"}})
.render()
}
vl.markBar()
.data(dados)
.encode(
vl.x().fieldQ("Temperatura do ar - bulbo seco").bin({maxbins:20}),
vl.y().count()
)
.render()
vl.markBar()
.transform(
vl.filter("year(datum['Data']) == 2019"),
vl.calculate("month(datum.Data) < 5 || month(datum.Data) == 11 ? 'Chove muito':'Chove pouco'").as("estação")
)
.data(url)
.encode(
vl.x().fieldQ("Temperatura do ar - bulbo seco").bin({maxbins:12}).title(null),
vl.y().count().title("Contagem de registros"),
vl.column().month("Data").title(null),
vl.color().fieldN("estação").scale({range: ["DeepSkyBlue", "Brown"]}).title("Estação")
)
.width(40)
.height(100)
.render()
{
let orvalhoMinMax = vl.markArea({opacity:.45})
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("Temperatura orvalho máxima").scale({zero:false}).title("Média dos pontos de orvalho °C"),
vl.y2().average("Temperatura orvalho mínima"),
vl.color().fieldN("Cidade")
)
let orvalhoMid = vl.markLine({opacity:.85})
.transform(
vl.calculate("(+datum['Temperatura orvalho máxima'] + +datum['Temperatura orvalho mínima']) / 2").as("temp_mid")
)
.encode(
vl.x().hours("Data").title("Hora no dia"),
vl.y().average("temp_mid").scale({zero:false}).title("Ponto médio °C"),
vl.color().fieldN("Cidade")
)
return vl.layer(orvalhoMinMax, orvalhoMid)
.facet({column:vl.field("Cidade")})
.data(url)
.transform(
vl.filter("(datum.Cidade == 'Capitão Poço' || datum.Cidade == 'Altamira')")
)
.resolve({axis: { y: "independent" } })
.render()
}
vl.markLine({opacity:.85})
.data(dados)
.transform(
vl.filter("(datum.Cidade == 'Castanhal' || datum.Cidade == 'Altamira')")
)
.encode(
vl.x().month("Data"),
vl.y().average("Rajada Máxima de Vento"),
vl.color().fieldN("Cidade")
)
.render()
{
let base = vl.markLine()
.data(dados)
.transform(
vl.filter("(datum.Cidade == 'Castanhal' || datum.Cidade == 'Altamira')")
)
.encode(
vl.x().month("Data"),
vl.color().fieldN("Cidade")
)
.width(220)
.height(180)
let vento = base.encode(vl.y().average("Rajada Máxima de Vento").scale({zero:false}))
let temp = base.encode(vl.y().average("Temperatura do ar - bulbo seco").scale({zero:false}))
let press = base.encode(vl.y().average("Pressão Atmosférica ao nível da estação").scale({zero:false}))
return vl.hconcat(vento, temp, press).render()
}
{
let base = vl.markLine()
.data(dados)
.transform(
vl.filter("(datum.Cidade == 'Castanhal' || datum.Cidade == 'Altamira')")
)
.encode(
vl.x().month("Data"),
vl.color().fieldN("Cidade")
)
.width(220)
.height(180)
let vento = base.encode(vl.y().average("Rajada Máxima de Vento").scale({zero:false}))
let temp = base.encode(vl.y().average("Temperatura do ar - bulbo seco").scale({zero:false}))
let press = base.encode(vl.y().average("Pressão Atmosférica ao nível da estação").scale({zero:false}))
return vl.vconcat( vl.hconcat(vento, temp) , press.width(510)).render()
}
vl.markLine()
.data(dados)
.transform(
vl.filter("(datum.Cidade == 'Castanhal' || datum.Cidade == 'Altamira')")
)
.encode(
vl.x().month("Data"),
vl.color().fieldN("Cidade"),
vl.y().average(vl.repeat("column")).scale({zero:false})
)
.width(220)
.height(180)
.repeat({column:["Rajada Máxima de Vento", "Velocidade Horária do Vento", "Temperatura do ponto de orvalho"]})
.render()
splom = vl.markCircle()
.data(dados)
.encode(
vl.x().fieldQ(vl.repeat("column")).scale({zero:false}),
vl.y().fieldQ(vl.repeat("row")).scale({zero:false}),
vl.tooltip([vl.day("Data"),"Cidade"])
)
.width(120)
.height(120)
.repeat({
row: linhas,
column: colunas
})
splom.render()
{
let barras = vl.markBar()
.encode(
vl.x().fieldQ(vl.repeat("row")).bin(true).title("Histograma com média"),
vl.y().count().title(null)
)
let regua = vl.markRule({color:"firebrick"})
.encode(
vl.x().average(vl.repeat("row"))
)
let hist = vl.layer(barras, regua)
.width(120)
.height(120)
.repeat({row: linhas})
let tempo = vl.markLine()
.encode(
vl.x().month("Data"),
vl.y().average(vl.repeat("column")).scale({zero:false})
)
.width(120)
.height(100)
.repeat({column:colunas})
return vl.vconcat(vl.hconcat(splom, hist), tempo).data(dados).render()
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.