Public
Edited
Sep 10, 2024
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data = viz.data("data_0") //.filter((d) => d.sw != 5)
Insert cell
Insert cell
function stops(n, color) {
return _.range(0, n).map((d) => ({
offset: d / n,
color: !(d % 3) ? color : "transparent"
}));
}
Insert cell
Insert cell
function cashflows_spec_patch() {
return (spec) => {
//debugger
spec.legends[0].encode.symbols.update.shape = { value: "square" };
spec.legends[0].encode.symbols.update.stroke = null;
spec.legends[0].encode.symbols.update.opacity = { value: 1 };
//const grid = spec.signals.findIndex((d) => d.name == "grid_t_in");
spec.signals.push({ name: "panOffset", value: 0 });
spec.marks[0].marks[0].signals;

const a = spec.marks[0].marks[0].signals.findIndex(
(d) => d.name == "grid_t_in"
);
const b = spec.marks[0].marks[0].signals.findIndex(
(d) => d.name == "grid_translate_anchor"
);
const c = spec.marks[0].marks[0].signals.findIndex(
(d) => d.name == "grid_zoom_anchor"
);

const d = spec.scales.findIndex((d) => d.name == "concat_0_concat_0_x");
spec.scales[d].domainRaw.signal =
'grid["t_in"] ? [grid["t_in"][0]+panOffset,grid["t_in"][1]+panOffset] : null';

spec.marks[0].marks[0].signals[a].on[2] /*should paramaterise*/.update =
'zoomLinear([domain("concat_0_concat_0_x")[0]-panOffset,domain("concat_0_concat_0_x")[1]-panOffset], grid_zoom_anchor.x, grid_zoom_delta)';
spec.marks[0].marks[0].signals[b].on[0] /*should paramaterise*/.update =
'{x: x(unit), y: y(unit), extent_x: [domain("concat_0_concat_0_x")[0]-panOffset,domain("concat_0_concat_0_x")[1]-panOffset], extent_y: domain("concat_0_concat_0_y")}';
spec.marks[0].marks[0].signals[c].on[0] /*should paramaterise*/.update =
'{x: invert("concat_0_concat_0_x", x(unit))-panOffset, y: invert("concat_0_concat_0_y", y(unit))}';

/*spec.scales[s].domainRaw = {
signal:
'grid["t_in"] ? [grid["t_in"][0]+panOffset,grid["t_in"][1]+panOffset] : null'
};*/
/*spec.signals[grid].on = [
{
events: { signal: "panOffset" },
update:
"grid_t_in ? [grid_t_in[0]+panOffset, grid_t_in[1]+panOffset] : [x_domain[0]+panOffset,x_domain[1]+panOffset]"
}
];*/
//'{"t_in": grid_t_in ? [grid_t_in[0]+panOffset,grid_t_in[1]+panOffset] : null, "value": grid_value}'; //'{"t_in": [grid_t_in[0],grid_t_in[1]], "value": grid_value}';
return spec;
};
}
Insert cell
Insert cell
Insert cell
{
//viz.signal("grid", { t_in: [10], value: [10] }).run();
//viz.signal("grid_t_in", [10]);
//viz.signal("grid_value", [10]).run();
}
Insert cell
{
vizz.signal("grid_translate_anchor", {
x: 55.8125,
y: 12,
extent_x: [75, 150],
extent_y: [20, 40]
});
vizz.signal("grid_translate_delta", { x: x, y: 12 }).run();
}
Insert cell
viewof vizz = embed({
data: { url: "data/cars.json" },
params: [
{
name: "grid",
select: "interval",
bind: "scales"
}
],
mark: "circle",
encoding: {
x: {
field: "Horsepower",
type: "quantitative",
scale: { domain: [75, 150] }
},
y: {
field: "Miles_per_Gallon",
type: "quantitative",
scale: { domain: [20, 40] }
},
size: { field: "Cylinders", type: "quantitative" }
}
})
Insert cell
viz.getState({ data: (d) => false, signals: (d) => true })
Insert cell
/*viz
.setState(
[viz.getState({ data: (d) => false, signals: (d) => true })].map(
(state) => {
state.subcontext["0"].subcontext["0"].signals.grid_translate_anchor = {
x: 0,
y: 0,
extent_x: viz.signal("x_domain"),
extent_y: viz.signal("y_domain") //[0, 200]
//extent_y: [-premiums * 1.5, premiums * 1.5] // but I need dynamic values
};
state.subcontext["0"].subcontext["0"].signals.grid_translate_delta = {
x: viz.signal("x_diff") * x,
y: 0
};
return state;
}
)[0]
)
.run()*/
Insert cell
viz.signal("x_range")
Insert cell
Insert cell
viz.signal("x_one") // scale(x,1) pos of 1 on x scale in pixels (so the amount I want to pan by each time)
Insert cell
viz.signal("x_diff")
Insert cell
viz.getState().subcontext["0"].subcontext["0"].signals.grid_zoom_anchor
Insert cell
viz
.signal(
"panOffset",
x
//"grid_t_in",
//[viz.signal("x_domain")].map(([a, b]) => [a + 1, b + 1])[0] // better to add an offset in patch?
)
.run()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof viz = embed(cashflows_spec({ premiums }), {
renderer: "svg",
actions: true,
patch: cashflows_spec_patch()
})
Insert cell
viz.signal("highlighting", true).run()
Insert cell
viz.getState()
Insert cell
{
viz.signal("grid_translate_anchor", {
x: 55.8125,
y: 12,
extent_x: [75, 150],
extent_y: [20, 40]
});
//viz.signal("grid", { t_in: [10], value: [10] }).run();
//viz.signal("grid_t_in", [10]);
//viz.signal("grid_value", [10]).run();
}
Insert cell
viz.signal("marker", 20).run()
Insert cell
Insert cell
cursor
Insert cell
cfs = await calcudata({
models: [model.js],
input_cursors: [cursor, { ...cursor, mort_rate_factor_in }],
//input_cursors: [{...cursor, stress_in: 'none',duration_mth_in:0},{...cursor, stress_in: 'none'}],
input_domains: {
t_in: _.range(
-model.js.duration_mth({ ...cursor, t_in: 0 }),
model.js.proj_len(cursor) + 0.1,
1
)
},
outputs: ["pv_premiums", "pv_claims", "pv_commissions", "pv_expenses"]
})
Insert cell
cfs_impacts = cashflows_summary_and_keep_add_subtract({
cfs,
offset: duration_mth_in,
singular: false
}).toArrow()
Insert cell
Insert cell
viz.data("source_0", cfs_impacts.toArray()).run()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more