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()
.data(weather)
.encode(
vl.x().month('date'),
vl.y().average('temp_max'),
vl.y2().average('temp_min')
)
.render()
vl.markArea({opacity: 0.3})
.data(weather)
.encode(
vl.x().month('date'),
vl.y().average('temp_max'),
vl.y2().average('temp_min'),
vl.color().fieldN('location')
)
.render()
vl.markLine()
.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')
)
.render()
{
const tempMinMax = vl.markArea({opacity: 0.3})
.data(weather)
.encode(
vl.x().month('date'),
vl.y().average('temp_max'),
vl.y2().average('temp_min'),
vl.color().fieldN('location')
);
const tempMid = vl.markLine()
.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();
}
{
const tempMinMax = vl.markArea({opacity: 0.3})
.data(weather)
.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()
.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();
}
{
const tempMinMax = vl.markArea({opacity: 0.3}).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().encode(
vl.x().month('date'),
vl.y().average('temp_mid'),
vl.color().fieldN('location')
);
return vl.layer(tempMinMax, tempMid)
.data(weather)
.transform(vl.calculate('(datum.temp_min + datum.temp_max) / 2').as('temp_mid'))
.render();
}
vl.markLine({interpolate: 'monotone', stroke: 'grey'})
.data(weather)
.transform(
vl.filter('datum.location == "Seattle"')
)
.encode(
vl.x().month('date').title(null),
vl.y().average('precipitation').title('Precipitation')
)
.render()
{
const tempMinMax = vl.markArea({opacity: 0.3}).encode(
vl.x().month('date').title(null).axis({format: '%b'}),
vl.y().average('temp_max').title('Avg. Temperature °C'),
vl.y2().average('temp_min')
);
const precip = vl.markLine({interpolate: 'monotone', stroke: 'grey'}).encode(
vl.x().month('date').title(null),
vl.y().average('precipitation').title('Precipitation')
);
return vl.layer(tempMinMax, precip)
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.render();
}
{
const tempMinMax = vl.markArea({opacity: 0.3}).encode(
vl.x().month('date').title(null).axis({format: '%b'}),
vl.y().average('temp_max').title('Avg. Temperature °C'),
vl.y2().average('temp_min')
);
const precip = vl.markLine({interpolate: 'monotone', stroke: 'grey'}).encode(
vl.x().month('date').title(null),
vl.y().average('precipitation').title('Precipitation')
);
return vl.layer(tempMinMax, precip)
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.resolve({scale: {y: 'independent'}}) // resolve to independent y channel scales
.render();
}
vl.markBar()
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),
vl.y().count()
)
.render()
{
const colors = {
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
};
return vl.markBar()
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),
vl.y().count(),
vl.color().fieldN('weather').scale(colors),
vl.column().fieldN('weather')
)
.width(150)
.height(150)
.render();
}
{
const colors = {
domain: ['drizzle', 'fog', 'rain', 'snow', 'sun'],
range: ['#aec7e8', '#c7c7c7', '#1f77b4', '#9467bd', '#e7ba52']
};
return vl.markBar()
.encode(
vl.x().fieldQ('temp_max').bin(true).title('Temperature (°C)'),
vl.y().count(),
vl.color().fieldN('weather').scale(colors)
)
.width(150)
.height(150)
.facet({column: vl.field('weather')})
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.render();
}
{
const tempMinMax = vl.markArea({opacity: 0.3}).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().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();
}
{
const tempMinMax = vl.markArea({opacity: 0.3}).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().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'))
.resolve({axis: {y: 'independent'}})
.render();
}
{
const tempMinMax = vl.markArea({opacity: 0.3}).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().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'))
.resolve({scale: {y: 'independent'}})
.render();
}
vl.markLine()
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.y().average('temp_max'),
vl.color().fieldN('location')
)
.render()
{
const base = vl.markLine()
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.color().fieldN('location')
)
.width(240)
.height(180);
const temp = base.encode(vl.y().average('temp_max'));
const precip = base.encode(vl.y().average('precipitation'));
const wind = base.encode(vl.y().average('wind'));
return vl.hconcat(temp, precip, wind).render();
}
vl.markLine()
.data(weather)
.encode(
vl.x().month('date').title(null),
vl.y().average(vl.repeat('column')),
vl.color().fieldN('location')
)
.width(240)
.height(180)
.repeat({column: ['temp_max', 'precipitation', 'wind']})
.render();
vl.markCircle({size: 15, opacity: 0.5})
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ(vl.repeat('row')),
)
.width(150)
.height(150)
.repeat({
row: ['temp_max', 'precipitation', 'wind'],
column: ['wind', 'precipitation', 'temp_max']
})
.data(weather)
.transform(vl.filter('datum.location == "Seattle"'))
.render()
{
const basic1 = vl.markBar()
.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().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})
.encode(
vl.x().fieldQ(vl.repeat('column')),
vl.y().fieldQ(vl.repeat('row')),
)
.width(125)
.height(125)
.repeat({
row: ['temp_max', 'precipitation', 'wind'],
column: ['wind', 'precipitation', 'temp_max']
});
const dateHist = vl.layer(
vl.markBar().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()
.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)
.transform(vl.filter('datum.location == "Seattle"'))
.title('Seattle Weather Dashboard')
.vconcat(
vl.hconcat(splom, dateHist),
tempHist
)
.resolve({legend: {color: 'independent'}})
.config({axis: {labelAngle: 0}})
.render();
}
movies = (await require('vega-datasets@1'))['movies.json']()
printTable(movies.slice(0, 5))
// Code here
// Code here
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.
