Professor of Computer Science at Old Dominion University
Public
Edited
Feb 23, 2023
Paused
2 stars
columns = Object.keys(cars[0])
hist_columns = ['Cylinders', 'Displacement', 'Horsepower','Acceleration']
{
// variables to get the dashboard to fit nicely
const scatter_sq = width * 0.47;
const hist_width = width * 0.33;
const num_hist = 4;
const hist_height = (scatter_sq/num_hist)-(6*num_hist)
// brushing and linking example from https://observablehq.com/@uwdata/interaction
const brush = vl.selectInterval().encodings('x').resolve('intersect');
// countries bar chart
const origin_chart = vl.markBar()
.height(50).width(scatter_sq)
// .transform(vl.filter(brush)) // uncomment this to update bar chart
.encode(
vl.x().count().title(null),
vl.y().fieldN('Origin'),
vl.color().fieldN('Origin').legend(null).scale({scheme: 'tableau10'}));
// base histogram
const hist = vl.markBar()
.encode(
vl.x().fieldQ(vl.repeat('row'))
.bin({maxbins: 100, minstep: 1}) // up to 100 bins, but no smaller than 1 unit
.axis({format: 'd', titleAnchor: 'start'}), // integer format, left-aligned title
vl.y().count().title(null));
// combined histogram with total in grey and selected in blue (when selected)
// and repeated for each of the attributes
const hist_layer = vl.layer(
hist.params(brush).encode(vl.color().value('lightgrey')), // turn all grey
hist.transform(vl.filter(brush))) // layer selected values on top in default blue
.height(hist_height)
.width(hist_width)
.repeat({row: hist_columns});
// scatterplot
const scatter = vl.markPoint()
.height(scatter_sq).width(scatter_sq)
.encode(
vl.x().fieldQ("Weight_in_lbs").title("Weight (lbs)"),
vl.y().fieldQ("Miles_per_Gallon").title("MPG"),
vl.color().if(brush, vl.fieldN('Origin')).value('grey').scale({scheme: 'tableau10'}),
vl.opacity().if(brush, vl.value(0.8)).value(0.1),
vl.tooltip(columns)
);
// place the histograms and scatterplot
return vl.hconcat(vl.vconcat(origin_chart, scatter), hist_layer)
.data(cars)
.render();
}
import { vl } from "@vega/vega-lite-api-v5"
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.
