Published
Edited
Aug 7, 2020
chart = html`
<div style="width=${markWidth}; height=${markHeight}">
<h3 style="text-align: center;">${title}</h3>
<p style="text-align: center;">${subtitle}</p>
${markRendered}
</div>
`
markWidth
embed = require("vega-embed")
vl = {
const [vega, vegalite, api, tooltip] = await Promise.all([
'vega@5.11.1',
'vega-lite@4.11.0',
'vega-lite-api@0.11.0',
'vega-tooltip@0.22.1'
].map(module => require(module)));
const options = {
config: {
// vega-lite default configuration
config: {
view: {continuousWidth: 400, continuousHeight: 300},
mark: {tooltip: null}
}
},
init: view => {
// initialize tooltip handler
view.tooltip(new tooltip.Handler().call);
// enable horizontal scrolling for large plots
if (view.container()) view.container().style['overflow-x'] = 'auto';
if (view.container()) view.container().style['height'] = markHeight;
if (view.container()) view.container().style['height'] = markWidth;
},
view: {
// view constructor options
loader: vega.loader({baseURL: 'https://cdn.jsdelivr.net/npm/vega-datasets@1/'}),
renderer: 'canvas'
}
};
return api.register(vega, vegalite, options);
}
data.length
table(data)
d3.max(data, d => d.pct_margin)
d3.min(data, d => d.pct_margin)
statewideYesVotes = d3.sum(data, d => d.yes_votes)
statewideNoVotes = d3.sum(data, d => d.no_votes)
statewideTotalVotes = statewideYesVotes + statewideNoVotes
statewidePctMargin = ((statewideYesVotes - statewideNoVotes) / statewideTotalVotes) * 100
geoURL = 'https://raw.githubusercontent.com/stlpublicradio/dailygraphics-archive/master/2018/2018-11-06-us-sen-mo-map/mocountieskc.json'
topoJSON = vl.topojson(geoURL)
.feature('mocountieskc')
markRendered = mark.render()
legendConfig = (
{
labelExpr: legendLabelExpression,
orient: "none",
direction: (markWidth >= 600 ? "vertical" : "horizontal"),
legendX: (markWidth >= 600 ? markWidth - 75 : markWidth - 115),
legendY: 10
}
)
colorEncoding = (
{
field: "pct_margin", type: "quantitative",
title: "Margin",
scale: {
domain: [-80, 0, 80],
scheme: "redblue",
},
legend: legendConfig
}
)
mark.render()
embed(mark.toSpec())
screen.height
markWidth
screen.height <= markWidth
markHeight = {
if (screen.height <= markWidth) {
return screen.height - 5;
} else if (markWidth >= 500) {
return 500;
} else {
return markWidth;
}
}
title = `Medicaid Expansion Passes`
subtitle = `On Tuesday, Missourians voted 'Yes' on Constitutional Amendment No. 2 by a ${d3.format(".1f")(statewidePctMargin)} percent margin.`
width
markWidth = {
if (width >= 1190) {
return Math.min(width - 518, 746)
} else if (width >= 990) {
return Math.min(width - 434, 746)
} else {
return width - 20
}
}
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.
