2f:T4f9,# Final project (dynamic visual) A dynamic visualization of credit card approvals given demographic and financial information about roughly 700 individuals. Users are given a random sample of 20 individuals from the dataset. They can select a characteristic from the dropdown to see each quality by itself, as well as move around the circles (which represent the individuals). Space is provided for the user to move the circles to two sides of the screen, one side representing the "approved" individuals and the other side being the "not approved" individuals. Once users have made a decision for all the individuals, they can click the "actual results button" to reveal whether a certain individual was actually approved or not. There are multiple purposes of this visualization:
1. To open up a discussion about how biases affect our judgement about important decisions such as credit card approvals.
2. To open up a discussion about whether these qualities about individuals can truly provide an accurate prediction as to whether an individual can be trusted with a credit card.
3. To open up a discussion about how this affects machine learning algorithms that are beginning to make these decisions, and how they could possibly be improved upon.30:T450,{ for (let i = 0; i < data.length; i++) { if (data[i]["Gender"] == "0") { data[i]["Gender"] = "Female" } else { data[i]["Gender"] = "Male" } if (data[i]["Married"] == "0") { data[i]["Married"] = "Single/Divorced/etc." } else { data[i]["Married"] = "Married" } if (data[i]["BankCustomer"] == "0") { data[i]["BankCustomer"] = "Does Not Have Bank Account" } else { data[i]["BankCustomer"] = "Has Bank Account" } if (data[i]["PriorDefault"] == "0") { data[i]["PriorDefault"] = "No Prior Defaults" } else { data[i]["PriorDefault"] = "Had Prior Defaults" } if (data[i]["Employed"] == "0") { data[i]["Employed"] = "Unemployed" } else { data[i]["Employed"] = "Employed" } if (data[i]["DriversLicense"] == "0") { data[i]["DriversLicense"] = "No License" } else { data[i]["DriversLicense"] = "Has License" } if (data[i]["Approved"] == "0") { data[i]["Approved"] = "Rejected" } else { data[i]["Approved"] = "Approved" } } }31:T579,color_legend = (the_data) => { d3.select(svgContainer).select("#key") .append("rect") .attr("width", "400") .attr("height", "400") .style("fill", "white") if (numerical_values.includes(selectField)) { gradient_legend() } // adapted from https://d3-graph-gallery.com/graph/custom_legend.html d3.select(svgContainer).select("#key").selectAll("dots") .data(Object.values(the_data)) .join("rect") .attr("x", 70) .attr("y", function(d,i){ return 30 + i*(25)}) .attr("width", 20) .attr("height", 20) .style("fill", function(d){ if (numerical_values.includes(selectField)) { return "white" } else { return d } }) .style("opacity", function(d){ if (numerical_values.includes(selectField)) { return "0.0" } else { return "1.0" } }) d3.select(svgContainer).select("#key").selectAll("labels") .data(Object.keys(the_data)) .join("text") .attr("x", 70 + 20*1.2) .attr("y", function(d,i){ return 30 + i*(25) + (10)}) .style("fill", d3.color("black")) .text(function(d){ if (numerical_values.includes(selectField)) { return "" } else { return d } }) .attr("text-anchor", "left") .style("alignment-baseline", "middle") d3.select(svgContainer).select("#key").append("text") .attr("x", "65") .attr("y", "15") .text("Legend") .attr("id", "legendTitle") }32:T9ef,gradient_legend = () => { // gradient legend code adapted from https://www.visualcinnamon.com/2016/05/smooth-color-legend-d3-svg-gradient/ d3.select(svgContainer).select("#key").append("rect") .attr("x", "70") .attr("y", "30") .attr("width", "20") .attr("height", "200") .style("fill", function(d){ if (selectField == "Age") { return "url(#linear-gradient-age)" } else if (selectField == "Debt") { return "url(#linear-gradient-debt)" } else if (selectField == "YearsEmployed") { return "url(#linear-gradient-yearsemployed)" } else if (selectField == "CreditScore") { return "url(#linear-gradient-creditscore)" } else if (selectField == "Income") { return "url(#linear-gradient-income)" } else { return "white" } }) .style("opacity", function(d){ if (numerical_values.includes(selectField)) { return "1.0" } else { return "0.0" } }); // adapted from https://d3-graph-gallery.com/graph/custom_axis.html var y = d3.scaleLinear() .domain(function(d){ if (selectField == "Age") { return [13, 81] } else if (selectField == "Debt") { return [0, 28] } else if (selectField == "YearsEmployed") { return [0, 29] } else if (selectField == "CreditScore") { return [0, 67] } else if (selectField == "Income") { return [0, 100000] } else { return [0, 0] } }) .range([210, 10]); if (numerical_values.includes(selectField)) { d3.select(svgContainer).select("#key") .append("g") .attr("transform", "translate(100,20)") .call(d3.axisRight(y)); } d3.select(svgContainer).select("#key") .append("text") .attr("x", "110") .attr("y", "37") .text(function(d){ if (selectField == "Age") { return "13" } else if (selectField == "Debt") { return "0" } else if (selectField == "YearsEmployed") { return "0" } else if (selectField == "CreditScore") { return "0" } else if (selectField == "Income") { return "0" } else { return "" } }) .style("text-align", "left"); d3.select(svgContainer).select("#key") .append("text") .attr("x", "110") .attr("y", "235") .text(function(d){ if (selectField == "Age") { return "81" } else if (selectField == "Debt") { return "28" } else if (selectField == "YearsEmployed") { return "29" } else if (selectField == "CreditScore") { return "67" } else if (selectField == "Income") { return "100000" } else { return "" } }) .style("text-align", "left"); }33:T51f,change_circle_color = () => { circles.style("fill",function(d) { if (selectField == "Gender") { return colors_gender[d["Gender"]] } else if (selectField == "Age") { return colors_age(d["Age"]) } else if (selectField == "Debt") { return colors_debt(d["Debt"]) } else if (selectField == "Married") { return colors_married[d["Married"]] } else if (selectField == "BankCustomer") { return colors_bankcustomer[d["BankCustomer"]] } else if (selectField == "Industry") { return colors_industry[d["Industry"]] } else if (selectField == "Ethnicity") { return colors_ethnicity[d["Ethnicity"]] } else if (selectField == "YearsEmployed") { return colors_yearsemployed(d["YearsEmployed"]) } else if (selectField == "PriorDefault") { return colors_priordefault[d["PriorDefault"]] } else if (selectField == "Employed") { return colors_employed[d["Employed"]] } else if (selectField == "CreditScore") { return colors_creditscore(d["CreditScore"]) } else if (selectField == "DriversLicense") { return colors_driverslicense[d["DriversLicense"]] } else if (selectField == "Citizen") { return colors_citizen[d["Citizen"]] } else if (selectField == "Income") { return colors_income(d["Income"]) } else { return d3.color("gray")} }) }34:T458,show_correct_answers = (d) => { circles.style("fill", function(d){ return colors_approved[d["Approved"]] }); d3.select(svgContainer).select("#key") .append("rect") .attr("width", "400") .attr("height", "400") .style("fill", "white") // adapted from https://d3-graph-gallery.com/graph/custom_legend.html d3.select(svgContainer).select("#key").selectAll("dots") .data(Object.values(colors_approved)) .join("rect") .attr("x", 70) .attr("y", function(d,i){ return 30 + i*(25)}) .attr("width", 20) .attr("height", 20) .style("fill", function(d){ return d }) d3.select(svgContainer).select("#key").selectAll("labels") .data(Object.keys(colors_approved)) .join("text") .attr("x", 70 + 20*1.2) .attr("y", function(d,i){ return 30 + i*(25) + (10)}) .style("fill", d3.color("black")) .text(function(d){ return d }) .attr("text-anchor", "left") .style("alignment-baseline", "middle") d3.select(svgContainer).select("#key").append("text") .attr("x", "65") .attr("y", "15") .text("Legend") .attr("id", "legendTitle") }35:[{"id":"3f86597c798cc33ccda7f50d5fbb6b4339ad7fb16cfe4cfc0d5fe8eff47c7a948cfe63196c342ff4a2b7eb5f49bc0923d7773a2b85e1a92fe02bfcc1626405b1","href":"https://static.observableusercontent.com/files/3f86597c798cc33ccda7f50d5fbb6b4339ad7fb16cfe4cfc0d5fe8eff47c7a948cfe63196c342ff4a2b7eb5f49bc0923d7773a2b85e1a92fe02bfcc1626405b1","name":"credit_card_approvals_dataset.csv","type":"text/csv","lastModified":1683405358370.882,"size":45288}] 2d:{"title":"Final project (dynamic visual)","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"data = FileAttachment(\"credit_card_approvals_dataset.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"

\n \n \n

Tap to P(l)ay

Decide who should be approved for a credit card by moving around the circles!

Approved

Not Approved

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":44,"value":"viewof selectField = Inputs.select(columns, {label: \"Select Filter:\", value: \"\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"results_buttons = Inputs.button([\n [\"Actual Results\", show_correct_answers],\n [\"Hide Results\", hide_correct_answers]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"get a random sample of data.","pinned":false,"hidden":false,"mode":"md"},{"id":41,"value":"slice = d3.shuffle(data).slice(0,20)","pinned":true,"hidden":false,"mode":"ojs"},{"id":932,"value":"create the circles that represent each individual","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"circles = d3.select(svgContainer).select(\"#credit_card_approvals\").selectAll(\"circle\")\n .data(slice)\n .join(\"circle\")\n .attr(\"cx\", function(d, i){\n if (i < 10) {return 50 + i * 73}\n else { return 50 + (i-10) * 73 }\n })\n .attr(\"cy\", function(d, i){\n if (i < 10) { return 165 }\n else { return 240 }\n })\n .attr(\"r\", \"20\")\n .style(\"opacity\", \"0.8\")\n .attr(\"class\", \"datapoints\")\n .call(drag)","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"update the circle colors and legend wen the dropdown is changed.","pinned":false,"hidden":false,"mode":"md"},{"id":651,"value":"circle_colors = change_circle_color()","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"legend = color_legend(color_data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":692,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":767,"value":"### Cleaning the Data","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"rename the binary data so that the legend key is readable.","pinned":false,"hidden":false,"mode":"md"},{"id":526,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":938,"value":"create mappings of the data values and a color","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"colors_gender = ({\"Female\":\"indianred\", \"Male\":\"cadetblue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"colors_age = d3.scaleLinear().domain([13, 81]).range([\"cyan\", \"blue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"colors_debt = d3.scaleLinear().domain([0, 28]).range([\"crimson\", \"springgreen\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"colors_married = ({\"Single/Divorced/etc.\":\"indianred\", \"Married\":\"cadetblue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":239,"value":"colors_bankcustomer = ({\"Does Not Have Bank Account\":\"indianred\", \"Has Bank Account\":\"cadetblue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"colors_industry = ({\"CommunicationServices\":\"indianred\", \"ConsumerDiscretionary\":\"coral\", \"ConsumerStaples\":\"mediumvioletred\", \"Education\":\"khaki\", \"Energy\":\"mediumorchid\", \"Financials\":\"mediumseagreen\", \"Healthcare\":\"paleturquoise\", \"Industrials\":\"navy\", \"InformationTechnology\":\"blanchedalmond\", \"Materials\":\"peru\", \"Real Estate\":\"aniquewhite\", \"Research\":\"gainsboro\", \"Transport\":\"royalblue\", \"Utilities\":\"maroon\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"colors_ethnicity = ({\"White\":\"antiquewhite\", \"Black\":\"steelblue\", \"Asian\":\"lightsalmon\", \"Latino\":\"rebeccapurple\", \"Other\":\"darkseagreen\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"colors_yearsemployed = d3.scaleLinear().domain([0, 29]).range([\"cyan\", \"blue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"colors_priordefault = ({\"Had Prior Defaults\":\"indianred\", \"No Prior Defaults\":\"cadetblue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"colors_employed = ({\"Unemployed\":\"indianred\", \"Employed\":\"cadetblue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"colors_creditscore = d3.scaleLinear().domain([0, 67]).range([\"crimson\", \"springgreen\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"colors_driverslicense = ({\"No License\":\"indianred\", \"Has License\":\"cadetblue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"colors_citizen = ({\"ByBirth\":\"mediumseagreen\", \"ByOtherMeans\":\"lightsteelblue\", \"Temporary\":\"lightpink\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"colors_income = d3.scaleLinear().domain([0, 100000]).range([\"cyan\", \"blue\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"colors_approved = ({\"Rejected\":\"red\", \"Approved\":\"green\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":769,"value":"### Variables","pinned":false,"hidden":false,"mode":"md"},{"id":940,"value":"columns that the user can interact with. omitted \"zip code\" and \"approved\"","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"columns = [\"Gender\", \"Age\", \"Debt\", \"Married\", \"BankCustomer\", \"Industry\", \"Ethnicity\", \"YearsEmployed\", \"PriorDefault\", \"Employed\", \"CreditScore\", \"DriversLicense\", \"Citizen\", \"Income\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"numerical_values = [\"Age\", \"Debt\", \"YearsEmployed\", \"CreditScore\", \"Income\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":944,"value":"variable of an array that changed depending on what dropdown in selected","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"color_data = {\n if (selectField == \"Gender\") { return colors_gender }\n else if (selectField == \"Age\") { return colors_age }\n else if (selectField == \"Debt\") { return colors_debt }\n else if (selectField == \"Married\") { return colors_married }\n else if (selectField == \"BankCustomer\") { return colors_bankcustomer }\n else if (selectField == \"Industry\") { return colors_industry }\n else if (selectField == \"Ethnicity\") { return colors_ethnicity } \n else if (selectField == \"YearsEmployed\") { return colors_yearsemployed }\n else if (selectField == \"PriorDefault\") { return colors_priordefault } \n else if (selectField == \"Employed\") { return colors_employed } \n else if (selectField == \"CreditScore\") { return colors_creditscore }\n else if (selectField == \"DriversLicense\") { return colors_driverslicense }\n else if (selectField == \"Citizen\") { return colors_citizen }\n else if (selectField == \"Income\") { return colors_income }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":942,"value":"for the gradient legend","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"defs = d3.select(svgContainer).select(\"#key\").append(\"defs\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"### Functions","pinned":false,"hidden":false,"mode":"md"},{"id":946,"value":"create the legend key (categorical data)","pinned":false,"hidden":false,"mode":"md"},{"id":381,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":949,"value":"create the gradient legend (for numerical data)","pinned":false,"hidden":false,"mode":"md"},{"id":897,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":951,"value":"helper variable/procedures for the gradient legend","pinned":false,"hidden":false,"mode":"md"},{"id":804,"value":"linearGradientAge = defs.append(\"linearGradient\")\n .attr(\"id\", \"linear-gradient-age\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"{\n linearGradientAge\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"0%\")\n .attr(\"y2\", \"100%\");\n\n linearGradientAge\n .append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", \"cyan\");\n\n linearGradientAge\n .append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", \"blue\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":810,"value":"linearGradientDebt = defs.append(\"linearGradient\")\n .attr(\"id\", \"linear-gradient-debt\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"{\n linearGradientDebt\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"0%\")\n .attr(\"y2\", \"100%\");\n\n linearGradientDebt\n .append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", \"crimson\");\n\n linearGradientDebt\n .append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", \"springgreen\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":813,"value":"linearGradientYearsEmployed = defs.append(\"linearGradient\")\n .attr(\"id\", \"linear-gradient-yearsemployed\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"{\n linearGradientYearsEmployed\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"0%\")\n .attr(\"y2\", \"100%\");\n\n linearGradientYearsEmployed\n .append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", \"cyan\");\n\n linearGradientYearsEmployed\n .append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", \"blue\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":816,"value":"linearGradientCreditScore = defs.append(\"linearGradient\")\n .attr(\"id\", \"linear-gradient-creditscore\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"{\n linearGradientCreditScore\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"0%\")\n .attr(\"y2\", \"100%\");\n\n linearGradientCreditScore\n .append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", \"crimson\");\n\n linearGradientCreditScore\n .append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", \"springgreen\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"linearGradientIncome = defs.append(\"linearGradient\")\n .attr(\"id\", \"linear-gradient-income\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"{\n linearGradientIncome\n .attr(\"x1\", \"0%\")\n .attr(\"y1\", \"0%\")\n .attr(\"x2\", \"0%\")\n .attr(\"y2\", \"100%\");\n\n linearGradientIncome\n .append(\"stop\")\n .attr(\"offset\", \"0%\")\n .attr(\"stop-color\", \"cyan\");\n\n linearGradientIncome\n .append(\"stop\")\n .attr(\"offset\", \"100%\")\n .attr(\"stop-color\", \"blue\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":953,"value":"function to update the color of the circles based on what category was selected from the dropdown","pinned":false,"hidden":false,"mode":"md"},{"id":222,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":955,"value":"function that defines what should happen when the correct approved values button is clicked:
\n- updates the color of the circles\n- updates the legend","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":957,"value":"function that defines what should happen when the \"hide results\" button is pressed:
\n- change circle colors back to what the dropdown says\n- update the legend (gradient if neccesary)","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"hide_correct_answers = (d) => {\n change_circle_color();\n color_legend(color_data);\n gradient_legend();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"drag = {\n\n function dragstarted() {\n d3.select(this).attr(\"stroke\", \"black\");\n }\n\n function dragged(event, d) {\n d3.select(this).raise().attr(\"cx\", event.x).attr(\"cy\", event.y);\n }\n\n function dragended() {\n d3.select(this).attr(\"stroke\", null);\n }\n\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}