Published unlisted
Edited
Apr 10, 2022
{
let svg = d3.create('svg').attr('width', width).attr('height', 400)
let pad = 50, effective_height = 400-2*pad
let g = svg.append('g').attr('transform', `translate(${pad},${pad})`)
let tick_width = 60, tick_pad = 10
let y_scale = d3.scaleLinear().domain(domain).range([effective_height,0])
g.append('g').attr('class', 'axis y').call(d3.axisLeft(y_scale)).call(axis_tweak)
g.append('line')
.attr('x1', tick_pad).attr('x2', tick_pad+tick_width)
.attr('y1', effective_height).attr('y2', effective_height)
.attr('stroke-width', 1).attr('stroke', d3.hcl(0,0,30))
let roll = mean_est_distribution.dist()
let line_draw = g.append('line').attr('id', 'draw')
.attr('x1', tick_pad+.2*tick_width).attr('x2', tick_pad+.8*tick_width)
.attr('y1', y_scale(roll)).attr('y2', y_scale(roll))
.attr('stroke-width', 3).attr('stroke', d3.hcl(0,0,12))
while(true) {
yield Promises.tick(400).then(() => {
let roll = mean_est_distribution.dist()
line_draw
.attr('y1', y_scale(roll)).attr('y2', y_scale(roll))
return svg.node()
})
}
}
mean_est_distribution = generate_distribution()
{
let svg = d3.create('svg').attr('width', width).attr('height', 400)
let pad = 50, effective_height = 400-2*pad
let g = svg.append('g').attr('transform', `translate(${pad},${pad})`)
let tick_width = 60, tick_pad = 10
let y_scale = d3.scaleLinear().domain(domain).range([effective_height,0])
g.append('g').attr('class', 'axis y').call(d3.axisLeft(y_scale)).call(axis_tweak)
g.append('line')
.attr('x1', tick_pad).attr('x2', tick_pad+tick_width)
.attr('y1', effective_height).attr('y2', effective_height)
.attr('stroke-width', 1).attr('stroke', d3.hcl(0,0,30))
let roll = above_dot_distribution.dist()
let line_draw = g.append('line').attr('id', 'draw')
.attr('x1', tick_pad+.2*tick_width).attr('x2', tick_pad+.8*tick_width)
.attr('y1', y_scale(roll)).attr('y2', y_scale(roll))
.attr('stroke-width', 3).attr('stroke', d3.hcl(0,0,12))
g.append('circle').attr('id', 'dot')
.attr('cx', tick_pad+.5*tick_width).attr('cy', y_scale(k1)).attr('r', 5)
.attr('fill', d3.hcl(350,50,60))
while(true) {
yield Promises.tick(400).then(() => {
let roll = above_dot_distribution.dist()
line_draw
.attr('y1', y_scale(roll)).attr('y2', y_scale(roll))
return svg.node()
})
}
}
above_dot_distribution = generate_distribution()
k1 = Math.random() < .5 ? above_dot_distribution.mu-(2+4*Math.random()) : above_dot_distribution.mu+2+4*Math.random()
1-normal_cdf(k1,above_dot_distribution.mu,above_dot_distribution.sigma)
between_dots_distribution = generate_distribution()
normal_cdf(the_ks.k2,between_dots_distribution.mu,between_dots_distribution.sigma)-normal_cdf(the_ks.k1,between_dots_distribution.mu,between_dots_distribution.sigma)
between_rects_distribution = generate_distribution()
normal_cdf(rect_ks.k2,between_rects_distribution.mu,between_rects_distribution.sigma)-normal_cdf(rect_ks.k1,between_rects_distribution.mu,between_rects_distribution.sigma)
d3 = require('d3@5')
import {erf_hastings} from '@mbostock/error-function'
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.
