Data Visualization Enthusiast, professor of Computer Science at Universidade Federal do Ceara, Fortaleza, Brazil.
import {vl} from '@vega/vega-lite-api-v5'
data = require('vega-datasets')
cars = data['cars.json']()
Inputs.table(cars)
data['cars.json'].url
nycweather = d3.json("https://gist.githubusercontent.com/emanueles/c628da6486ccb5059c091d9a13285cff/raw/8136ef5bc833ce6266e22ab0a8487c71bdb67bc2/nyc_weather_data.json")
Inputs.table(nycweather)
df = [
{"city": "Seattle", "month": "Apr", "precip": 2.68},
{"city": "Seattle", "month": "Aug", "precip": 0.87},
{"city": "Seattle", "month": "Dec", "precip": 5.31},
{"city": "New York", "month": "Apr", "precip": 3.94},
{"city": "New York", "month": "Aug", "precip": 4.13},
{"city": "New York", "month": "Dec", "precip": 3.58},
{"city": "Chicago", "month": "Apr", "precip": 3.62},
{"city": "Chicago", "month": "Aug", "precip": 3.98},
{"city": "Chicago", "month": "Dec", "precip": 2.56},
];
vl.markPoint()
.data(df)
.render()
vl.markPoint()
.data(df)
.encode(vl.y().field('city').type('nominal'))
.render()
vl.markPoint()
.data(df)
.encode(vl.y().fieldN('city'))
.render()
vl.markPoint()
.data(df)
.encode(
vl.x().fieldQ('precip'),
vl.y().fieldN('city')
)
.render()
// Experimente aqui
vl.markPoint()
.data(df)
.encode(
vl.x().average('precip'),
vl.y().fieldN('city')
)
.render()
vl.markBar()
.data(df)
.encode(
vl.x().average('precip'),
vl.y().fieldN('city')
)
.render()
vl.markBar()
.data(df)
.encode(
vl.y().average('precip'),
vl.x().fieldN('city')
)
.render()
vl.markPoint({color: 'firebrick'})
.data(df)
.encode(
vl.x().fieldQ('precip').scale({type: 'log'}).title('Log-Scaled Precipitation'),
vl.y().fieldN('city').title('City')
)
.render()
vl.markLine()
.data(cars)
.encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
)
.render()
{
const line = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
const point = vl.markCircle().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
return vl.layer(line, point).render();
}
{
const mpg = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
return vl.layer(mpg, mpg.markCircle()).render();
}
// Experimente aqui
{
const mpg = vl.markLine().data(cars).encode(
vl.x().fieldT('Year'),
vl.y().average('Miles_per_Gallon')
);
const hp = mpg.encode(vl.y().average('Horsepower'));
return vl.hconcat(
vl.layer(mpg, mpg.markCircle()),
vl.layer(hp, hp.markCircle())
).render();
}
scatter = vl.markPoint().data(cars).encode(
vl.x().fieldQ('Horsepower'),
vl.y().fieldQ('Miles_per_Gallon'),
vl.color().fieldN('Origin'),
vl.tooltip(['Name', 'Origin']) // show the Name and Origin fields in a tooltip
).render()
{
const plot = vl.markCircle().encode(
vl.x().average('precip'),
vl.y().fieldN('city')
);
return html`<pre>${JSON.stringify(plot.toObject(), 0, 2)}</pre>`; // format JSON data
}
{
const plot = vl.markCircle().encode({
x: {field: 'precip', type: 'quantitative', aggregate: 'average'},
y: {field: 'city', type: 'nominal'}
});
return html`<pre>${JSON.stringify(plot.toObject(), 0, 2)}</pre>`; // format JSON data
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
