Public
Edited
Mar 2, 2023
barPlot = (title, subtitle, sourceLink, sourceName, data) => {
const sortedData = data.orderby(['measure', 'caption']).objects()
const height = 230
const titleY = 0
const titleX = 10
const lineWidth = width * .5
const titleOptions = {
frameAnchor: 'top-left',
dx: titleX,
textAnchor: 'start',
stroke: colors.background,
lineHeight: 1.5
}
return Plot.plot({
width: width,
height: height,
marginRight: 45,
marginTop: 25,
marginLeft: 20,
style: {
background: colors.background,
color: colors.dark
},
y: {
axis: 'right',
grid: true,
tickSize: 0,
label: null,
tickPadding: 5,
tickFormat: d => d == 0 ? '' : d,
},
x: {
axis: null,
},
marks: [
Plot.barY(sortedData, {
x: 'caption',
y: 'measure',
title: 'caption',
fill: colors.light,
sort: {
x: 'y'
}
}),
Plot.line(sortedData, {
y: 'measure',
x: 'caption',
stroke: colors.darker,
curve: 'step',
}),
Plot.text([title], {
...titleOptions,
fill: colors.darker,
fontFamily: 'Oswald',
dy: titleY,
fontSize: 15,
lineAnchor: 'top',
lineWidth: lineWidth / 15
}),
Plot.text([subtitle], {
...titleOptions,
fill: colors.dark,
dy: titleY + (Math.ceil( title.length / (lineWidth / 10)) * 15) + 10,
fontSize: 11,
lineAnchor: 'top',
lineWidth: lineWidth / 10
}),
// Plot.text([sourceName], {
// ...titleOptions,
// fill: colors.dark,
// dy: titleY + 36,
// fontSize: 9,
// lineAnchor: 'top',
// href: () => sourceLink,
// target: '_blank',
// lineWidth: lineWidth / 9
// })
],
tooltip: {
fill: colors.highlight,
"stroke-width": 0
}
})
}
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.
