Public
Edited
Feb 12, 2024
// TODO: load data here. ("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv")
seattleWeatherData = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv")
hist = vl.markBar()
.data(seattleWeatherData)
.encode(
vl.x().fieldN('date'),
vl.y().fieldQ('temp_max').scale({domain: [-6, 26]})
)
.render()
{
const barColor = vl.param('bar_color').value('lightblue').bind(vl.menu(['green', 'yellow', 'purple', 'orange', 'peachpuff', 'lightblue']).name('Color for Histogram '));
const barRadius = vl.param('bar_radius').value(10).bind(vl.slider(0, 20, 1))
return vl.markBar({color: {expr: 'bar_color'}, opacity: 0.6, cornerRadius: {expr: 'bar_radius'}})
.data(seattleWeatherData)
.params(barColor, barRadius)
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Max Temperatures'),
vl.y().aggregate('count').title('Number of Days')//fieldQ('temp_max').scale({domain: [-5, 30]})
).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.
