Infographics & interactive media designer.
Published
Edited
May 9, 2022
import {vl} from '@vega/vega-lite-api-v5'
import {printTable} from '@jonfroehlich/data-utilities'
import {printTableTypes} from '@jonfroehlich/data-utilities'
hurricaneFile = FileAttachment("Hurricane_1@1.csv")
hurricane = hurricaneFile.csv()
printTable(hurricane.slice(0,5))
hurricaneTyped = hurricaneFile.csv({typed: true})
printTableTypes(hurricaneTyped)
{
const histogram = vl.markBar({tooltip: true, color: '#3C7A89'})
.data(hurricaneTyped)
.title('Значение пиковой скорости ветра для тропических циклонов')
.encode(
vl.x().fieldQ('wind').title('Cкорость ветра').bin(true),
vl.y().aggregate('count').title('Число наблюдений')
)
const meanRule = vl.markRule({color: '#E45756CC', size: 2})
.data(hurricaneTyped)
.encode(
vl.x().fieldQ('wind').aggregate('mean'),
vl.tooltip([{
field : "wind",
aggregate: 'mean',
title : "Среднее значение",
format: '0.1f'
}]
)
);
const meanLabel = vl.markText({ color: '#E45756CC', align: 'left', dx:3, y: 10 })
.data(hurricaneTyped)
.encode(
vl.x().mean('wind'),
vl.text().mean('wind').format('0.1f'),
);
return vl.layer(histogram, meanRule, meanLabel).render();
}
vl.markBar({tooltip: true, color: '#9FA2B2'})
.data(hurricaneTyped)
.title("Количество ураганов по годам")
.encode(
vl.x().fieldT("date").timeUnit('year').title('Год'),
vl.y().aggregate('count').title('Число наблюдений'),
)
.render();
{
const selectInterval = vl.selectInterval().encodings("x");
const BarYear = vl.markBar({color: '#DBC2CF'})
.data(hurricaneTyped)
.params(selectInterval)
.title({text: "Количество ураганов по годам",
subtitle: "Выберите интервал"})
.encode(
vl.x().fieldT("date").timeUnit('year').title('Год'),
vl.y().aggregate('count').title('Число наблюдений'),
vl.color().value("lightgray").if(
selectInterval,
vl.color().fieldT("date"))
);
const hurricaneNames = vl.markBar()
.transform(vl.filter(selectInterval))
//.data(name)
.encode(
vl.y().fieldN("name").sort("-x"),
vl.x().count("name")
)
return vl.vconcat(BarYear, hurricaneNames)
.data(hurricaneTyped)
.render();
}
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.
