import {vl} from '@vega/vega-lite-api'
d3 = require("d3-fetch@1")
{
let selecao = vl.selectSingle();
return vl.markCircle()
.data(dados)
.select(selecao)
.encode(
vl.x().fieldQ("Precipitação"),
vl.y().fieldQ("Umidade Relativa do Ar"),
vl.color().if(selecao, vl.fieldN("Cidade")).value("grey"),
vl.opacity().if(selecao, vl.value(.9)).value(.3)
)
.render()
}
function plot(selecao){
return vl.markCircle()
.data(dados)
.select(selecao)
.encode(
vl.x().fieldQ("Precipitação"),
vl.y().fieldQ("Umidade Relativa do Ar"),
vl.color().if(selecao, vl.fieldN("Cidade")).value("grey"),
vl.opacity().if(selecao, vl.value(.9)).value(.2)
)
.width(240)
.height(180)
}
vl.hconcat(
plot(vl.selectSingle()).title("Único (clique)"),
plot(vl.selectMulti()).title("Multi (Shift-clique)"),
plot(vl.selectInterval()).title("Intervalo (arrastar)")
)
.render()
vl.hconcat(
plot(vl.selectSingle().on("mouseover")).title("Único (clique)"),
plot(vl.selectMulti().on("mouseover")).title("Multi (Shift-clique)")
)
.render()
nomeCidades = [...new Set(dados.map(d => d.Cidade))] // criando uma lista de valores únicos
{
let selecionaCidade = vl.selectSingle('Selecao') // dando o nome 'Seleção'
.fields(['Cidade']) // Seleção somente no campo cidade
.init({'Cidade': nomeCidades[0]}) // primeira cidade começa selecionada
.bind(vl.menu(nomeCidades))
return vl.markCircle()
.select(selecionaCidade)
.data(dados)
.encode(
vl.x().fieldQ("Umidade Relativa do Ar"),
vl.y().fieldQ("Precipitação"),
vl.color().if(selecionaCidade, vl.fieldN("Cidade")).value("darkgrey"),
vl.opacity().if(selecionaCidade, vl.value(.8)).value(.1)
).render()
}
{
let selecionaCidade = vl.selectSingle('Selecao') // dando o nome 'Seleção'
.fields(['Cidade', 'Mes']) // Seleção no campo cidade e Mes
.init({'Cidade': nomeCidades[0], 'Mes': 1}) // primeira cidade e Mes começam selecionados
.bind({Cidade: vl.radio(nomeCidades),
Mes: vl.menu([...Array(13).keys()].map(x => ++x))}) // array que cria valores de 1 até 12
return vl.markCircle()
.select(selecionaCidade)
.transform(
vl.calculate("month(datum.Data) + 1").as("Mes") // criando um campo de mês, fica mais simples para usar na seleção
)
.data(dados)
.encode(
vl.x().fieldQ("Umidade Relativa do Ar"),
vl.y().fieldQ("Precipitação"),
vl.color().if(selecionaCidade, vl.fieldN("Cidade")).value("darkgrey"),
vl.opacity().if(selecionaCidade, vl.value(.8)).value(.1)
).render()
}
{
let brush = vl.selectInterval().encodings('x')
let histograma = vl.markBar({color:"lightblue"})
.select(brush)
.encode(
vl.x().fieldQ("Pressão Atmosférica ao nível da estação").bin(true),
vl.y().count()
)
.width(400)
.height(50)
let scatterplot = vl.markCircle({size:100})
.encode(
vl.x().fieldQ("Umidade Relativa do Ar"),
vl.y().fieldQ("Precipitação"),
vl.color().if(brush, vl.fieldN("Cidade")).value("darkgrey"),
vl.opacity().if(brush, vl.value(.8)).value(.1),
vl.tooltip([vl.fieldN("Cidade"), vl.month("Data")])
)
return vl.vconcat(histograma, scatterplot).data(dados).render()
}
{
let colunas = ["Precipitação", "Temperatura mínima", "Umidade Relativa do Ar"]
let linhas = colunas.slice().reverse()
let brush = vl.selectInterval().resolve('global')
return vl.markCircle()
.select(brush)
.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"]),
vl.color().if(brush, vl.value("steelblue")).value("darkgrey"),
vl.opacity().if(brush, vl.value(.8)).value(.1)
)
.width(120)
.height(120)
.repeat({column: colunas, row: linhas})
.render()
}
vl.markCircle({size:100})
.select(vl.selectInterval().bind('scales'))
.data(dados)
.encode(
vl.x().fieldQ("Umidade Relativa do Ar"),
vl.y().fieldQ("Precipitação"),
vl.color().fieldN("Cidade"),
vl.opacity().value(.8),
vl.tooltip([vl.fieldN("Cidade"), vl.month("Data")])
)
.render()
{
let brush = vl.selectInterval().encodings('x')
let encodingX = vl.x().fieldT("Data").title(null)
let base = vl.markArea()
.encode(
encodingX,
vl.y().average("Temperatura do ar - bulbo seco").scale({zero:false}).title("Temperatura")
)
return vl.vconcat(
base.encode(encodingX.scale({domain: brush})),
base.select(brush).height(60)
)
.data(dados)
.render()
}
{
let passar = vl.selectSingle()
.on('mouseover') // seleção passando o cursor
.nearest(true) // seleciona o ponto mais próximo
.empty('none') // seleção vazia não retorna todos os pontos
let clicar = vl.selectMulti()
.empty('none') // seleção vazia não retorna todos os pontos
let scatterplot = vl.markCircle()
.encode(
vl.x().fieldQ("Umidade Relativa do Ar"),
vl.y().fieldQ("Precipitação"),
)
// base para as camadas de texto
let base = scatterplot.transform(vl.filter({or:[passar, clicar]})) // filtra os pontos de acordo com o clique
return vl.layer(
scatterplot.select(passar).select(clicar).select(vl.selectInterval().bind('scales')),
base.markPoint({size:100,stroke:'firebrick',strokewidth:1}),
base.markText({dx: 4, dy:-8, align:'right', stroke:'white', strokeWidth:2}).encode(vl.text().fieldN("Cidade")),
base.markText({dx:4, dy:-8, align:'right'}).encode(vl.text().fieldN("Cidade"))
)
.data(dados)
.width(600)
.height(450)
.render()
}
{
let linhas = ["Temperatura do ponto de orvalho", "Temperatura do ar - bulbo seco", "Precipitação"]
let brush = vl.selectInterval().encodings('x')
.resolve('intersect') // interseção, ponto só é destacado se está em todas as seleções
let histograma = vl.markBar({color:'salmon'})
.encode(
vl.x().fieldQ(vl.repeat("row"))
.bin({maxbins: 100})
.axis({format: 'f', titleAnchor:"start"}), // formato flutuante, alinhado a esquerda
vl.y().count().title(null)
)
return vl.layer(
histograma.select(brush).encode(vl.color().value("lightgrey")),
histograma.transform(vl.filter(brush))
)
.width(900)
.height(100)
.repeat({row:linhas})
.data(dados)
.config({view: {stroke: null}})
.render()
}
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.