Public
Edited
May 8, 2023
Insert cell
Insert cell
<h1>Data Maketh (Hu)man</h1>
<p>Is our data really an <b>accurate</b> representation of ourselves? Enough to determine if we are <b>trustworthy</b> enough to own a credit card? </p>
<div style="margin-top: 30px;">
&emsp;&emsp; &middot; Clustered based on the industry the individual works in. <br/>
&emsp;&emsp; &middot; Sized based on the individual's amount of debt. <br />
&emsp;&emsp; &middot; Colored based on a combination of whether the individual had a prior default and if they were approved or not.<br />
</div>

<svg id="base" width="1300" height="800">
<g id="layer1"></g>
</svg>

<style>
.node {fill:none;}
.node text {font-size: 12px; fill: white; text-anchor: middle}
.NoPriorDefault_Approved {fill:#FF7F50; background-color:#FF7F50; color: #dddddd;} /* black */
.NoPriorDefault_Rejected {fill:#4682B4; background-color:#4682B4;} /* green */
.YesPriorDefault_Approved {fill:#DA70D6; background-color:#DA70D6;}
.YesPriorDefault_Rejected {fill:#2E8B57; background-color:#2E8B57;}

.fociLabel {font-size: 14px; fill: #000000; text-anchor: middle; font-weight:bold;}
</style>
Insert cell
data = FileAttachment("credit_card_approvals_dataset.csv").csv()
Insert cell
{
for (let i = 0; i < data.length; i++) {
if (data[i]["PriorDefault"] == "0") {
data[i]["PriorDefault"] = "NoPriorDefault"
} else {
data[i]["PriorDefault"] = "YesPriorDefault"
}
if (data[i]["Approved"] == "0") {
data[i]["Approved"] = "Rejected"
} else {
data[i]["Approved"] = "Approved"
}

if (data[i]["PriorDefault"] == "NoPriorDefault" && data[i]["Approved"] == "Approved") {
data[i]["PriorDefault_Approved"] = "NoPriorDefault_Approved";
}
else if (data[i]["PriorDefault"] == "NoPriorDefault" && data[i]["Approved"] == "Rejected") {
data[i]["PriorDefault_Approved"] = "NoPriorDefault_Rejected";
}
else if (data[i]["PriorDefault"] == "YesPriorDefault" && data[i]["Approved"] == "Approved") {
data[i]["PriorDefault_Approved"] = "YesPriorDefault_Approved";
}
else if (data[i]["PriorDefault"] == "YesPriorDefault" && data[i]["Approved"] == "Rejected") {
data[i]["PriorDefault_Approved"] = "YesPriorDefault_Rejected";
}
}
}
Insert cell
fociIndustries = ({
"CommunicationServices":{x: 100, y: 200},"ConsumerDiscretionary":{x: 300, y: 200},"ConsumerStaples":{x: 500, y: 200},"Education":{x: 700, y: 200},
"Energy":{x: 900, y: 200},"Financials":{x: 100, y: 400},"Healthcare":{x: 300, y: 400},"Industrials":{x: 500, y: 400},
"InformationTechnology":{x: 700, y: 400},"Materials":{x: 900, y: 400},"Real Estate":{x: 100, y: 600},"Research":{x: 300, y: 600},"Transport":{x: 500, y: 600},"Utilities":{x: 700, y: 600}
})
Insert cell
clElem = d3.select(svgContainer).select("#layer1")
Insert cell
options = ({
"startFoci": fociIndustries,
"fociField": "Industry",
"classField": "PriorDefault_Approved", // to set their class/color
"dotScaleFactor": 5,
"strength": -1,
"alphaTarget": 0.09,
"collisionFactor": 1.3
})
Insert cell
clusters = dvCluster(clElem,data,800,800,"Debt",options)
Insert cell
labelLayer = clElem.append("g").attr("id","labels")
Insert cell
dvClusterFociLabels(labelLayer,fociIndustries,{offsetY:115})
Insert cell
Insert cell
Insert cell

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.
Learn more