Public
Edited
Jul 20, 2023
printTable(data.slice(0, 5))
data_2019 = data.filter(d=>d.timestamp > '2019-01-01')
{
const brush = vl.selectInterval().encodings('x');
const click = vl.selectMulti().encodings('color');
const scale = {
domain: ['sun', 'fog', 'drizzle', 'rain', 'snow'],
range: ['#e7ba52', '#a7a7a7', '#aec7e8', '#1f77b4', '#9467bd']
};
const plot1 = vl.markPoint({filled: true})
.encode(
vl.color().value('lightgray')
.if(brush, vl.color().fieldN('weather').scale(scale).title('Weather')),
vl.size().fieldQ('RH').scale({domain: [-1, 20], range: [10, 500]}).title('Precipitation'),
vl.order().fieldQ('RH').sort('descending'),
vl.x().timeMD('timestamp').axis({title: 'Date', format: '%b'}),
//vl.x().fieldT('timestamp'),
vl.y().fieldQ('T').scale({domain: [-5, 40]}).axis({title: 'Maximum Daily Temperature (°C)'})
)
.width(width)
.height(300)
.select(brush)
.transform(vl.filter(click));
const plot2 = vl.markBar()
.encode(
vl.color().value('lightgray')
.if(click, vl.color().fieldN('weather').scale(scale).title('Weather')),
vl.x().count(),
vl.y().fieldN('weather').scale({domain: scale.domain}).title('Weather')
)
.width(width)
.select(click)
.transform(vl.filter(brush));
return vl.vconcat(plot1, plot2)
.data(data_2019)
.autosize({type: 'fit-x', contains: 'padding'})
.render();
}
yeardata = [
{data:stationdata.filter(d=>d.timestamp >= '2011-01-01' && d.timestamp < '2011-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2012-01-01' && d.timestamp < '2012-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2013-01-01' && d.timestamp < '2013-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2014-01-01' && d.timestamp < '2014-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2015-01-01' && d.timestamp < '2015-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2016-01-01' && d.timestamp < '2016-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2017-01-01' && d.timestamp < '2017-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2018-01-01' && d.timestamp < '2018-02-01').map(d=>d.Q)},
{data:stationdata.filter(d=>d.timestamp >= '2019-01-01' && d.timestamp < '2019-02-01').map(d=>d.Q)}
]
vl.data(yeardata)
.transform(
vl.window(vl.row_number().as('series')), // add index for each series
vl.flatten('data'), // flatten each series array to individual data points
vl.groupby('series').window(vl.row_number().as('index')) // add index for each point
)
.mark({type: 'line', fill: 'white', stroke: 'black', strokeWidth: 1})
.encode(
vl.x().fieldQ('index').axis(null),
vl.y().fieldQ('data').scale({range: [step, -overlap * step]}).axis(null),
vl.row().fieldN('series').header({title: null, labelPadding: 0, labelFontSize: 0})
)
.width(width) // facet cell width
.height(step) // facet cell height
.bounds('flush') // use facet cell height for layout, not the full mark bounds
.spacing(0) // zero spacing between facet cells
.padding(0) // no chart padding
.config({view: {stroke: null}}) // no cell borders
.render()
step = 8 // base height for each data series
overlap = 6 // overlap scale factor for data series
vl.markPoint()
.data(sunhours.all())
.encode(
vl.x().timeMD('key').axis({title: 'Date', format: '%b'}),
vl.y().fieldQ('value')
)
.render()
date_dim = stationdata.dimension(d=>d.timestamp);
sunhours = date_dim.group(d3.timeDay).reduceSum(d=>d.SQ);
temp = date_dim.group(d3.timeDay).reduceSum(d=>d.T).all();
new Date('2011-01-02T00:00') - 1970
joined = sunhours.all().map(d=>{return {time:d.key,sun: d.value,temp: temp[d.key-1970]}})
sunhours.all()
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.
