|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
|
|
</head> |
|
<body> |
|
|
|
<div id="chart"></div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
|
|
|
|
|
<script> |
|
|
|
const width = 900; |
|
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('precipitation').scale({domain: [-1, 50], range: [10, 500]}).title('Precipitation'), |
|
vl.order().fieldQ('precipitation').sort('descending'), |
|
vl.x().timeMD('date').axis({title: 'Date', format: '%b'}), |
|
vl.y().fieldQ('temp_max').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)); |
|
|
|
const chartSpec = vl.vconcat(plot1, plot2) |
|
.data('https://cdn.jsdelivr.net/npm/vega-datasets@1/data/seattle-weather.csv') |
|
.autosize({type: 'fit-x', contains: 'padding'}) |
|
.toJSON(); |
|
|
|
vegaEmbed("#chart", chartSpec); |
|
</script> |
|
|
|
</body> |
|
</html> |
