Merge pull request #873 from quantified-uncertainty/homepage-changes

Docs improvements - July 23
This commit is contained in:
Ozzie Gooen 2022-07-23 11:54:16 -07:00 committed by GitHub
commit 25c95170e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 140 additions and 102 deletions

View File

@ -43,7 +43,7 @@ could be continuous, discrete or mixed.
<Story <Story
name="Continuous Pointset" name="Continuous Pointset"
args={{ args={{
code: "toPointSet(normal(5,2))", code: "PointSet.fromDist(normal(5,2))",
width, width,
}} }}
> >
@ -57,7 +57,7 @@ could be continuous, discrete or mixed.
<Story <Story
name="Continuous SampleSet" name="Continuous SampleSet"
args={{ args={{
code: "toSampleSet(normal(5,2), 1000)", code: "SampleSet.fromDist(normal(5,2))",
width, width,
}} }}
> >

View File

@ -339,7 +339,7 @@ A log loss score. Often that often acts as a [scoring rule](https://en.wikipedia
Note that it is fairly slow. Note that it is fairly slow.
``` ```
logScore: ({estimate: distribution, ?prior: distribution, answer: distribution|number}) => number Dist.logScore: ({estimate: distribution, ?prior: distribution, answer: distribution|number}) => number
``` ```
**Examples** **Examples**

View File

@ -38,7 +38,7 @@ Gets the internal samples of a sampleSet distribution. This is separate from the
**Examples** **Examples**
``` ```
toList(toSampleSet(normal(5,2))) toList(SampleSet.fromDist(normal(5,2)))
``` ```
### map ### map

View File

@ -31,6 +31,6 @@ The means of sample set distributions can vary dramatically, especially as the n
<SquiggleEditor <SquiggleEditor
defaultCode={`symbolicDist = 5 to 50333333 defaultCode={`symbolicDist = 5 to 50333333
sampleSetDist = toSampleSet(symbolicDist) sampleSetDist = SampleSet.fromDist(symbolicDist)
[mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`} [mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`}
/> />

View File

@ -23,12 +23,6 @@ Squiggle is still very early. The main first goal is to become stable. This mean
## Distribution Features ## Distribution Features
`Distribution.fromSamples([])`
Converts a list of samples, for example, from Guesstimate, into a distribution shape. Maybe takes a list of optional parameters.
`Distribution.fromCoordinates({xs, ys})`
Convert XY coordinates into a distribution. Figure out a good way to do this for continuous, discrete, and mixed distributions.
[Metalog Distribution](https://en.wikipedia.org/wiki/Metalog_distribution) [Metalog Distribution](https://en.wikipedia.org/wiki/Metalog_distribution)
Add the Metalog distribution, and some convenient methods for generating these distributions. This might be a bit tricky because we might need or build a library to fit data. There's no Metalog javascript library yet, this would be pretty useful. There's already a Metalog library in Python, so that one could be used for inspiration. Add the Metalog distribution, and some convenient methods for generating these distributions. This might be a bit tricky because we might need or build a library to fit data. There's no Metalog javascript library yet, this would be pretty useful. There's already a Metalog library in Python, so that one could be used for inspiration.

View File

@ -343,13 +343,13 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
<SquiggleEditor defaultCode="triangular(1, 2, 4)" /> <SquiggleEditor defaultCode="triangular(1, 2, 4)" />
## FromSamples ## FromList
`fromSamples(samples:number[])` `SampleSet.fromList(samples:number[])`
Creates a sample set distribution using an array of samples. Creates a sample set distribution using an array of samples.
<SquiggleEditor defaultCode="fromSamples([1,2,3,4,6,5,5,5])" /> <SquiggleEditor defaultCode="SampleSet.fromList([1,2,3,4,6,5,5,5])" />
### Arguments ### Arguments

View File

@ -47,7 +47,7 @@ dist1 * dist2`}
We also provide concatenation of two distributions as a syntax sugar for `*` We also provide concatenation of two distributions as a syntax sugar for `*`
<SquiggleEditor defaultCode="(0.1 to 1) triangular(1,2,3)" /> <SquiggleEditor defaultCode="(0.1 to 1) * triangular(1,2,3)" />
### Division ### Division
@ -87,18 +87,11 @@ A projection over a stretched x-axis.
log(dist)`} log(dist)`}
/> />
<SquiggleEditor <SquiggleEditor defaultCode={`log10(5 to 10)`} />
defaultCode={`dist = beta(1,2)
log10(dist)`}
/>
Base `x` Base `x`
<SquiggleEditor <SquiggleEditor defaultCode={`log(5 to 10, 2)`} />
defaultCode={`x = 2
dist = beta(2,3)
log(dist, x)`}
/>
#### Validity #### Validity
@ -113,45 +106,25 @@ For every point on the x-axis, operate the corresponding points in the y axis of
TODO: this isn't in the new interpreter/parser yet. TODO: this isn't in the new interpreter/parser yet.
<SquiggleEditor <SquiggleEditor defaultCode={`(1 to 10) .+ triangular(1,2,3)`} />
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .+ dist2`}
/>
### Pointwise subtraction ### Pointwise subtraction
TODO: this isn't in the new interpreter/parser yet. TODO: this isn't in the new interpreter/parser yet.
<SquiggleEditor <SquiggleEditor defaultCode={`(1 to 10) .- triangular(1,2,3)`} />
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .- dist2`}
/>
### Pointwise multiplication ### Pointwise multiplication
<SquiggleEditor <SquiggleEditor defaultCode={`(1 to 10) .* triangular(1,2,3)`} />
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .* dist2`}
/>
### Pointwise division ### Pointwise division
<SquiggleEditor <SquiggleEditor defaultCode={`(uniform(0,10)) ./ normal(10,4)`} />
defaultCode={`dist1 = uniform(0,20)
dist2 = normal(10,8)
dist1 ./ dist2`}
/>
### Pointwise exponentiation ### Pointwise exponentiation
<SquiggleEditor <SquiggleEditor defaultCode={`(1 to 10) .^ triangular(1,2,3)`} />
defaultCode={`dist1 = 1 to 10
dist2 = triangular(1,2,3)
dist1 .^ dist2`}
/>
## Standard functions on distributions ## Standard functions on distributions
@ -208,21 +181,15 @@ The `sample(distribution)` samples a given distribution.
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 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 defaultCode="toSampleSet(normal(5, 10))" /> <SquiggleEditor defaultCode="PointSet.fromDist(normal(5, 10))" />
Or `PointSet` format Or `PointSet` format
<SquiggleEditor defaultCode="toPointSet(normal(5, 10))" /> <SquiggleEditor defaultCode="PointSet.fromDist(normal(5, 10))" />
### `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 defaultCode="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
#### Validity #### Validity
- Second argument to `toSampleSet` must be a number. - Second argument to `SampleSet.fromDist` must be a number.
## Normalization ## Normalization
@ -246,7 +213,7 @@ 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. 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 defaultCode="inspect(toSampleSet(0.1 to 1, 100))" /> <SquiggleEditor defaultCode="inspect(SampleSet.fromDist(0.1 to 1))" />
Save for a logging side effect, `inspect` does nothing to input and returns it. Save for a logging side effect, `inspect` does nothing to input and returns it.

View File

@ -7,46 +7,46 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
## Expressions ## Expressions
### Distributions
<SquiggleEditor defaultCode={`mixture(1 to 2, 3, [0.3, 0.7])`} />
### Numbers ### Numbers
<SquiggleEditor defaultCode="4.32" /> <SquiggleEditor defaultCode="4.32" />
### Arrays ### Distributions
<SquiggleEditor <SquiggleEditor
defaultCode={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`} defaultCode={`a = normal(4,2)
b = 30 to 50
c = lognormal({mean:90, stdev: 7})
d = mixture(a,b,c, [0.3, 0.3, .4])
{a:a, b:b, c:c, d:d}`}
/> />
### Records ### Lists
<SquiggleEditor
defaultCode={`[beta(1,10), 4, isNormalized(SampleSet.fromDist(1 to 2))]`}
/>
<SquiggleEditor defaultCode={`List.make(5,1)`} />
### Dictionaries
<SquiggleEditor <SquiggleEditor
defaultCode={`d = {dist: triangular(0, 1, 2), weight: 0.25} defaultCode={`d = {dist: triangular(0, 1, 2), weight: 0.25}
d.dist`} d.dist`}
/> />
## Statements
A statement assigns expressions to names. It looks like `<symbol> = <expression>`
<SquiggleEditor
defaultCode={`value_of_work = 10 to 70
5 + value_of_work / 75`}
/>
### Functions ### Functions
We can define functions
<SquiggleEditor <SquiggleEditor
defaultCode={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5) defaultCode={`f(t) = normal(t^2, t^1.2+.01)
nuno_estimate(t, m) = mixture(normal(-5, 1), lognormal(m, t / 1.25)) f`}
ozzie_estimate(1) * nuno_estimate(1, 1)`}
/> />
### Anonymous Functions
<SquiggleEditor defaultCode={`{|t| normal(t^2, t^1.2+.01)}`} />
## See more ## See more
- [Distribution creation](./DistributionCreation) - [Distribution creation](./DistributionCreation)

View File

@ -3,7 +3,21 @@ sidebar_position: 1
title: Introduction title: Introduction
--- ---
Squiggle is an _estimation language_, and a syntax for _calculating and expressing beliefs_ involving uncertainty. It has use cases in forecasting and writing evaluations. Squiggle is a simple programming language for intuitive probabilistic estimation. It's meant for quantitative forecasting and evaluations.
The basics of Squiggle can be pretty simple and intuitive. The more advanced functionality can take some time to learn.
## What Squiggle Is
- A simple programming language for doing math with probability distributions
- An embeddable language that can be used in Javascript applications
- A tool to embed functions as forecasts that can be embedded in other applications
## What Squiggle Is Not
- A complete replacement for enterprise Risk Analysis tools (See Crystal Ball, @Risk, Lumina Analytica)
- A Probabilistic Programming Language with backwards inference and sophisticated sampling algorithms. (See [PPLs](https://en.wikipedia.org/wiki/Probabilistic_programming))
- A visual tool aimed at casual users (see Guesstimate, Causal)
## Get started ## Get started

View File

@ -10,7 +10,8 @@ const path = require("path");
/** @type {import('@docusaurus/types').Config} */ /** @type {import('@docusaurus/types').Config} */
const config = { const config = {
title: "Squiggle", title: "Squiggle",
tagline: "An estimation language for forecasters", tagline:
"A simple programming language for intuitive probabilistic estimation",
url: "https://squiggle-language.com", url: "https://squiggle-language.com",
baseUrl: "/", baseUrl: "/",
onBrokenLinks: "throw", onBrokenLinks: "throw",
@ -72,6 +73,11 @@ const config = {
}, },
{ to: "/blog", label: "Blog", position: "left" }, { to: "/blog", label: "Blog", position: "left" },
{ to: "/playground", label: "Playground", position: "left" }, { to: "/playground", label: "Playground", position: "left" },
{
href: "https://github.com/quantified-uncertainty/squiggle/discussions",
label: "Issues & Discussion",
position: "right",
},
{ {
href: "https://github.com/quantified-uncertainty/squiggle", href: "https://github.com/quantified-uncertainty/squiggle",
label: "GitHub", label: "GitHub",

View File

@ -5,6 +5,11 @@
width: 100%; width: 100%;
} }
.features h3 {
font-family: "Lora", serif;
font-size: 1.5em;
}
.featureSvg { .featureSvg {
height: 200px; height: 200px;
width: 200px; width: 200px;

View File

@ -4,27 +4,29 @@
* work well for content-centric websites. * work well for content-centric websites.
*/ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Lato:wght@100;400;700;900&family=Lora:wght@400;500;600&display=swap");
/* You can override the default Infima variables here. */ /* You can override the default Infima variables here. */
:root { :root {
--ifm-color-primary: #2488df; --ifm-color-primary: #e74c0f;
--ifm-color-primary-dark: #176fcd; --ifm-color-primary-dark: #bb4b05;
--ifm-color-primary-darker: #1f58cb; --ifm-color-primary-darker: #9d0c02;
--ifm-color-primary-darkest: #1e2672; --ifm-color-primary-darkest: #5d2200;
--ifm-color-primary-light: #49acd3; --ifm-color-primary-light: #e6a036;
--ifm-color-primary-lighter: #4fb1c7; --ifm-color-primary-lighter: #e79d1d;
--ifm-color-primary-lightest: #3dbfd3; --ifm-color-primary-lightest: #f5e191;
--ifm-code-font-size: 95%; --ifm-code-font-size: 95%;
} }
/* For readability concerns, you should choose a lighter palette in dark mode. */ /* For readability concerns, you should choose a lighter palette in dark mode. */
html[data-theme="dark"] { html[data-theme="dark"] {
--ifm-color-primary: #25c2a0; --ifm-color-primary: #df774d;
--ifm-color-primary-dark: #21af90; --ifm-color-primary-dark: #db8651;
--ifm-color-primary-darker: #1fa588; --ifm-color-primary-darker: #d7584f;
--ifm-color-primary-darkest: #1a8870; --ifm-color-primary-darkest: #b3693e;
--ifm-color-primary-light: #29d5b0; --ifm-color-primary-light: #edb25a;
--ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lighter: #ebd489;
--ifm-color-primary-lightest: #4fddbf; --ifm-color-primary-lightest: #faf2d4;
} }
.docusaurus-highlight-code-line { .docusaurus-highlight-code-line {
@ -37,3 +39,55 @@ html[data-theme="dark"] {
html[data-theme="dark"] .docusaurus-highlight-code-line { html[data-theme="dark"] .docusaurus-highlight-code-line {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.hero h1 {
font-size: 4em;
font-weight: 900;
margin-bottom: 0.5rem;
color: rgb(230, 72, 79);
font-family: "Lato", sans-serif;
}
.navbar__title {
font-family: "Lato", sans-serif;
font-weight: 900;
color: rgb(205, 88, 53);
}
.hero__subtitle {
color: #888;
font-size: 1.25em;
}
.hero__subtitle2 {
color: #ba3e3e;
font-size: 1.5em;
font-family: "Lora";
font-weight: 500;
margin-top: 1em;
margin-left: auto;
margin-right: auto;
max-width: 500px;
}
h1 {
font-family: "Lora", serif;
font-size: 2.5em;
}
h2 {
font-weight: 600;
}
.menu__link,
.navbar__item {
font-family: "Lora", serif;
}
.navbar__item {
font-weight: 700;
}
:root {
/* --ifm-font-family-base: 'Lora'; */
}

View File

@ -12,11 +12,8 @@ function HomepageHeader() {
<header className={clsx("hero hero--primary", styles.heroBanner)}> <header className={clsx("hero hero--primary", styles.heroBanner)}>
<div className="container"> <div className="container">
<h1 className="hero__title">{siteConfig.title}</h1> <h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle"> <p className="hero__subtitle">Early Access</p>
<i>Early access</i> <p className="hero__subtitle2">{siteConfig.tagline}</p>
</p>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}></div>
</div> </div>
</header> </header>
); );

View File

@ -4,10 +4,11 @@
*/ */
.heroBanner { .heroBanner {
padding: 4rem 0; padding: 2rem 0;
text-align: center; text-align: center;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: rgb(255, 246, 237);
} }
@media screen and (max-width: 966px) { @media screen and (max-width: 966px) {