The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Oct 27, 2020
3 forks
60 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// currentShare ∈ [0,1] fraction of votes so far cast for Party A
// votesCounted ∈ [0,1] fraction of total votes that have been counted
// shareNeeded ∈ [0,1] fraction of remaining votes needed for Party A to win
shareNeeded = (currentShare, votesCounted) =>
votesCounted === 1
? currentShare > .5
? -Infinity
: currentShare < .5
? Infinity
: NaN
: (currentShare * votesCounted - winThreshold) / (votesCounted - 1)
Insert cell
winThreshold = 0.5
Insert cell
hue = Math.floor(Math.random() * 360)
Insert cell
color1 = `hsl(${hue}, 50%, 50%)`
Insert cell
color2 = `hsl(${(hue + 180) % 360}, 50%, 50%)`
Insert cell
party = (letter = "A") =>
html`<span style="color: ${
letter === "A" ? color1 : color2
}; font: 14px sans-serif; font-weight: bold;">PARTY ${letter}</span>`
Insert cell
Insert cell
// Simple table of results at top
import { table, pct } with { color1, color2, chart } from "8ed8fae68b806147"
Insert cell
// 2D draggable phase space
import { viewof chart } with { color1, color2 } from "7dde4d42ff1f3a76"
Insert cell
// Small multiples of phase space
import { minis } with { color1, color2, chart } from "6e7b258359052066"
Insert cell
// Small multiples of phase space, highlighting share needed to win and outcome
import { outcomes } with { color1, color2, chart, pov } from "fb29011ee10bdeee"
Insert cell
// Dual phase space introducing contours with cone of possible moves
import { viewof dualChart } with { color1, color2 } from "9ecea15c8d9a9f1f"
Insert cell
// Contour plot with semi-real historical paths drawn atop
import { chart as contours, outcome, bilateralLegend } with {
color1,
color2,
shareNeeded as value,
county
} from "1549aa94f8c6b9d1"
Insert cell
// Final small multiples with each county’s cone
import { viewof county } with { color1, color2 } from "16ab9fc154f01cc1"
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