Published
Edited
Nov 24, 2021
Insert cell
Insert cell
Insert cell
Insert cell
cars = data['cars.json']()
Insert cell
Inputs.table(cars)
Insert cell
Insert cell
// Adiciona campo Datetime para o dataset
cars.forEach(function(d) {
const parseTime = d3.timeParse("%Y-%m-%d")
d.Date = parseTime(d.Year)
})
Insert cell
exer1 = {
return vl.markBar({tooltip: true})
.data(cars)
.encode(
vl.x().fieldO('Date').timeUnit('year')
.sort({order: 'descending', op:'average', field:'Horsepower'})
.title('Year'),
vl.y().average('Horsepower').title('Average Horsepower (hp)')
)
.width(width/1.3)
.title('Aggregated Average Horsepower (hp) per Year')
.render()
}
Insert cell
Insert cell
exer2 = {
return vl.markPoint()
.data(cars)
.encode(
vl.x().fieldQ('Weight_in_lbs').title('Weight (lbs)'),
vl.y().fieldQ('Horsepower').title('Horsepower (hp)'),
vl.column().fieldN('Origin'),
vl.color().fieldN('Origin'),
)
.width(width/3.5)
.title('Horsepower (hp) per Weight (lbs)')
.render()
}
Insert cell
Insert cell
https://rafero1.github.io/portfolio-datavis/
Insert cell
import {vl} from '@vega/vega-lite-api-v5'
Insert cell
data = require('vega-datasets')
Insert cell

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.
Learn more