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)
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.