Data visualization and analysis at the University of Washington, Seattle.
import {render} from '@vega/vega-lite-api-v5'
import {printTable} from '@uwdata/data-utilities'
data = require('vega-datasets@2') // import vega_datasets
cars = data['cars.json']() // load and parse cars data
printTable(cars.slice(0, 5)) // display the first five rows
data['cars.json'].url
df = [
{"city": "Seattle", "month": "Apr", "precip": 2.68},
{"city": "Seattle", "month": "Aug", "precip": 0.87},
{"city": "Seattle", "month": "Dec", "precip": 5.31},
{"city": "New York", "month": "Apr", "precip": 3.94},
{"city": "New York", "month": "Aug", "precip": 4.13},
{"city": "New York", "month": "Dec", "precip": 3.58},
{"city": "Chicago", "month": "Apr", "precip": 3.62},
{"city": "Chicago", "month": "Aug", "precip": 3.98},
{"city": "Chicago", "month": "Dec", "precip": 2.56},
];
render({
mark: 'point',
data: { values: df }
})
render({
mark: 'point',
data: { values: df },
encoding: {
y: { field: 'city', type: 'nominal' }
}
})
render({
mark: 'point',
data: { values: df },
encoding: {
y: { field: 'city', type: 'nominal' }
}
})
render({
mark: 'point',
data: { values: df },
encoding: {
x: { field: 'precip', type: 'quantitative' },
y: { field: 'city', type: 'nominal' }
}
})
render({
mark: 'point',
data: { values: df },
encoding: {
x: { aggregate: 'average', field: 'precip' },
y: { field: 'city', type: 'nominal' }
}
})
render({
mark: 'bar',
data: { values: df },
encoding: {
x: { aggregate: 'average', field: 'precip' },
y: { field: 'city', type: 'nominal' }
}
})
render({
mark: 'bar',
data: { values: df },
encoding: {
y: { aggregate: 'average', field: 'precip' },
x: { field: 'city', type: 'nominal' }
}
})
render({
mark: { type: 'point', color: 'firebrick' },
data: { values: df },
encoding: {
x: { field: 'precip', type: 'quantitative', scale: { type: 'log' }, title: 'Log-Scaled Precipitation' },
y: { field: 'city', type: 'nominal', title: 'City' }
}
})
render({
mark: 'line',
data: { values: cars },
encoding: {
x: { field: 'Year', type: 'temporal' },
y: { aggregate: 'average', field: 'Miles_per_Gallon' }
}
})
{
const line = {
mark: 'line',
data: { values: cars },
encoding: {
x: { field: 'Year', type: 'temporal' },
y: { aggregate: 'average', field: 'Miles_per_Gallon' }
}
};
const point = {
mark: 'circle',
data: { values: cars },
encoding: {
x: { field: 'Year', type: 'temporal' },
y: { aggregate: 'average', field: 'Miles_per_Gallon' }
}
};
return render({ layer: [line, point] });
}
{
const line = {
mark: 'line',
data: { values: cars },
encoding: {
x: { field: 'Year', type: 'temporal' },
y: { aggregate: 'average', field: 'Miles_per_Gallon' }
}
};
return render({ layer: [line, {...line, mark: 'circle'}] });
}
{
const mpg = {
mark: 'line',
data: { values: cars },
encoding: {
x: { field: 'Year', type: 'temporal' },
y: { aggregate: 'average', field: 'Miles_per_Gallon' }
}
};
const hp = {
mark: 'line',
data: { values: cars },
encoding: {
x: { field: 'Year', type: 'temporal' },
y: { aggregate: 'average', field: 'Horsepower' }
}
};
return render({
hconcat: [
{ layer: [mpg, { ...mpg, mark: 'circle' }] },
{ layer: [hp, { ...hp, mark: 'circle' }] }
]
});
}
render({
mark: 'point',
data: { values: cars },
encoding: {
x: { field: 'Horsepower', type: 'quantitative' },
y: { field: 'Miles_per_Gallon', type: 'quantitative' },
color: { field: 'Origin' },
tooltip: [ {field: 'Name'}, {field: 'Origin'} ] // show the Name and Origin fields in a tooltip
}
})
{
// create an interval selection over an x-axis encoding
const brush = { name: 'brush', select: 'interval', encodings: ['x'] };
// determine opacity based on brush
const opacity = {
condition: { param: 'brush', value: 0.9 }, // if in brush...
value: 0.1 // else
};
// an overview histogram of cars per year
// add the interval brush to select cars over time
const overview = {
mark: 'bar',
encoding: {
x: {
field: 'Year', type: 'ordinal', timeUnit: 'year', // extract year unit, treat as ordinal
axis: { title: null, labelAngle: 0 } // no title, no label angle
},
y: { aggregate: 'count', title: null }, // counts, no axis title
opacity // modulate bar opacity based on the brush selection
},
params: [ brush ], // add interval brush selection to the chart
width: 400, // use the full default chart width
height: 50 // set chart height to 50 pixels
};
// a detail scatterplot of horsepower vs. mileage
const detail = {
mark: 'point',
encoding: {
x: { field: 'Horsepower', type: 'quantitative' },
y: { field: 'Miles_per_Gallon', type: 'quantitative' },
opacity // modulate point opacity based on the brush selection
}
};
// vertically concatenate (vconcat) charts
return render({
data: { values: cars },
vconcat: [ overview, detail ]
});
}
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.
