Published
Edited
Mar 17, 2021
Importers
29 stars
Food clockDisambiguating selection in a 2D treePerceptually more-uniform diverging color scatterplotDays since a U.S. President was last shotSingle-serving sitesDo you feel old?Dynamic scales deprive dashboards of institutional memoryNesting chevron pillsColumnar group byDe Moivre by generatorsShowing ESPN Receiver Tracking Metrics using weighted radar chartsCombine consecutive stringsDollar spectrumThe Feedback BathtubIs Visnu’s hex random?Dual axes are a great way to show correlation 🔥Promise.raceHealthcare plan payoff curvePlot image beeswarmGenerations on Google TrendsFor i of myriadChatterjee correlationChecking invariance of round trip-0 and 0Norms and central tendencyDisordering ULsData-driven table sort iconPlot: weather with sunrise and sunsetRecreating Östling’s regression visualizationsMixing knowledge and random guessesHow many five digit numbers are prime?Warping gridspaceSampling moodLow IDsTesting for OmicronAll Too WellDistance from square root to nearest factorSuper BogosortParrots of Telegraph HillNudibranch sightingsDecimal watershedsFirst Ladies of the United StatesEval-in-PlaceClassic Research in Data VisualizationResponsive PrettierObsv, obvsGenerating All Natural NumbersDaily Café PickerConcentration of MeasureDivide SeriesMultiply SeriesMultiplication and Division by Similar TrianglesRecursive typed table (sketch!)Lorenz CurveThe “Select cells” buttonRecursive viewof testBubble Map RaceReactive transition sketchHow to crash ObservableSpilhaus World TourSimpson’s paradox: CalendarsThe Cauchy DistributionEmoji frequenciesThe Man Comes AroundNot what I meant to doSVG numeral sketchesRSAMandelbrot’s binomial time bending??Re: “Can Moons Have Moons?”Continuous cursorParenthesis matching with vertical offsetsA filter icon that shows filtering instead of funnelingFlag of the Popular VoteFlag of the Popular VoteFlag of the Popular VoteTrailing zeroes in factorialsBitcoin fractal bubbles (animated)Bitcoin fractal bubbles
Sensitivity and Specificity (sketch)
Also listed in…
Coronavirus
height = 450
w = 300
h = 300
x = d3.scaleLinear().range([0, w])
y = d3.scaleLinear().range([0, h])
mutable p_a = Math.random()
mutable p_b_given_a = Math.random()
mutable p_b_given_not_a = Math.random()
mutable p_b = null
mutable p_a_given_b = null
mutable p_a_given_not_b = null
variables = [
{
name: "P(A)",
concrete: "Sick",
axis: 0,
side: 0,
level: 1,
derived: false,
derivation: () =>
mutable p_b * mutable p_a_given_b +
(1 - mutable p_b) * mutable p_a_given_not_b,
value: function(_) {
return arguments.length ? (mutable p_a = _) : mutable p_a;
}
},
{
name: "P(B|A)",
concrete: "If sick, positive",
axis: 1,
side: 0,
level: 0,
derived: false,
derivation: () => (mutable p_a_given_b * mutable p_b) / mutable p_a,
value: function(_) {
return arguments.length ? (mutable p_b_given_a = _) : mutable p_b_given_a;
}
},
{
name: "P(B|¬A)",
concrete: "If healthy, positive",
axis: 1,
side: 1,
level: 0,
derived: false,
derivation: () =>
((1 - mutable p_a_given_b) * mutable p_b) / (1 - mutable p_a),
value: function(_) {
return arguments.length
? (mutable p_b_given_not_a = _)
: mutable p_b_given_not_a;
}
},
{
name: "P(B)",
concrete: "Test positive",
axis: 1,
side: 0,
level: 1,
derived: true,
derivation: () =>
mutable p_a * mutable p_b_given_a +
(1 - mutable p_a) * mutable p_b_given_not_a,
value: function(_) {
return arguments.length ? (mutable p_b = _) : mutable p_b;
}
},
{
name: "P(A|B)",
concrete: "If positive, sick",
axis: 0,
side: 0,
level: 0,
derived: true,
derivation: () => (mutable p_b_given_a * mutable p_a) / mutable p_b,
value: function(_) {
return arguments.length ? (mutable p_a_given_b = _) : mutable p_a_given_b;
}
},
{
name: "P(A|¬B)",
concrete: "If negative, sick",
axis: 0,
side: 1,
level: 0,
derived: true,
derivation: () =>
((1 - mutable p_b_given_a) * mutable p_a) / (1 - mutable p_b),
value: function(_) {
return arguments.length
? (mutable p_a_given_not_b = _)
: mutable p_a_given_not_b;
}
}
]
areas = [
{
name: "P(A ⋀ B)",
concrete: "True positives",
color: "#c9f6ab",
textColor: "#3e6b21",
value: () => mutable p_a * mutable p_b_given_a,
corners: () =>
variables[0].derived
? [[0, 0], [mutable p_b, mutable p_a_given_b]]
: [[0, 0], [mutable p_b_given_a, mutable p_a]],
coords: () =>
variables[0].derived
? [mutable p_b / 2, mutable p_a_given_b / 2]
: [mutable p_b_given_a / 2, mutable p_a / 2]
},
{
name: "P(A ⋀ ¬B)",
concrete: "False negatives",
color: "#d1dbc9",
textColor: "#435438",
value: () => mutable p_a * (1 - mutable p_b_given_a),
corners: () =>
variables[0].derived
? [[1, 0], [mutable p_b, mutable p_a_given_not_b]]
: [[1, 0], [mutable p_b_given_a, mutable p_a]],
coords: () =>
variables[0].derived
? [(mutable p_b + 1) / 2, mutable p_a_given_not_b / 2]
: [(mutable p_b_given_a + 1) / 2, mutable p_a / 2]
},
{
name: "P(¬A ⋀ B)",
concrete: "False positives",
color: "#ffb2ac",
textColor: "#882620",
value: () => (1 - mutable p_a) * mutable p_b_given_not_a,
corners: () =>
variables[0].derived
? [[0, 1], [mutable p_b, mutable p_a_given_b]]
: [[0, 1], [mutable p_b_given_not_a, mutable p_a]],
coords: () =>
variables[0].derived
? [mutable p_b / 2, (mutable p_a_given_b + 1) / 2]
: [mutable p_b_given_not_a / 2, (mutable p_a + 1) / 2]
},
{
name: "P(¬A ⋀ ¬B)",
concrete: "True negatives",
color: "#f1f1f1",
textColor: "#333333",
value: () => (1 - mutable p_a) * (1 - mutable p_b_given_not_a),
corners: () =>
variables[0].derived
? [[1, 1], [mutable p_b, mutable p_a_given_not_b]]
: [[1, 1], [mutable p_b_given_not_a, mutable p_a]],
coords: () =>
variables[0].derived
? [(mutable p_b + 1) / 2, (mutable p_a_given_not_b + 1) / 2]
: [(mutable p_b_given_not_a + 1) / 2, (mutable p_a + 1) / 2]
}
]
cornersToPath = ([[x0, y0], [x1, y1]]) =>
`M ${x(x0)} ${y(y0)} H ${x(x1)} V ${y(y1)} H ${x(x0)} Z`
function getLineFunctionFromPoints(a, b) {
var m = (b[1] - a[1]) / (b[0] - a[0]);
return x => m * (x - a[0]) + a[1];
}
d3 = require("d3@5")
style = html`<style>
.graphic svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.graphic rect {
fill: none;
stroke: black;
}
.graphic line.line2 {
stroke: black;
}
.graphic line.varline {
stroke: #ddd;
stroke-dasharray: 2,2;
}
.graphic text {
text-anchor: middle;
font-family: sans-serif;
/*transition: fill .2s;*/
}
.graphic text.derived {
fill: #ddd;
}
.graphic g.area text {
font-size: 12px;
}
.graphic div.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
pointer-events: none;
cursor: wait;
}
.sens-spec, .sens-spec * {
position: absolute;
font-family: sans-serif;
font-size: .9em;
font-weight: bold;
color: #0274fe;
}
</style>`
_width = Math.min(640, width)
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.