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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more