Public
Edited
Feb 14, 2024
seattleWeatherData = d3.csv("https://raw.githubusercontent.com/vega/vega-datasets/next/data/seattle-weather.csv", d3.autoType);
weatherColors = ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"];
vl.markCircle()
.title('Seattle Daily Max Temperatures')
.data(seattleWeatherData)
.transform(
vl.filter('datum.temp_max > 15')
)
.encode(
vl.x().fieldT('date').title('Date'),
vl.y().fieldQ('temp_max').title('Max Temperature'),
vl.color().fieldQ('temp_max').scale({domail: [0, 35]}).title('Max Temp')
)
.render()
{
// const maxTempParam = vl.param('max_temp_slider').value(0).bind(vl.slider(-5, 40, 1).name('Max Temp: '))
const selectedPoint = vl.selectPoint('selected_point').on('click').fields('temp_max').nearest(true).clear('dblclick')
return vl.markCircle()
.title({
text: 'Seattle Daily Max Temperatures',
subtitle: 'Click to Select a point | Double Click to Clear'
})
.data(seattleWeatherData)
.params(selectedPoint)
.transform(
//vl.filter('datum.temp_max > max_temp_slider')
vl.filter('!selected_point.temp_max || datum.temp_max >= selected_point.temp_max')
)
.encode(
vl.x().fieldT('date').title('Date').scale({domain: ['2012/01/10', '2016/01/01']}),
vl.y().fieldQ('temp_max').title('Max Temperature').scale({domain: [-5, 40]}),
vl.color().fieldQ('temp_max').scale({domail: [0, 35]}).title('Max Temp')
)
.render()
}
{
// const maxTempParam = vl.param('max_temp_slider').value(0).bind(vl.slider(-5, 40, 1).name('Max Temp: '))
const selectedPoint = vl.selectPoint('selected_point').on('click').fields('weather').bind('legend').nearest(true).clear('dblclick')
return vl.markCircle()
.title({
text: 'Seattle Daily Max Temperatures',
subtitle: 'Click to Select a point | Double Click to Clear'
})
.data(seattleWeatherData)
.params(selectedPoint)
.encode(
vl.x().fieldT('date').title('Date').scale({domain: ['2012/01/01', '2016/01/01']}),
vl.y().fieldQ('temp_max').title('Max Temperature').scale({domain: [-5, 40]}),
vl.color().fieldN('weather').scale({range: weatherColors}),
vl.opacity().if(selectedPoint, vl.value(0.7)).value(0.1)
)
.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.
