An curious maker & coder from Malaysia, doing fun projects related to Arduino RPi, IoT, PCB, LED, linux, javascript (p5, phaser, Vue), dataviz & art installation
md `# Auto Loan Plot Analysis`
myLoan = FileAttachment("autoloan.csv").csv({typed: true})
myLoan2 = myLoan.map( d => (
{
Vehicle_Make: d.Vehicle_Make,
Vehicle_Model: d.Vehicle_Model,
Loan_Amount: d.Loan_Amount,
Branch_code: d.Branch_code,
Annual_Income: d.Annual_Income,
Interest_Rate: d.Interest_Rate*100,
Income_Level: parseIncome( d.Annual_Income ),
}
)
)
.sort((a, b) => b.Loan_Amount - a.Loan_Amount)
md` ## Added Income_Level as a value`
md` ### Created a function to convert string to value`
parseIncome = function income(d) {
let n
switch ( d[0] ) {
case '2': n = 12000; break;
case '3': n = 18000; break;
case '4': n = 24000; break;
case '5': n = 48000; break;
case '6': n = 72000; break;
case '7': n = 96000; break;
case '8': n = 120000; break;
case '9': n = 150000; break;
defaut: n = 0;
}
return n
}
incomeRange = [ 12000,18000, 24000, 48000, 72000, 96000, 120000, 150000 ]
Inputs.table(myLoan2)
md`### Get all car brands`
carBrandList = _.uniqBy(myLoan, d => d.Vehicle_Make)
.map(d => d.Vehicle_Make)
.sort()
md`## Use pulldown menu to select car brand to filter`
viewof carBrand = Inputs.select([null].concat(carBrandList), {label: "Make"})
md`## Drag slider for number of results to return`
viewof results = Inputs.range([50, 500], {value: 50, step: 10, label: "Results"})
carBrandLoan = myLoan2.map( d => (
{
Vehicle_Model: d.Vehicle_Model,
Vehicle_Make: d.Vehicle_Make,
Loan_Amount: d.Loan_Amount,
Branch_code: d.Branch_code,
Annual_Income: d.Annual_Income,
Income_Level: parseIncome( d.Annual_Income ),
}
)
)
.filter(d => d.Vehicle_Make == carBrand )
.sort((a, b) => b.Loan_Amount - a.Loan_Amount)
.splice(0,results)
Plot.plot({
width:1200,
height: 600,
grid: true,
inset: 10,
marginLeft: 150,
x: {
label: "Amount (000)",
transform: f => f / 1000,
padding: 0.8
},
y: {
label: "Model",
padding: 2,
},
marks: [
//Plot.ruleY([0]),
//Plot.dot(carBrandLoan, Plot.binX( {color: "count"}, {y: "Vehicle_Model", x: "Loan_Amount", fill:"Branch_code"})),
Plot.dot(carBrandLoan, Plot.binX( {fill: "count"}, {y: "Vehicle_Model", x: "Loan_Amount", fill:"Branch_code"})),
]
})
Inputs.table(carBrandLoan)
md` ## All Brands vs Loan Amount`
Plot.dot(myLoan2, {y: "Vehicle_Make", x: "Loan_Amount", stroke:"Loan_Amount"}).plot({
width:1200,
height: 600,
grid: true,
inset: 10,
marginLeft: 120,
y: {
label: "Make",
padding: 0.1
},
x: {
label: "Amount (000)",
padding: 0.1,
transform: f => f / 1000,
},
})
Plot.plot({
width:1200,
height: 800,
grid: true,
inset: 10,
marginLeft: 150,
x: {
label: "Amount (000)",
transform: f => f / 1000,
padding: 0.8
},
y: {
label: "Make",
padding: 0.2
},
marks: [
//Plot.ruleY([0]),
Plot.barX(myLoan2, {y: "Vehicle_Make", x: "Loan_Amount", stroke:"Loan_Amount"}),
]
})
md `### Income level vs Vehicle Make`
Plot.plot({
width:1200,
height: 800,
grid: true,
inset: 10,
marginLeft: 150,
x: {
label: "Amount (000)",
padding: 0.8
},
y: {
label: "Make",
padding: 0.2
},
marks: [
//Plot.ruleY([0]),
Plot.dot(myLoan2, {y: "Vehicle_Make", x: "Income_Level", stroke:"Income_Level"}),
]
})
md`### Corelation between loan amount and branch`
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.
