Published
Edited
Nov 5, 2020
1 star
Insert cell
Insert cell
table = aq.fromCSV(votes)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
return Object.assign(
html`<button>COPY TO CLIPBOARD</button>`,
{onclick: () => copy(by_year_2016)}
);
}
Insert cell
Insert cell
by_state = by_year
.join(aq.fromCSV(states), null, [aq.all(), ['latitude', 'longitude']])
.derive({ order: ({ latitude, longitude }) => Math.sin(90) * longitude + Math.cos(90) * latitude })
.orderby('year', 'order')
.reify()
.groupby('year')
.pivot('state', 'value', { sort: false })
.join(aq.fromCSV(candidates), null, [aq.all(), ['democrats', 'republicans', 'winner']])

Insert cell
by_state.view()
Insert cell
Insert cell
Insert cell
md`## Calculate column width`
Insert cell
widths = aq.fromCSV(states).derive({ width: d => d.votes / 270 * 100 }).toJSON()
Insert cell
{
return Object.assign(
html`<button>COPY TO CLIPBOARD</button>`,
{onclick: () => copy(widths)}
);
}
Insert cell
Insert cell
Insert cell
Insert cell
candidates = {
const url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQ4O_Vc5K1zcGRZ0Fw4ihMDB3LCvShxlDmRGyLskzX-9YFYWT1G7u4oBu1UJGlpb3-Yce0Ra0u-aF61/pub?gid=1236465032&single=true&output=csv'
return fetch(`https://cors-anywhere.herokuapp.com/${url}`).then(response => response.text());
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell

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.
Learn more