Exploring the politics of a digitally networked world.
{
const hover = vl
.selectSingle()
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.nearest(true) // select data point nearest the cursor
.empty('none'); // empty selection includes no data points
const lines = vl
.markLine({ strokeWidth: 2, opacity: 0.5, interpolate: 'monotone' })
.encode(
vl
.x()
.fieldT('date')
.timeUnit('utcyearmonthday')
.scale({ domain: date_extent_two, paddingInner: 0.1, paddingOuter: 0 })
.axis({ tickCount: 'month', format: '%B', grid: false, tickSize: 6 })
.title(null),
vl
.y()
.fieldQ('cases_rate')
.scale({ width, nice: false })
.axis({
tickCount: 4,
domain: false,
ticks: false,
labelAlign: 'left',
labelBaseline: 'bottom'
})
.title('Cases Per Capita'),
vl
.color()
.fieldN('county')
.legend(null)
// vl.size().fieldQ('population')
);
// shared base for new layers, filtered to hover selection
const base = lines.transform(vl.filter(hover));
// mark properties for text label layers
const label = { align: 'left', dx: 5, dy: -5 };
const white = { stroke: 'white', strokeWidth: 2 };
return vl
.layer(
lines, // add a rule mark to serve as a guide line
vl
.markRule({ color: '#aaa' })
.transform(vl.filter(hover))
.encode(vl.x().fieldT('date')),
// add circle marks for selected time points, hide unselected points
lines
.markCircle()
.select(hover) // use as anchor points for selection
.encode(
vl
.opacity()
.if(hover, vl.value(1))
.value(0)
),
// add white stroked text to provide a legible background for labels
base.markText(label, white).encode(vl.text().fieldN('county')),
// add text labels for stock prices
base.markText(label).encode(vl.text().fieldN('county'))
)
.data(al_county_comparative)
.transform(vl.filter('datum.past_week > 200'))
.width(width)
.height(width / 1.5)
.autosize({ type: 'fit-x', contains: 'padding' })
.config({
style: { cell: { stroke: 'transparent' } },
axis: { labelColor: '#929292', gridColor: '#ececec', title: null },
padding: { top: 5, right: 5, bottom: 5, left: 5 }
})
.render();
}
make_chart = (data, width, domain) => {
// const hover = vl
// .selectSingle()
// .on('mouseover') // select on mouseover events
// // .nearest(true) // select data point nearest the cursor
// .empty('none'); // empty selection includes no data points
// // .properties(type);
const rule_1 = vl
.markRule()
.data(
vl.json().values({
rally: '2020-05-30'
})
)
.encode(vl.x().fieldT('rally'));
const label_1 = vl
.markText({ xOffset: '-55', yOffset: "-150" })
.data(
vl.json().values({
label: 'First George Floyd Rally',
rally: '2020-05-30'
})
)
.encode(vl.text().fieldN('label'), vl.x().fieldT('rally'));
const bars = vl.markBar({ opacity: 0.1 }).encode(
vl
.x()
.fieldT('date')
.timeUnit('utcyearmonthday')
.scale({ domain: date_extent_two, paddingInner: 0.1, paddingOuter: 0 })
.axis({ tickCount: 'month', format: '%B', grid: false, tickSize: 6 })
.title(null),
vl
.y()
.fieldQ(type)
.scale({ domain, nice: false })
.axis({
tickCount: 4,
domain: false,
ticks: false,
labelAlign: 'left',
labelBaseline: 'bottom'
})
.title(null),
vl.color({ value: 'blue' }),
vl.tooltip([vl.fieldT('date'), 'cases', 'deaths'])
);
// Push the line/area layers to the right edge of the bars (1 bandwidth)
const xOffset =
width /
d3.timeDay.count(
new Date(date_extent_two[0]),
new Date(date_extent_two[1])
);
const line = bars
.markLine({ interpolate: 'monotone', xOffset })
.encode(vl.y().fieldQ('mean'));
const area = line.markArea({ opacity: 0.2, xOffset });
return vl
.layer(bars, area, line)
.data(data)
.transform(
vl.window({ op: 'mean', field: type, as: 'mean' }).frame([-3, 3])
)
.width(width)
.height(width / 3)
.autosize({ type: 'fit-x', contains: 'padding' })
.config({
style: { cell: { stroke: 'transparent' } },
axis: { labelColor: '#929292', gridColor: '#ececec', title: null },
padding: { top: 5, right: 5, bottom: 5, left: 5 }
})
.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.
