239 lines
3.7 KiB
Plaintext
239 lines
3.7 KiB
Plaintext
import { SquiggleChart } from "../components/SquiggleChart";
|
|
import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
|
|
|
|
<Meta title="Squiggle/SquiggleChart" component={SquiggleChart} />
|
|
|
|
export const Template = (props) => <SquiggleChart {...props} />;
|
|
/*
|
|
We have to hardcode a width here, because otherwise some interaction with
|
|
Storybook creates an infinite loop with the internal width
|
|
*/
|
|
const width = 600;
|
|
|
|
# Squiggle Chart
|
|
|
|
Squiggle chart evaluates squiggle expressions, and then returns a graph representing
|
|
the result of a squiggle expression.
|
|
|
|
A squiggle expression can have three different types of returns. A distribution,
|
|
a constant, and a function.
|
|
|
|
A distribution means that the result forms a probability distribution. This
|
|
could be continuous, discrete or mixed.
|
|
|
|
## Distributions
|
|
|
|
### Continuous Distributions (Symbolic)
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Continuous Symbolic"
|
|
args={{
|
|
code: "normal(5,2)",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
### Continuous Distributions (PointSet)
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Continuous Pointset"
|
|
args={{
|
|
code: "PointSet.fromDist(normal(5,2))",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
### Continuous Distributions (SampleSet)
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Continuous SampleSet"
|
|
args={{
|
|
code: "SampleSet.fromDist(normal(5,2))",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
### Discrete Distributions
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Discrete"
|
|
args={{
|
|
code: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Mixed distributions
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Mixed"
|
|
args={{
|
|
code: "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Multiple plots
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Multiple plots"
|
|
args={{
|
|
code: `
|
|
{
|
|
distributions: [
|
|
{
|
|
name: "one",
|
|
distribution: mx(0.5, normal(0,1))
|
|
},
|
|
{
|
|
name: "two",
|
|
distribution: mx(2, normal(5, 2)),
|
|
}
|
|
]
|
|
}
|
|
`,
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Constants
|
|
|
|
A constant is a simple number as a result. This has special formatting rules
|
|
to allow large and small numbers being printed cleanly.
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Constant"
|
|
args={{
|
|
code: "500000000",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Arrays
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Array"
|
|
args={{
|
|
code: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Errors
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Error"
|
|
args={{
|
|
code: "f(x) = normal(",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Booleans
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Boolean"
|
|
args={{
|
|
code: "3 == 3",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Functions (Distribution Output)
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Function to Distribution"
|
|
args={{
|
|
code: "foo(t) = normal(t,2)*normal(5,3); foo",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Functions (Number Output)
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Function to Number"
|
|
args={{
|
|
code: "foo(t) = t^2; foo",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Records
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="Record"
|
|
args={{
|
|
code: "{foo: 35 to 50, bar: [1,2,3]}",
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
## Strings
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="String"
|
|
args={{
|
|
code: '"Lucky day!"',
|
|
width,
|
|
}}
|
|
>
|
|
{Template.bind({})}
|
|
</Story>
|
|
</Canvas>
|
|
|
|
<Props of={SquiggleChart} />
|