sq`20% to 40%`
viewof tennisBallDiameter = sq`d_t = normal({ p5: 6.54, p95: 6.86 }) / 100`
viewof tennisBallVolume = sq(tennisBallDiameter)`V_t = 4/3 * Math.pi * (d_t^2)`
viewof isDoubleDeckerBus = Inputs.toggle({ label: "Is double decker bus?" })
viewof busVolume = sq`
l_b = 10 to 15
w_b = 2 to 2.5
h_b = (3 to 4) * ${isDoubleDeckerBus ? 2 : 1}
V_b = l_b * w_b * h_b
`
viewof availableSpace = sq`space = 60% to 85%`
viewof worstPackingEfficiency = Inputs.range([0, 74], {
label: "Worst-case % of space filled with tennis balls",
value: 63.5
})
viewof numberOfBalls = sq(tennisBallVolume, busVolume, availableSpace, {
distributionChartSettings: { showSummary: false }
})`
(V_b * space * (${worstPackingEfficiency}% to 74%)) / V_t
`
We can pull the result out of Squiggle using Observable view feature. The number of tennis balls that can fit into a bus is ~${Math.round(d3.mean(numberOfBalls.result))}.
ReactVersion = "^18.2.0"
React = import(`https://esm.sh/react@${ReactVersion}`)
ReactDOM = import(`https://esm.sh/react-dom@${ReactVersion}`)
HtmVersion = "^3.1.1"
jsx = (await import(`https://esm.sh/htm@${HtmVersion}`)).default.bind(
React.createElement
)
SquiggleVersion = "^0.9.2"
components = import(
`https://esm.sh/@quri/squiggle-components@${SquiggleVersion}?exports=SqProject,SquiggleViewer`
)
resultMap = (
await import(
`https://esm.sh/@quri/squiggle-lang@${SquiggleVersion}?exports=resultMap`
)
).resultMap
async function run(project, code, continues) {
const sourceId = crypto.randomUUID();
project.setSource(sourceId, code);
project.setContinues(sourceId, continues);
await project.run(sourceId);
const output = project.getOutput(sourceId);
return [sourceId, output];
}
// html`<link rel="stylesheet" href="https://esm.sh/@quri/squiggle-components@${SquiggleVersion}/dist/full.css" />`
async function render(output, options) {
const element = html`<div />`;
const shadow = element.attachShadow({ mode: "open" });
shadow.appendChild(
html`<link rel="stylesheet" href="https://esm.sh/@quri/squiggle-components@${SquiggleVersion}/dist/full.css" />`
);
const reactRootNode = shadow.appendChild(html`<div />`);
ReactDOM.render(
jsx`
${
output.value.result.tag !== "Void" &&
jsx`<${components.SquiggleViewer} value=${output.value.result} ...${options} />`
}
${
output.value.bindings._value.size > 0 &&
jsx`<${
components.SquiggleViewer
} value=${output.value.bindings.asValue()} ...${options} />`
}
`,
reactRootNode
);
return element;
}
async function cell(project, code, dependencies = [], options = {}) {
const continues = dependencies.map((dependency) =>
typeof dependency === "string" ? dependency : dependency.sourceId
);
const [sourceId, output] = await run(project, code, continues);
const element = await render(output, options);
element.value = { sourceId, result: output.value.result.asJS(), continues };
return Generators.disposable(element, (element) =>
project.removeSource(element.value.sourceId)
);
}
function cellFactory(project) {
return (code, dependencies, options) =>
cell(project, code, dependencies, options);
}
cellGen = cellFactory
sqFactory = (project) =>
(...args) => {
if (Array.isArray(args.at(0))) {
const code = String.raw(args.at(0), ...args.slice(1));
return cell(project, code);
}
let continues, options;
if (typeof args.at(-1) === "object" && !("sourceId" in args.at(-1))) {
options = args.at(-1);
continues = args.slice(0, -1);
} else {
continues = [...args];
}
return function (strings, ...substitutions) {
const code = String.raw(strings, substitutions);
return cell(project, code, continues, options);
};
}
newProject = components.SqProject.create
defaultProject = newProject()
sq = sqFactory(defaultProject)
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.
