👨💻 Modelling consultant
🧮 numbers 📊 actuarial
📈 viz, interactivity, transparency
Unlisted
Edited
Jan 5, 2024
data_source.filter((d) => d.retirement_fund_value > 2.0e6)
text_mark = ({
mark: { type: "text", dx: -10, align: "right" },
data: { name: "data" },
transform: [
{
filter: `datum.retirement_fund_value <= ${retirement_fund_value_risk_free}`
},
{
aggregate: [
{
op: "mean",
field: "retirement_fund_value",
as: "tail_mean_retirement_fund_value"
},
{
op: "count",
field: "retirement_fund_value",
as: "tail_count_retirement_fund_value"
}
],
groupby: ["model_id"]
}
],
//transform
//data: [{ retirement_fund_valuee: 1000000 }],
encoding: {
opacity: { value: 0.2 },
x: {
field: "tail_mean_retirement_fund_value",
scale: { type: "linear", zero: true, domain: [0, 2e6] }
},
y: { value: 200 },
size: { value: 20 },
color: { value: "red" },
text: { field: "tail_mean_retirement_fund_value", format: ",.0f" }
}
})
text_mark2 = ({
mark: { type: "text", dx: -10, align: "right" },
data: { name: "data" },
transform: [
{
filter: `datum.retirement_fund_value <= ${retirement_fund_value_risk_free}`
},
{
aggregate: [
{
op: "mean",
field: "retirement_fund_value",
as: "tail_mean_retirement_fund_value"
},
{
op: "count",
field: "retirement_fund_value",
as: "tail_count_retirement_fund_value"
}
],
groupby: ["model_id"]
}
],
//transform
//data: [{ retirement_fund_valuee: 1000000 }],
encoding: {
opacity: { value: 0.2 },
x: {
field: "tail_mean_retirement_fund_value",
scale: { type: "linear", zero: true, domain: [0, 2e6] }
},
y: { value: 250 },
size: { value: 20 },
color: { value: "red" },
text: { field: "tail_count_retirement_fund_value" }
}
})
//viz.signal("option", [0.02, 0])
options = _.range(0, 0.151, 0.01).map((std_dev) => ({
std_dev,
mean: 0.01 /* rfr */ + slope * std_dev
}))
Inputs.table(summary(spec, [model]))
Plot.plot({
axis: null,
inset: 10,
insetRight: 600,
round: true,
width: 800,
height: 660,
marks: Plot.tree(ss, {
path: "name",
delimiter: ".",
treeLayout: indent,
strokeWidth: 0.4,
curve: "bump-x",
//fill: "node:internal",
fill: (d) => (d ? "#44f" : "#77a"), // { domain: "node:internal", range: ["red", "green"] },
fontSize: 20,
text: "node:name"
//fontColor: "node:internal"
})
})
ss = summary(spec).map((d) => {
let n = d.nodePath
.split(".")
.filter((d) => d != "encoding")
.slice(0, -1);
return { name: n.join(".") + " ⬅️ " + d.value, v: 100 };
})
Plot.plot({
axis: null,
height: 220,
width: 800,
inset: 20,
insetRight: 200,
marks: [
Plot.link(
ss.map((d) => d.name),
Plot.treeLink({
delimiter: ".",
stroke: "node:internal",
//treeLayout: indent,
curve: "step-after"
})
),
Plot.dot(
ss.map((d) => d.name),
Plot.treeNode({
delimiter: ".",
fill: "node:internal"
//treeLayout: indent
})
),
Plot.text(
ss.map((d) => d.name),
Plot.treeNode({
delimiter: ".",
text: "node:name",
stroke: "white",
//treeLayout: indent, Titles still duplicated
fill: "currentColor",
dx: 6
})
)
]
})
function indent() {
return (root) => {
root.eachBefore((node, i) => {
node.y = node.depth;
node.x = i;
});
};
}
model
{
let div = DOM.element("div");
div.innerHTML = jsonSum.printSummary(
jsonSum.summarize(spec, { arraySampleCount: 1000 }),
{
startExpanded: false,
asText: false,
showExampleValue: true,
theme: "monokai"
}
);
return div;
}
spec = ({
// vega-lite
vconcat: [
{
title: "annual returns, normal distribution params",
width: 250,
height: 150,
mark: { type: "square" },
data: { name: "options" },
params: [
{
name: "option",
select: {
type: "point",
on: "pointerover",
nearest: true,
fields: ["mean", "std_dev"]
//value: [0.02, 0]
}
}
],
encoding: {
x: {
field: "mean",
type: "quantitative",
axis: { format: ".1%" },
scale: { domain: [0, 0.15] }
//sort: "descending"
},
y: {
field: "std_dev",
type: "quantitative",
axis: { format: ".1%" }
},
size: {
value: 100,
condition: { param: "option", value: 400, empty: false }
},
color: {
value: "lightblue",
condition: [
{ param: "option", value: "green", empty: false },
{ test: "datum.std_dev == 0", value: "red", empty: false }
]
}
}
},
{
width: 500,
height: 350,
//resolve: { scale: { x: "independent" } },
layer: [
{
mark: { type: "bar", tooltip: true, clip: false },
encoding: {
x: {
bin: { step: 50000 },
field: "retirement_fund_value",
type: "quantitative",
scale: { zero: true, domain: [0, 2e6] },
axis: {
format: ".2s",
titleFontSize: 20,
values: [2e6, 1e6, 1.5e6, 0.5e6],
grid: true,
gridOpacity: 1
}
},
y: {
aggregate: "count",
title: "count of simulations",
scale: {
zero: true,
domain: [0, num_simulations / 3],
nice: false
},
axis: { grid: false, format: ",.0f", nice: false }
},
order: color ? { field: "simulation_in" } : { sort: "ascending" },
color: color
? {
field: "simulation_in",
type: "nominal",
legend: false
}
: {}
}
},
{
mark: { type: "rule" },
//data: "data_risk_free",
//data: [{ retirement_fund_valuee: 1000000 }],
encoding: {
x: {
//value: 500,
//type: "linear",
//value: "scale('concat_1_layer_0_x',10000)",
field: "retirement_fund_value",
aggregate: "mean",
scale: { type: "linear", zero: true, domain: [0, 2e6] }
},
size: { value: 2 },
color: { value: "green" }
}
},
{
mark: { type: "rule" },
data: { name: "data_risk_free" },
//data: [{ retirement_fund_valuee: 1000000 }],
encoding: {
x: {
//value: 500,
//type: "linear",
//value: "scale('concat_1_layer_0_x',10000)",
field: "retirement_fund_value",
scale: { type: "linear", zero: true, domain: [0, 2e6] }
},
size: { value: 2 },
color: { value: "red" }
}
},
{
mark: { type: "text", align: "left", dx: 20 },
//data: "data_risk_free",
//data: [{ retirement_fund_valuee: 1000000 }],
encoding: {
opacity: { value: 0.2 },
x: {
value: 300
},
y: { value: 100 },
size: { value: 20 },
color: { value: "green" },
text: {
field: "retirement_fund_value",
aggregate: "mean",
format: ",.0f"
}
}
},
text_mark,
text_mark2
]
}
],
data: { name: "data" },
datasets: {
data_risk_free: [
{
retirement_fund_value: retirement_fund_value_risk_free
}
],
data: [],
options /*: _.range(0, 0.101, 0.01)
.map((mean) =>
_.range(0, 0.101, 0.02).map((std_dev) => ({ mean, std_dev }))
)
.flat()*/
//{ mean: 0.05, std_dev: 0.05 },
//{ mean: 0.1, std_dev: 0.1 }
}
//resolve: { scale: { x: "independent" } }
})
JSON.stringify(spec)
input_cursors = [
{
random_seed_in,
age_0_in, //: 30,
fund_value_0_in, //: 0,
retirement_age_in: 65,
missed_contribution_age_in: 0,
salary_age_0_in: 30,
salary_0_in: 30000,
salary_inflation_rate_in: 0.02,
empee_contribution_rate_in: 0.1,
emper_matching_rate_in: 1,
contribution_charge_rate_in: 0.1,
management_charge_rate_in: 0.01
}
]
data_source = calcuvegadata({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
models: [model],
spec, //: { field: "retirement_fund_value" },
domains: {
simulation_in: _.range(0, num_simulations, 1)
},
input_cursors: [
{
...input_cursors[0],
unit_growth_rate_std_dev_in,
unit_growth_rate_mean_in
}
]
})
/*data_source_precompute = options.map((d) =>
calcudata2({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
models: [model],
spec, //: { field: "retirement_fund_value" },
domains: {
simulation_in: _.range(0, num_simulations, 1)
},
input_cursors: [
{
...input_cursors[0],
unit_growth_rate_std_dev_in: d.std_dev,
unit_growth_rate_mean_in: d.mean
}
]
})
)*/
retirement_fund_value_risk_free = model.retirement_fund_value({
...input_cursors[0],
unit_growth_rate_mean_in: 0.01,
unit_growth_rate_std_dev_in: 0,
simulation_in: 0
})
data_source_precompute2 = calcuvegadata({
models: [model],
spec, //: { field: "retirement_fund_value" },
domains: {
simulation_in: _.range(0, num_simulations, 1)
},
input_cursors: options.map((option) => ({
...input_cursors[0],
unit_growth_rate_std_dev_in: option.std_dev,
unit_growth_rate_mean_in: option.mean
}))
})
updates = {
input_cursors;
unit_growth_rate_mean_in;
viz.data("data", data_source).resize().run();
//mutable default_data = data_source;
}
model = require(`https://calculang.dev/models/taxes-pensions/monte-carlo-pension-calculator.js?a`)
jsonSum = require("json-summary@1.2.0")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
