<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;">
   · Clustered based on a combination of the individual's ethnicity and whether they were approved. <br/>
   · Sized based on the amount of debt the individual has. <br />
   · Colored based on what industry the individual works in.<br />
</div>
<svg id="base" width="1500" height="950">
<g id="layer1"></g>
</svg>
<style>
.node {fill:none;}
.node text {font-size: 12px; fill: white; text-anchor: middle}
.CommunicationServices {fill:#CD5C5C; background-color:#CD5C5C; color: #dddddd;}
.ConsumerDiscretionary {fill:#FF7F50; background-color:#FF7F50;}
.ConsumerStaples {fill:#C71585; background-color:#C71585; color: #dddddd;}
.Education {fill:#F0E68C; background-color:#F0E68C;}
.Energy {fill:#BA55D3; background-color:#BA55D3;}
.Financials {fill:#3CB371; background-color:#3CB371;}
.Healthcare {fill:#AFEEEE; background-color:#AFEEEE;}
.Industrials {fill:#000080; background-color:#000080;}
.InformationTechnology {fill:#FFEBCD; background-color:#FFEBCD;}
.Materials {fill:#CD853F; background-color:#CD853F;}
.RealEstate {fill: #FAEBD7; background-color: #FAEBD7;}
.Research {fill:#DCDCDC; background-color:#DCDCDC;}
.Transport {fill:#4169E1; background-color:#4169E1;}
.Utilities {fill:#800000; background-color:#800000;}
.fociLabel {font-size: 20px; fill: #000000; text-anchor: middle;}
</style>
data = FileAttachment("credit_card_approvals_dataset.csv").csv()
{
for (let i = 0; i < data.length; i++) {
if (data[i]["Approved"] == "1" && data[i]["Ethnicity"] == "White") {
data[i]["Approved_Ethnicity"] = "white_approved"
}
else if (data[i]["Approved"] == "0" && data[i]["Ethnicity"] == "White") {
data[i]["Approved_Ethnicity"] = "white_rejected"
}
else if (data[i]["Approved"] == "1" && data[i]["Ethnicity"] == "Black") {
data[i]["Approved_Ethnicity"] = "black_approved"
}
else if (data[i]["Approved"] == "0" && data[i]["Ethnicity"] == "Black") {
data[i]["Approved_Ethnicity"] = "black_rejected"
}
else if (data[i]["Approved"] == "1" && data[i]["Ethnicity"] == "Asian") {
data[i]["Approved_Ethnicity"] = "asian_approved"
}
else if (data[i]["Approved"] == "0" && data[i]["Ethnicity"] == "Asian") {
data[i]["Approved_Ethnicity"] = "asian_rejected"
}
else if (data[i]["Approved"] == "1" && data[i]["Ethnicity"] == "Latino") {
data[i]["Approved_Ethnicity"] = "latino_approved"
}
else if (data[i]["Approved"] == "0" && data[i]["Ethnicity"] == "Latino") {
data[i]["Approved_Ethnicity"] = "latino_rejected"
}
else if (data[i]["Approved"] == "1" && data[i]["Ethnicity"] == "Other") {
data[i]["Approved_Ethnicity"] = "other_approved"
}
else if (data[i]["Approved"] == "0" && data[i]["Ethnicity"] == "Other") {
data[i]["Approved_Ethnicity"] = "other_rejected"
}
// if (data[i]["PriorDefault"] == "0") {
// data[i]["PriorDefault"] = "NoPriorDefault"
// } else {
// data[i]["PriorDefault"] = "YesPriorDefault"
// }
if (data[i]["Employed"] == "0") {
data[i]["Employed"] = "Unemployed"
} else {
data[i]["Employed"] = "Employed"
}
if (data[i]["Industry"] == "Real Estate") {
data[i]["Industry"] = "RealEstate"
}
}
}
fociFeatures = ({
"white_approved":{x: 200, y: 200},"white_rejected":{x: 450, y: 200},"black_approved":{x: 700, y: 200},"black_rejected":{x: 950, y: 200},
"asian_approved":{x: 200, y: 450},"asian_rejected":{x: 450, y: 450},"latino_approved":{x: 700, y: 450},"latino_rejected":{x: 950, y: 450},
"other_approved":{x: 200, y: 700},"other_rejected":{x: 450, y: 700}
})
clElem = d3.select(svgContainer).select("#layer1")
options = ({
"startFoci": fociFeatures,
"fociField": "Approved_Ethnicity",
"classField": "Industry", // to set their class/color
"dotScaleFactor": 5,
"strength": -1,
"alphaTarget": 0.09,
"collisionFactor": 1.5
})
clusters = dvCluster(clElem,data,800,800,"Debt",options)
labelLayer = clElem.append("g").attr("id","labels")
dvClusterFociLabels(labelLayer,fociFeatures,{offsetY:155})
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.
