Changed squiggle display heights to be more reasonable

This commit is contained in:
Ozzie Gooen 2022-06-16 16:15:48 -07:00
parent d4535df712
commit 67c478b4c0
3 changed files with 161 additions and 62 deletions

View File

@ -26,6 +26,7 @@ export interface SquiggleEditorProps {
diagramStart?: number;
/** If the result is a function, where the function ends */
diagramStop?: number;
height?: number;
/** If the result is a function, how many points along the function it samples */
diagramCount?: number;
/** when the environment changes. Used again for notebook magic*/
@ -51,6 +52,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
diagramStart = 0,
diagramStop = 10,
diagramCount = 20,
height = 200,
onChange,
bindings = defaultBindings,
jsImports = defaultImports,
@ -78,6 +80,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
</div>
<SquiggleChart
width={width}
height={height}
environment={environment}
squiggleString={expression}
chartSettings={chartSettings}

View File

@ -22,22 +22,26 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
When <code>5 to 10</code> is entered, both numbers are positive, so it
generates a lognormal distribution with 5th and 95th percentiles at 5 and
10.
<SquiggleEditor initialSquiggleString="5 to 10" />
<SquiggleEditor initialSquiggleString="5 to 10" height={60} />
</TabItem>
<TabItem value="ex3" label="to(5,10)">
<code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
<SquiggleEditor initialSquiggleString="to(5,10)" />
<SquiggleEditor initialSquiggleString="to(5,10)" height={60} width={600} />
</TabItem>
<TabItem value="ex2" label="-5 to 5">
When <code>-5 to 5</code> is entered, there's negative values, so it
generates a normal distribution. This has 5th and 95th percentiles at 5 and
10.
<SquiggleEditor initialSquiggleString="-5 to -3" />
<SquiggleEditor initialSquiggleString="-5 to -3" height={60} width={600} />
</TabItem>
<TabItem value="ex4" label="1 to 10000">
It's very easy to generate distributions with very long tails. If this
happens, you can click the "log x scale" box to view this using a log scale.
<SquiggleEditor initialSquiggleString="1 to 10000" />
<SquiggleEditor
initialSquiggleString="1 to 10000"
height={60}
width={600}
/>
</TabItem>
</Tabs>
@ -76,16 +80,31 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
<Tabs>
<TabItem value="ex1" label="Simple" default>
<SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
<SquiggleEditor
initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)"
height={60}
/>
</TabItem>
<TabItem value="ex2" label="With Weights">
<SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
<SquiggleEditor
initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex3" label="With Continuous and Discrete Inputs">
<SquiggleEditor initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
<SquiggleEditor
initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex4" label="Array of Distributions Input">
<SquiggleEditor initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])" />
<SquiggleEditor
initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])"
height={60}
width={600}
/>
</TabItem>
</Tabs>
@ -113,7 +132,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
<SquiggleEditor
initialSquiggleString={`hours_the_project_will_take = 5 to 20
chance_of_doing_anything = 0.8
mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`} height={60}
/>
</details>
@ -128,7 +147,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
initialSquiggleString={`forecast = 3 to 30
chance_completely_wrong = 0.05
forecast_if_completely_wrong = -100 to 200
mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`} height={60}
/>
</details>
@ -141,10 +160,14 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
<Tabs>
<TabItem value="ex1" label="normal(5,1)" default>
<SquiggleEditor initialSquiggleString="normal(5, 1)" />
<SquiggleEditor initialSquiggleString="normal(5, 1)" height={60} />
</TabItem>
<TabItem value="ex2" label="normal(100000000000, 100000000000)">
<SquiggleEditor initialSquiggleString="normal(100000000000, 100000000000)" />
<SquiggleEditor
initialSquiggleString="normal(100000000000, 100000000000)"
height={60}
width={600}
/>
</TabItem>
</Tabs>
@ -165,7 +188,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
you take the log of our lognormal distribution. They can be difficult to directly reason about.
Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" />
<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" height={60} />
### Arguments
@ -189,7 +212,8 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
normalStdDev = 2
logOfLognormal = log(lognormal(normalMean, normalStdDev))
[logOfLognormal, normal(normalMean, normalStdDev)]`}
/>
/>{" "}
height={60}
</details>
## Uniform
@ -198,7 +222,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
<SquiggleEditor initialSquiggleString="uniform(3,7)" />
<SquiggleEditor initialSquiggleString="uniform(3,7)" height={60} />
### Arguments
@ -236,19 +260,35 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
<Tabs>
<TabItem value="ex1" label="pointMass(3)" default>
<SquiggleEditor initialSquiggleString="pointMass(3)" />
<SquiggleEditor initialSquiggleString="pointMass(3)" height={60} />
</TabItem>
<TabItem value="ex3" label="mixture(1,3,5)">
<SquiggleEditor initialSquiggleString="mixture(1,3,5)" />
<SquiggleEditor
initialSquiggleString="mixture(1,3,5)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex2" label="normal(5,2) * 6">
<SquiggleEditor initialSquiggleString="normal(5,2) * 6" />
<SquiggleEditor
initialSquiggleString="normal(5,2) * 6"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
<SquiggleEditor initialSquiggleString="dotAdd(normal(5,2), 6)" />
<SquiggleEditor
initialSquiggleString="dotAdd(normal(5,2), 6)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
<SquiggleEditor initialSquiggleString="dotMultiply(normal(5,2), 6)" />
<SquiggleEditor
initialSquiggleString="dotMultiply(normal(5,2), 6)"
height={60}
width={600}
/>
</TabItem>
</Tabs>
@ -264,19 +304,35 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
<Tabs>
<TabItem value="ex1" label="beta(10, 20)" default>
<SquiggleEditor initialSquiggleString="beta(10,20)" />
<SquiggleEditor initialSquiggleString="beta(10,20)" height={60} />
</TabItem>
<TabItem value="ex2" label="beta(1000, 1000)">
<SquiggleEditor initialSquiggleString="beta(1000, 2000)" />
<SquiggleEditor
initialSquiggleString="beta(1000, 2000)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex3" label="beta(1, 10)">
<SquiggleEditor initialSquiggleString="beta(1, 10)" />
<SquiggleEditor
initialSquiggleString="beta(1, 10)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex4" label="beta(10, 1)">
<SquiggleEditor initialSquiggleString="beta(10, 1)" />
<SquiggleEditor
initialSquiggleString="beta(10, 1)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex5" label="beta(0.8, 0.8)">
<SquiggleEditor initialSquiggleString="beta(0.8, 0.8)" />
<SquiggleEditor
initialSquiggleString="beta(0.8, 0.8)"
height={60}
width={600}
/>
</TabItem>
</Tabs>
@ -295,16 +351,28 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
<summary>Examples</summary>
<Tabs>
<TabItem value="ex1" label="beta(0.3, 0.3)" default>
<SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" />
<SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" height={60} />
</TabItem>
<TabItem value="ex2" label="beta(0.5, 0.5)">
<SquiggleEditor initialSquiggleString="beta(0.5, 0.5)" />
<SquiggleEditor
initialSquiggleString="beta(0.5, 0.5)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex3" label="beta(0.8, 0.8)">
<SquiggleEditor initialSquiggleString="beta(.8,.8)" />
<SquiggleEditor
initialSquiggleString="beta(.8,.8)"
height={60}
width={600}
/>
</TabItem>
<TabItem value="ex4" label="beta(0.9, 0.9)">
<SquiggleEditor initialSquiggleString="beta(.9,.9)" />
<SquiggleEditor
initialSquiggleString="beta(.9,.9)"
height={60}
width={600}
/>
</TabItem>
</Tabs>
</details>
@ -316,7 +384,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
<SquiggleEditor initialSquiggleString="exponential(4)" />
<SquiggleEditor initialSquiggleString="exponential(4)" height={60} />
### Arguments
@ -334,7 +402,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
- `mode`: Number greater than `low`
- `high`: Number greater than `mode`
<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" />
<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" height={60} />
## FromSamples
@ -342,7 +410,10 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
Creates a sample set distribution using an array of samples.
<SquiggleEditor initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
<SquiggleEditor
initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])"
height={60}
/>
### Arguments

View File

@ -19,6 +19,7 @@ chosen from the second distribution.
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 + dist2`}
height={60}
/>
### Subtraction
@ -31,6 +32,7 @@ the value of one random sample chosen from the second distribution.
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 - dist2`}
height={60}
/>
### Multiplication
@ -43,12 +45,9 @@ chosen from the second distribution.
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 * dist2`}
height={60}
/>
We also provide concatenation of two distributions as a syntax sugar for `*`
<SquiggleEditor initialSquiggleString="(0.1 to 1) triangular(1,2,3)" />
### Division
A proportional scaling (normally a shrinking if the second distribution has values higher than 1).
@ -61,6 +60,7 @@ tends to be particularly unstable.
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 / dist2`}
height={60}
/>
### Exponentiation
@ -69,13 +69,14 @@ A projection over a contracted x-axis. The exponentiation operation represents t
the exponentiation of the value of one random sample chosen from the first distribution to the power of
the value one random sample chosen from the second distribution.
<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} height={60} />
### Taking the base `e` exponential
<SquiggleEditor
initialSquiggleString={`dist = triangular(1,2,3)
exp(dist)`}
height={60}
/>
### Taking logarithms
@ -85,19 +86,22 @@ A projection over a stretched x-axis.
<SquiggleEditor
initialSquiggleString={`dist = triangular(1,2,3)
log(dist)`}
height={60}
/>
<SquiggleEditor
initialSquiggleString={`dist = beta(1,2)
initialSquiggleString={`dist = beta(1,2)+1
log10(dist)`}
height={60}
/>
Base `x`
<SquiggleEditor
initialSquiggleString={`x = 2
dist = beta(2,3)
dist = beta(2,3)+1
log(dist, x)`}
height={60}
/>
#### Validity
@ -111,22 +115,20 @@ For every point on the x-axis, operate the corresponding points in the y axis of
**Pointwise operations are done with `PointSetDist` internals rather than `SampleSetDist` internals**.
TODO: this isn't in the new interpreter/parser yet.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .+ dist2`}
height={60}
/>
### Pointwise subtraction
TODO: this isn't in the new interpreter/parser yet.
<SquiggleEditor
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .- dist2`}
height={60}
/>
### Pointwise multiplication
@ -135,6 +137,7 @@ dist1 .- dist2`}
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .* dist2`}
height={60}
/>
### Pointwise division
@ -143,6 +146,7 @@ dist1 .* dist2`}
initialSquiggleString={`dist1 = uniform(0,20)
dist2 = normal(10,8)
dist1 ./ dist2`}
height={60}
/>
### Pointwise exponentiation
@ -151,6 +155,7 @@ dist1 ./ dist2`}
initialSquiggleString={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .^ dist2`}
height={60}
/>
## Standard functions on distributions
@ -160,7 +165,7 @@ dist1 .^ dist2`}
The `pdf(dist, x)` function returns the density of a distribution at the
given point x.
<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" />
<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" height={60} />
#### Validity
@ -172,7 +177,7 @@ given point x.
The `cdf(dist, x)` gives the cumulative probability of the distribution
or all values lower than x. It is the inverse of `quantile`.
<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" />
<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" height={60} />
#### Validity
@ -185,7 +190,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
is also known as the quantiles function.
<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" />
<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" height={60} />
#### Validity
@ -196,29 +201,35 @@ is also known as the quantiles function.
The `mean(distribution)` function gives the mean (expected value) of a distribution.
<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" />
<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" height={60} />
### Sampling a distribution
The `sample(distribution)` samples a given distribution.
<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" />
<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" height={60} />
## Converting between distribution formats
Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
<SquiggleEditor initialSquiggleString="toSampleSet(normal(5, 10))" />
<SquiggleEditor
initialSquiggleString="toSampleSet(normal(5, 10))"
height={60}
/>
Or `PointSet` format
<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" />
<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" height={60} />
### `toSampleSet` has two signatures
Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
<SquiggleEditor initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
<SquiggleEditor
initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]"
height={60}
/>
#### Validity
@ -230,13 +241,19 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
We provide a `normalize` function
<SquiggleEditor initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
<SquiggleEditor
initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))"
height={60}
/>
#### Validity - Input to `normalize` must be a dist
We provide a predicate `isNormalized`, for when we have simple control flow
<SquiggleEditor initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
<SquiggleEditor
initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))"
height={60}
/>
#### Validity
@ -246,20 +263,28 @@ We provide a predicate `isNormalized`, for when we have simple control flow
You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
<SquiggleEditor initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
<SquiggleEditor
initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))"
height={60}
/>
Save for a logging side effect, `inspect` does nothing to input and returns it.
## Truncate
You can cut off from the left
You can truncate the left side, the right side, or both.
<SquiggleEditor initialSquiggleString="truncateLeft(0.1 to 1, 0.5)" />
<SquiggleEditor
initialSquiggleString="truncateLeft(0.1 to 1, 0.5)"
height={40}
/>
You can cut off from the right
<SquiggleEditor
initialSquiggleString="truncateRight(0.1 to 1, 0.5)"
height={40}
/>
<SquiggleEditor initialSquiggleString="truncateRight(0.1 to 1, 0.5)" />
You can cut off from both sides
<SquiggleEditor initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
<SquiggleEditor
initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)"
height={40}
/>