Final Project / Sarah Wimbish

dataName = race + gender + value

function getData(name){

if(name == "WhiteMaleMean") {return WhiteMaleMean}

if(name == "WhiteMaleMedian") {return WhiteMaleMedian}

if(name == "WhiteFemaleMean") {return WhiteFemaleMean}

if(name == "WhiteFemaleMedian") {return WhiteFemaleMedian}

if(name == "AsianMaleMean") {return AsianMaleMean}

if(name == "AsianMaleMedian") {return AsianMaleMedian}

if(name == "AsianFemaleMean") {return AsianFemaleMean}

if(name == "AsianFemaleMedian") {return AsianFemaleMedian}

if(name == "BlackMaleMean") {return BlackMaleMean}

if(name == "BlackMaleMedian") {return BlackMaleMedian}

if(name == "BlackFemaleMean") {return BlackFemaleMean}

if(name == "BlackFemaleMedian") {return BlackFemaleMedian}

if(name == "HispanicMaleMean") {return HispanticMaleMean}

if(name == "HispanicMaleMedian") {return HispanticMaleMedian}

if(name == "HispanicFemaleMean") {return HispanicFemaleMean}

if(name == "HispanicFemaleMedian") {return HispanicFemaleMedian}

}

function getIndex(){

if(attribute == "Age") {return 0}

if(attribute == "Region") {return 1}

if(attribute == "Household Status") {return 2}

if(attribute == "Education") {return 3}

}

dropdown = [["15-24", "25-29", "30-34", "35-39", "40-44", "45-49", "50-54", "55-59", "60-64", "65-69", "70-74", "75+"], ["Inside metropolitan statistical areas", "Inside principal cities", "Outside principal cities", "Outside metropolitan statistical areas", "Northeast", "Midwest", "South", "West"], ["Householder", "Spouse of householder", "Child of householder",

"Other relative of householder"], ["Less than 9th grade", "9th to 12th grade no diploma", "High school graduate (includes equivalency)", "Some college no degree", "Associate degree", "Bachelor's degree or more", "Bachelor's degree", "Master's degree", "Professional degree", "Doctorate degree"]]

[selected, buttonIndex()]

MeanOrMedian()

function buttonIndex(){

if(selected == "Inside metropolitan statistical areas"){return 1}

if(selected == "Inside principal cities"){return 2}

if(selected == "Outside principal cities"){return 3}

if(selected == "Outside metropolitan statistical areas"){return 4}

if(selected == "Northeast"){return 5}

if(selected == "Midwest"){return 6}

if(selected == "South"){return 7}

if(selected == "West"){return 8}

if(selected == "15-24"){return 9}

if(selected == "25-29"){return 10}

if(selected == "30-34"){return 11}

if(selected == "35-39"){return 12}

if(selected == "40-44"){return 13}

if(selected == "45-49"){return 14}

if(selected == "50-54"){return 15}

if(selected == "55-59"){return 16}

if(selected == "60-64"){return 17}

if(selected == "65-69"){return 18}

if(selected == "70-74"){return 19}

if(selected == "75+"){return 20}

if(selected == "Householder"){return 21}

if(selected == "Spouse of householder"){return 22}

if(selected == "Child of householder"){return 23}

if(selected == "Other relative of householder"){return 24}

if(selected == "Less than 9th grade"){return 25}

if(selected == "9th to 12th grade no diploma"){return 26}

if(selected == "High school graduate (includes equivalency)"){return 27}

if(selected == "Some college no degree"){return 28}

if(selected == "Associate degree"){return 29}

if(selected == "Bachelor's degree or more"){return 30}

if(selected == "Bachelor's degree"){return 31}

if(selected == "Master's degree"){return 32}

if(selected == "Professional degree"){return 33}

if(selected == "Doctorate degree"){return 34}

}

<style>

#mytext {font-family: Arial,Helvetica,sans-serif;}

#attributesText {font-family: Arial,Helvetica,sans-serif;}

#outlineHeader {font-family: Arial,Helvetica,sans-serif;}

</style>

</svg>

</div>

MeanOrMedian(value)

meanMedianIncome = [53996, 35805]

rFromArea = (area) => Math.sqrt((area)/Math.PI);

function MeanOrMedian(value) {

if(value === "Mean"){

return 131.10095581032184;

}

else {

return 106.75713313315708;}

}

viz.select("#outlineHeader").text("The " + value + " U.S. income: $" + Math.round(Math.PI*MeanOrMedian(value)*MeanOrMedian(value)))

.attr("font-size", 14)

.attr("y", MeanOrMedian(value)+270)

viz = d3.select(container).select("#dataContainer")

circles = viz.selectAll(".circles")

.data(getData(dataName))

.join("circle")

.attr("class","circles")

.attr("cx", d => 250)

.attr("cy", d => 250)

.attr("r", d => rFromArea(getData(dataName)[buttonIndex()]))

.attr("fill", "#889b73")

.style("opacity", 0.05);

mean_median_circle = viz.selectAll("circle")

.data(meanMedianIncome)

.join("circle")

.attr("cx", 250)

.attr("cy", 250)

.attr("r", MeanOrMedian(value))

.attr("fill", "#FFFFFF")

.attr("stroke", "#000000")

.attr("stroke-width", 3)

.style("opacity", 1);

viz.select("#mytext").text("$" + String(getData(dataName)[buttonIndex()]));

viz.select("#attributesText").text("The " + value + " annual income for the group you have selected is:" )

Purpose-built for displays of data