Simple visualization of probability distribution

This commit is contained in:
Ozzie Gooen 2020-02-13 12:20:46 +00:00
parent 5046a04c40
commit b8d0368313
8 changed files with 1083 additions and 42 deletions

View File

@ -15,6 +15,7 @@
"suffix": ".bs.js",
"namespace": true,
"bs-dependencies": [
"@foretold/components",
"bs-ant-design-alt",
"reason-react",
"bs-reform",
@ -25,5 +26,5 @@
"refmt": 3,
"ppx-flags": [
"lenses-ppx/ppx"
],
]
}

View File

@ -23,6 +23,7 @@
"license": "MIT",
"dependencies": {
"@foretold/cdf": "^1.0.14",
"@foretold/components": "^0.0.3",
"@foretold/guesstimator": "^1.0.10",
"antd": "3.17.0",
"autoprefixer": "^9.7.4",
@ -31,6 +32,7 @@
"bs-reform": "9.7.1",
"lenses-ppx": "4.0.0",
"less": "^3.10.3",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"parcel-bundler": "^1.12.4",
"parcel-plugin-less-js-enabled": "^1.0.2",
@ -42,10 +44,14 @@
"reschema": "^1.3.0"
},
"devDependencies": {
"bs-platform": "^5.0.6",
"bs-platform": "5.2.1",
"bsb-js": "^1.1.7",
"gh-pages": "^2.2.0",
"moduleserve": "^0.9.0",
"tailwindcss": "^1.2.0"
},
"alias": {
"react": "./node_modules/react",
"react-dom": "./node_modules/react-dom"
}
}

View File

@ -51,10 +51,7 @@ module ModelForm = {
)
|> ReasonReact.array}
<div className="bg-green-100 p-2 rounded-sm mt-6 text-lg">
{model.run(formState.combo)
|> E.O.fmap(Value.to_string)
|> E.O.default("")
|> ReasonReact.string}
{model.run(formState.combo) |> E.O.React.fmapOrNull(Value.display)}
</div>
</form>
</div>;

View File

@ -18,12 +18,43 @@ module Value = {
| Unselected => ""
}
| SelectSingle(r) => r
| FloatCdf(r) => r
| FloatCdf(r) =>
let foo: Types.distribution =
CdfLibrary.Distribution.fromString(r, 100);
r;
| Probability(r) => (r *. 100. |> Js.Float.toFixed) ++ "%"
| DateTime(r) => r |> MomentRe.Moment.defaultFormat
| FloatPoint(r) => r |> Js.Float.toFixed
};
};
let display = (t: t) => {
switch (t) {
| BinaryConditional(binaryConditional) =>
(
switch (binaryConditional) {
| Selected(r) => r ? "True" : "False"
| Unselected => ""
}
)
|> ReasonReact.string
| SelectSingle(r) => r |> ReasonReact.string
| FloatCdf(r) =>
let cdf: Types.distribution =
CdfLibrary.Distribution.fromString(r, 100);
<>
<ForetoldComponents.CdfChart__Large
cdf={Types.toComponentsDist(cdf)}
width={Some(400)}
/>
{r |> ReasonReact.string}
</>;
| Probability(r) =>
(r *. 100. |> Js.Float.toFixed) ++ "%" |> ReasonReact.string
| DateTime(r) => r |> MomentRe.Moment.defaultFormat |> ReasonReact.string
| FloatPoint(r) => r |> Js.Float.toFixed |> ReasonReact.string
};
};
};
module Type = {

View File

@ -1,4 +1,9 @@
type distribution = {
xs: array(float),
ys: array(float),
};
let toComponentsDist = (d: distribution): ForetoldComponents.Types.Dist.t => {
xs: d.xs,
ys: d.ys,
};

View File

@ -14,26 +14,26 @@ module JS = {
let doAsDist = (f, d: Types.distribution) => d |> distToJs |> f |> jsToDist;
[@bs.module "./CdfLibraryImporter.js"]
[@bs.module "./CdfLibrary.js"]
external cdfToPdf: distJs => distJs = "cdfToPdf";
[@bs.module "./CdfLibraryImporter.js"]
[@bs.module "./CdfLibrary.js"]
external pdfToCdf: distJs => distJs = "pdfToCdf";
[@bs.module "./CdfLibraryImporter.js"]
[@bs.module "./CdfLibrary.js"]
external findY: (float, distJs) => float = "findY";
[@bs.module "./CdfLibraryImporter.js"]
[@bs.module "./CdfLibrary.js"]
external findX: (float, distJs) => float = "findX";
[@bs.module "./CdfLibraryImporter.js"]
[@bs.module "./CdfLibrary.js"]
external integral: distJs => float = "integral";
[@bs.module "./CdfLibraryImporter.js"]
[@bs.module "./CdfLibrary.js"]
external differentialEntropy: (int, distJs) => distJs =
"differentialEntropy";
[@bs.module "./CdfLibraryImporter.js"]
[@bs.module "./CdfLibrary.js"]
external scoreNonMarketCdfCdf: (int, distJs, distJs, float) => distJs =
"scoreNonMarketCdfCdf";

View File

@ -1,18 +1,51 @@
import { Guesstimator } from '@foretold/guesstimator';
import { Samples } from '@foretold/cdf';
import _ from 'lodash';
const toPdf = (values, min, max) => {
/**
*
* @param {number} minValue
* @param {number} maxValue
* @returns {string}
*/
const minMaxRatio = (minValue, maxValue) => {
if (minValue === 0 || maxValue === 0) {
return 'SMALL';
}
const ratio = maxValue / minValue;
if (ratio < 100000) {
return 'SMALL';
} else if (ratio < 10000000) {
return 'MEDIUM';
} else {
return 'LARGE';
}
};
/**
* @param samples
* @return {string}
*/
const ratioSize = samples => {
samples.sort();
const minValue = samples.getPercentile(2);
const maxValue = samples.getPercentile(98);
return minMaxRatio(minValue, maxValue);
};
const toPdf = (values, sampleCount, min, max) => {
const samples = new Samples(values);
const ratioSize$ = ratioSize(samples);
const width = ratioSize$ === 'SMALL' ? 20 : 1;
const pdf = samples.toPdf({ size: 1000, width, min, max });
return {ys:pdf.ys, xs:pdf.xs};
const cdf = samples.toCdf({ size: sampleCount, width, min, max });
return {ys:cdf.ys, xs:cdf.xs};
};
let run = (text, sampleCount, inputs=[], min=false, max=false) => {
let [_error, item] = Guesstimator.parse({ text });
console.log(text);
let [_error, item] = Guesstimator.parse({ text: "=" + text });
const { parsedInput } = item;
const { guesstimateType } = parsedInput;
@ -25,18 +58,13 @@ let run = (text, sampleCount, inputs=[], min=false, max=false) => {
const values = _.filter(value.values, _.isFinite);
this.setState({
value: event.target.value,
items: values,
});
let update;
if (values.length === 0) {
update = {xs: [], ys: []};
} else if (values.length === 1) {
update = {xs: [], ys: []};
} else {
update = toPdf(values, min, max);
update = toPdf(values, sampleCount, min, max);
}
return update;
}

1009
yarn.lock

File diff suppressed because it is too large Load Diff