Data visualization and analysis at the University of Washington, Seattle.
input = aq.fromCSV(
await FileAttachment("unemployment.tsv").text(),
{ delimiter: '\t' }
)
input.view()
vl_data = input
.fold(aq.not('name'), { as: ['month', 'value'] })
.derive({ month: d => op.parse_date(d.month) })
vl_data.view()
vl.markLine({ strokeWidth: 1.5, opacity: 0.8, blend: 'multiply' })
.data(vl_data)
.encode(
vl.x().fieldT('month').title(null),
vl.y().fieldQ('value').title('Unemployment %').axis({
domain: false, tickCount: 10, titleX: 3, titleY: 0,
titleAngle: 0, titleAlign: 'left', titleBaseline: 'middle'
}),
vl.detail().fieldN('name'),
vl.tooltip().fieldN('name')
)
.width(width)
.height(500)
.config({
autosize: 'fit-x',
axis: { grid: false },
view: { stroke: null }
})
.render()
Plot = require('@observablehq/plot')
Plot.plot({
width: width,
height: 500,
x: { label: null, ticks: 10 },
y: { label: '↑ Unemployment %' },
marks: [
Plot.line(vl_data, {
x: 'month', y: 'value', z: 'name', title: 'name',
stroke: '#4e79a7', strokeWidth: 1.5, opacity: 0.8, mixBlendMode: 'multiply'
})
],
})
folded = input
.fold(aq.not('name'), { as: ['month', 'value'] })
series = folded
.groupby('name')
.rollup({ values: op.array_agg('value') })
.objects()
dates = folded
.dedupe('month')
.derive({ month: d => op.parse_date(d.month) })
.array('month')
data = ({ y: 'Unemployment %', series, dates })
import { chart } with { data } from '@d3/multi-line-chart@299'
chart // add the chart template with our custom input data
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.
