Public
Edited
Feb 18, 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", d3.autoType);
weatherColors = ["#aec7e8", "#c7c7c7", "#1f77b4","#9467bd", "#e7ba52"];
vl.markCircle()
.data(seattleWeatherData)
.transform(
vl.filter('datum.temp_max > 20') // temp_max about 20
)
.encode(
vl.x().fieldT('date').title('Date'),
vl.y().fieldQ('temp_max').title('Max Temperature'),
//vl.color().fieldQ('temp_max').scale({domain: [0, 35]}).title('Max Temp')
)
.render();
{
const maxTempParam = vl.param('max_temp_slider').value(0).bind(vl.slider(-5, 35, 1).name('Max Temp: '))
return vl.markCircle()
.title('Seattle Daily Max Temperatures')
.data(seattleWeatherData)
.params(maxTempParam)
.transform(
vl.filter('datum.temp_max > max_temp_slider') // temp_max about 20
)
.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: [-10, 40]}),
vl.color().fieldQ('temp_max').scale({domain: [0, 35]}).title('Max Temp')
)
.render();
}
{
// const maxTempParam = vl.param('max_temp_slider').value(0).bind(vl.slider(-5, 35, 1).name('Max Temp: '))
//const selectedPoint = vl.selectPoint('selected_point').on('click').nearest(true).clear('dblclick')
const selectedPoint = vl.selectPoint('selected_point')
.on('click')
.fields('temp_max')
.nearest(true)
.clear('dblclick')
return vl.markCircle()
.title({
text: 'Seattle Daily Max Temperature',
subtitle: 'Click to Select a Point | Double Click to Clear'
})
.data(seattleWeatherData)
.params(selectedPoint)
.transform(
//vl.filter('datum.temp_max > max_temp_slider') // temp_max about 20
vl.filter('!selected_point.temp_max || datum.temp_max >= selected_point.temp_max')
)
.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().fieldQ('temp_max').scale({domain: [0, 35]}).title('Max Temp')
)
.render();
}
{
// const maxTempParam = vl.param('max_temp_slider').value(0).bind(vl.slider(-5, 35, 1).name('Max Temp: '))
//const selectedPoint = vl.selectPoint('selected_point').on('click').nearest(true).clear('dblclick')
const selectedPoint = vl.selectPoint('selected_point')
.on('click')
.fields('weather')
.nearest(true)
.bind('legend')
.clear('dblclick')
return vl.markCircle()
.title({
text: 'Seattle Daily Max Temperature',
subtitle: 'Click to Select a Weather | 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}).title('Weather'),
vl.opacity().if(selectedPoint, vl.value(0.7)).value(0.1)
)
.render();
}
{
const selectedInterval = vl.selectInterval('selected_interval')
.encodings('x');
return vl.markCircle()
.title({
text: 'Seattle Daily Max Temperature',
subtitle: 'Click to Select a Weather | Double Click to Clear'
})
.data(seattleWeatherData)
.params(selectedInterval)
.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.opacity().if(selectedInterval, vl.value(0.7)).value(0.1),
vl.color().if(selectedInterval, vl.value('red')).value('blue')
)
.render();
}
{
const slider = vl.selectInterval('selected_interval').encodings('x');
const weatherBarPlot = vl.markBar()
.title('Frequency of Weather Types in Seattle between 2012 and 2015')
.transform(vl.filter(slider))
.encode(
vl.x().count().scale({domain: [5, 750]}).title('Frequency of Days'),
vl.y().fieldN('weather').title('Weather Type'),
vl.color().fieldN('weather').scale({range: weatherColors})
);
const maxTempScatterPlot = vl.markCircle()
.title({
text: 'Seattle Daily Max Temperature',
subtitle: 'Click to Select a Weather | Double Click to Clear'
})
.params(slider)
.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]}),
);
return vl.vconcat(maxTempScatterPlot, weatherBarPlot).data(seattleWeatherData).render();
}
hist = vl.markBar({color: 'pink', opacity: 0.6})
.data(seattleWeatherData)
.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();
{
const barColor = vl.param('bar_color').value('lightblue')
return vl.markBar({color: {expr: 'bar_color'}, opacity: 0.6})
.data(seattleWeatherData)
.params(barColor)
.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();
}
{
const barColorJS = 'orange'
return vl.markBar({color: barColorJS, opacity: 0.6})
.data(seattleWeatherData)
.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();
}
{
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();
}
vl.markPoint()
.data(seattleWeatherData)
.title("Seattle Max Temperature")
.encode(
vl.x().fieldT('date').title("Date"),
vl.y().fieldQ('temp_max').title('Max Temperature')
).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.
