weather = (await require('vega-datasets@1'))['weather.csv']()
printTable(weather.slice(0, 10)) // first ten rows
printTable(weather.slice(-10)) // last ten rows
vl.markArea({tooltip: true})
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.y().average('temp_max').title("Average Min/Max Temperature Range (°C)"),
vl.y2().average('temp_min')
)
.render()
vl.markArea({opacity: 0.3, tooltip: true})
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.y().average('temp_max').title("Average Min/Max Temperature Range (°C)"),
vl.y2().average('temp_min'),
vl.color().fieldN('location') // subdivide by location
)
.render()
vl.markLine({tooltip: true})
.data(weather)
.transform(
vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid') // calculate midpoint
)
.encode(
vl.x().month('date').title(null),
vl.y().average('temp_mid').title("Average Temperature Midpoint (°C)"),
vl.color().fieldN('location')
)
.render()
{
const tempMinMax = vl.markArea({opacity: 0.3, tooltip: true}) // chart 1
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.y().average('temp_max').title ("Average Temperature Range (°C)"),
vl.y2().average('temp_min'),
vl.color().fieldN('location')
);
const tempMid = vl.markLine({tooltip: true}) // chart 2
.data(weather)
.transform(
vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid')
)
.encode(
vl.x().month('date'),
vl.y().average('temp_mid'),
vl.color().fieldN('location')
);
return vl.layer(tempMinMax, tempMid).render(); // layer tempMid on top of tempMinMax
}
{
const tempMinMax = vl.markArea({opacity: 0.3, tooltip: true}).encode(
vl.x().month('date').title(null).axis({format: '%b'}),
vl.y().average('temp_max').title('Avg. Temperature °C'),
vl.y2().average('temp_min'),
vl.color().fieldN('location')
);
const tempMid = vl.markLine({tooltip: true}).encode(
vl.x().month('date'),
vl.y().average('temp_mid'),
vl.color().fieldN('location')
);
return vl.layer(tempMinMax, tempMid)
.data(weather) // data in the layer
.transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid')) // transform in layer
.render();
}
vl.markBar({tooltip: true})
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Max Temperature (°C)'),
vl.y().count()
)
.render()
{
const colors = {
domain: ['drizzle', 'fog', 'rain', 'snow','sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52' ] // custom color range
}; // custom color range
return vl.markBar({tooltip: true})
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Max Temp (°C)'),
vl.y().count().title("number of days"),
vl.color().fieldN('weather').scale(colors), // use custom color scale
vl.column().fieldN('weather') // column facet
)
.width(150)
.height(150)
.render();
}
{
const colors = {
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
};
return vl.markBar({tooltip: true}) // basic histogram
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Max Temp (°C)'),
vl.y().count().title("number of days"),
vl.color().fieldN('weather').scale(colors)
)
.width(150)
.height(150)
.facet({column: vl.field('weather')}) // column facet based on weather field
.data(weather)
.transform(vl.filter('datum.location == "Seattle"')) // apply filter to top-level faceted chart
.render();
}
{
const tempMinMax = vl.markArea({opacity: 0.3, tooltip: true}).encode(
vl.x().month('date').title(null).axis({format: '%b'}),
vl.y().average('temp_max').title('Avg. Temperature (°C)'),
vl.y2().average('temp_min'),
vl.color().fieldN('location')
);
const tempMid = vl.markLine({tooltip: true}).encode(
vl.x().month('date'),
vl.y().average('temp_mid'),
vl.color().fieldN('location')
);
return vl.layer(tempMinMax, tempMid)
.facet({column: vl.field('location')})
.data(weather)
.transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid'))
.render();
}
vl.markLine({tooltip: true})
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.y().average('temp_max').title("Average Max Temperature (°C)"),
vl.color().fieldN('location')
)
.render()
{
const base = vl.markLine({tooltip: true}) // base chart
.data(weather)
.encode(
vl.x().month('date').title(null), // only x-axis provided
vl.color().fieldN('location')
)
.width(240)
.height(180);
// one line for each of the charts, specifying y-axis axis
const temp = base.encode(vl.y().average('temp_max').title("Average Max Temperature (°C)"));
const precip = base.encode(vl.y().average('precipitation').title("Average Precipitation (in)"));
const wind = base.encode(vl.y().average('wind').title("Average Wind (mph)"));
return vl.hconcat(temp, precip, wind).render(); // horizontal concatenation
}
vl.markLine({tooltip: true})
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.y().average(vl.repeat('column')), // specify repeat in y-axis
vl.color().fieldN('location')
)
.width(240)
.height(180)
.repeat({column: ['temp_max', 'precipitation', 'wind']}) // specify columns for y-axes
.render();
vl.markCircle({size: 15, opacity: 0.5, tooltip: true})
.encode(
vl.x().fieldQ(vl.repeat('column')), // repeat for column
vl.y().fieldQ(vl.repeat('row')), // repeat for row
)
.width(150)
.height(150)
.repeat({
row: ['temp_max', 'precipitation', 'wind'],
column: ['temp_max', 'precipitation', 'wind']
})
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.render()
{
const basic1 = vl.markBar({tooltip: true})
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.encode(
vl.x().month('date').type('ordinal'),
vl.y().average('temp_max')
);
const basic2 = vl.markRule({stroke: 'firebrick'})
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.encode(
vl.y().average('temp_max')
);
return vl.hconcat(basic1, basic2).render();
}
vl.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.layer(
vl.markBar({tooltip: true}).encode(
vl.x().month('date').type('ordinal').title('Month'),
vl.y().average(vl.repeat('column'))
),
vl.markRule({stroke: 'firebrick'}).encode(
vl.y().average(vl.repeat('column'))
)
)
.width(200)
.height(150)
.repeat({column: ['temp_max', 'precipitation', 'wind']})
.render();
{
const splom = vl.markCircle({size: 15, opacity: 0.5, tooltip: true}) // SPLOM
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ(vl.repeat('row')),
)
.width(125)
.height(125)
.repeat({
row: ['temp_max', 'precipitation', 'wind'],
column: ['temp_max', 'precipitation', 'wind']
});
const dateHist = vl.layer( // date histograms
vl.markBar({tooltip: true}).encode(
vl.x().month('date').type('ordinal').title('Month'),
vl.y().average(vl.repeat('row'))
),
vl.markRule({stroke: 'firebrick'}).encode(
vl.y().average(vl.repeat('row'))
)
)
.width(175)
.height(125)
.repeat({row: ['temp_max', 'precipitation', 'wind']});
const tempHist = vl.markBar({tooltip: true}) // temperature histograms
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),
vl.y().count(),
vl.color().fieldN('weather').scale({
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
})
)
.width(115)
.height(100)
.facet({column: vl.field('weather')});
return vl.data(weather) // pulling the dashboard all together
.transform(vl.filter('datum.location == "Seattle"'))
.title('Seattle Weather Dashboard')
.vconcat(
vl.hconcat(splom, dateHist), // arrange SPLOM and date histograms horizontally
tempHist // arrange temp histograms underneath that
)
.resolve({legend: {color: 'independent'}})
.config({axis: {labelAngle: 0}})
.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.
