👨💻 Modelling consultant
🧮 numbers 📊 actuarial
📈 viz, interactivity, transparency
loanvizspec = calcuvizspec({
models: [loan],
input_cursors: [{
principal_in: 100000,
i_in: (i)/100,
term_in: 25
}],
mark: 'bar',
encodings: {
x: {name: 'year_in', domain: _.range(-1,26,1)},
y: {name: 'value', type: 'quantitative'},
row: {name: 'formula', domain: ['balance', 'interest']},
color: {name: 'formula' }
}
})
vega(calcuvizspec({
models: [loan],
input_cursors: [{
principal_in: 100000,
i_in: (i)/100,
term_in: 25
}],
mark: 'line', // bar->line, also removed row encoding:
encodings: {
x: {name: 'year_in', domain: _.range(-1,26,1)},
y: {name: 'value', type: 'quantitative'},
color: {name: 'formula', domain: ['balance', 'interest', 'repayment']}
}
}))
tablevizspec = calcuvizspec({
models: [loan],
input_cursors: [{
principal_in: 100000,
i_in: (i)/100,
term_in: 25
}],
mark: 'text', // mark is text
encodings: {
y: {name: 'year_in', domain: _.range(-1,26,1), type: 'nominal'},
text: {name: 'value', type: 'quantitative'}, // value from model is mapped to text channel
x: {name: 'formula', domain: ['balance', 'interest', 'repayment', 'v_pow_term_left']}, // show more formulae
color: {name: 'formula'}
}
})
tablevizspec_custom = {
var o = {...tablevizspec};
o.width = 300
o.height = 400
o.encoding.text.format = ',.2f'
return o // other customisation like removing the redundant color legend, moving x axis to top, also possible; open below in Vega Editor & vega-lite has excellent documentation
}
vega(calcuvizspec({
models: [loan],
input_cursors: [{
term_in: 25,
year_in: 2 // year is no longer defined along a domain below, so I need to provide a value here
// the repayment for each year will be the same, so 2 is fine
}],
mark: 'rect', // rect for heatmap
encodings: {
x: {name: 'principal_in', domain: _.range(10000,100000,10000)},
y: {name: 'i_in', type: 'nominal', domain: [0, 0.05, 0.10, 0.15, 0.20]},
color: {name: 'value', type: 'quantitative'},
row: {name: 'formula', domain: ['repayment']}
}
}))
vega(calcuvizspec({
models: [loan],
input_cursors: [{
principal_in: 100000,
i_in: (i)/100,
term_in: 25
}],
mark: 'text', // mark is text
encodings: {
x: {name: 'balance', type: 'quantitative'},
y: {name: 'interest', type: 'quantitative'},
text: {name: 'year_in', type: 'quantitative', domain: _.range(-1,26,1) },
color: {name: 'year_in', type: 'ordinal', domain: _.range(-1,26,1) },
}
}))
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.
