From 67c478b4c054480c626b03e371e4e46ea867778b Mon Sep 17 00:00:00 2001 From: Ozzie Gooen Date: Thu, 16 Jun 2022 16:15:48 -0700 Subject: [PATCH] Changed squiggle display heights to be more reasonable --- .../src/components/SquiggleEditor.tsx | 3 + .../docs/Guides/DistributionCreation.mdx | 135 +++++++++++++----- packages/website/docs/Guides/Functions.mdx | 85 +++++++---- 3 files changed, 161 insertions(+), 62 deletions(-) diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index a8db78af..2ff767e3 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -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 = ({ diagramStart = 0, diagramStop = 10, diagramCount = 20, + height = 200, onChange, bindings = defaultBindings, jsImports = defaultImports, @@ -78,6 +80,7 @@ export let SquiggleEditor: React.FC = ({ 5 to 10 is entered, both numbers are positive, so it generates a lognormal distribution with 5th and 95th percentiles at 5 and 10. - + 5 to 10 does the same thing as to(5,10). - + When -5 to 5 is entered, there's negative values, so it generates a normal distribution. This has 5th and 95th percentiles at 5 and 10. - + 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. - + @@ -76,16 +80,31 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can - + - + - + - + @@ -113,7 +132,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can @@ -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} /> @@ -141,10 +160,14 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio - + - + @@ -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 to syntax instead of estimating `mu` and `sigma` directly. - + ### Arguments @@ -189,7 +212,8 @@ Because of this complexity, we recommend typically using the to + />{" "} + height={60} ## Uniform @@ -198,7 +222,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev)) Creates a [uniform distribution]() with the given low and high values. - + ### Arguments @@ -236,19 +260,35 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi - + - + - + - + - + @@ -264,19 +304,35 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w - + - + - + - + - + @@ -295,16 +351,28 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w Examples - + - + - + - + @@ -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. - + ### 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` - + ## 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. - + ### Arguments diff --git a/packages/website/docs/Guides/Functions.mdx b/packages/website/docs/Guides/Functions.mdx index be579834..66ca705f 100644 --- a/packages/website/docs/Guides/Functions.mdx +++ b/packages/website/docs/Guides/Functions.mdx @@ -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 `*` - - - ### 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. - + ### Taking the base `e` exponential ### Taking logarithms @@ -85,19 +86,22 @@ A projection over a stretched x-axis. Base `x` #### 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. - ### Pointwise subtraction -TODO: this isn't in the new interpreter/parser yet. - ### 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. - + #### 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`. - + #### 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. - + #### Validity @@ -196,29 +201,35 @@ is also known as the quantiles function. The `mean(distribution)` function gives the mean (expected value) of a distribution. - + ### Sampling a distribution The `sample(distribution)` samples a given distribution. - + ## 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 - + Or `PointSet` format - + ### `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) - + #### Validity @@ -230,13 +241,19 @@ Some distribution operations (like horizontal shift) return an unnormalized dist We provide a `normalize` function - + #### Validity - Input to `normalize` must be a dist We provide a predicate `isNormalized`, for when we have simple control flow - + #### 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. - + 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. - + -You can cut off from the right + - - -You can cut off from both sides - - +