xujenna · May 20, 2021 18:56
diff --git a/activities.csv b/activities.csv
diff --git a/demographics.json b/demographics.json
 {
    "proportion_depressed": {
        "wave_1": 0.0611620795107034,
        "wave_2": 0.0518934081346424,
        "wave_3": 0.0510673922143156,
        "wave_4": 0.0404521118381915,
        "wave_5": 0.0493920972644377
    },
    "proportion_gender_depressed": {
        "male": 0.0949926362297496,
        "female": 0.15626383355467
    },
    "proportion_age_depressed": {
        "24-34": 0.0675675675675676,
        "35-44": 0.0795262267343486,
        "45-54": 0.0538461538461538,
        "55-64": 0.0437956204379562,
        "65-74": 0.0588235294117647,
        "75+": 0.0605381165919283
    },
    "proportion_education_depressed": {
        "0": 0.333333333333333,
        "1": 0.16666666666666710,
        "2": 0.157894736842105,
        "3": 0.177777777777778,
        "4": 0.191489361702128,
        "5": 0.174603174603175,
        "6": 0.144444444444444,
        "7": 0.210084033613445,
        "8": 0.13840830449827,
        "9": 0.193939393939394,
        "10": 0.116071428571429,
        "11": 0.165217391304348,
        "12": 0.122507122507123,
        "13": 0.118367346938776,
        "14": 0.134285714285714,
        "15": 0.0847457627118644,
        "16": 0.106299212598425,
        "17": 0.0731707317073171
    },
    "proportion_income_depressed": {
        "< $10k": 0.187925170068027,
        "$10-19,999": 0.136518771331058,
        "$20-29,999": 0.100671140939597,
        "$30-39,999": 0.0815789473684211,
        "$40-59,999": 0.0894308943089431,
        "$60,000+": 0.0783410138248848
    },
    "first_reported_depression":{
        "wave_1": 220,
        "wave_2": 110,
        "wave_3": 75,
        "wave_4": 28,
        "wave_5": 20
    },
    "proportion_age_depressed_1994": {
        "24-34": 0.004054054,
        "35-44": 0.023688663,
        "45-54": 0.046153846,
        "55-64": 0.011678832,
        "65-74": 0.016993464,
        "75+": 0.042600897
    },
    "proportion_income_depressed_1994": {
        ">$5K": 0.0986842105263158,
        "$5-10K": 0.047752808988764,
        "$10-15K": 0.0394736842105263,
        "$15-20K": 0.0175438596491228,
        "$20-25K": 0.0160427807486631,
        "$25-30K": 0.00645161290322581,
        "$30-40K": 0.0158227848101266,
        "$40-60K": 0.0232558139534884,
        "$60-80K": 0.0235849056603774,
        "$80-100K": 0.021978021978022,
        ">=$100K": 0.0087719298245614

    }
 }
diff --git a/employment.csv b/employment.csv
diff --git a/health.csv b/health.csv
diff --git a/index.html b/index.html
 <html>
 <head>
    <meta charset="UTF-8">
    <style>
        body{
            font-family:monospace;
            margin:0;
        }
        div{
            text-align: center;
            margin:10px;
        }
        svg{
            display:inline-block;
        }
        .tick, .majorTick{
            font-size:12px;
            font-family:monospace;
        }
        .line, .sample1994Line{
            fill: none;
            stroke-width: 2.5;
            stroke:grey;
            opacity:0.15;
        }
        .sample1994Line{
            stroke:red;
            opacity:1;
        }
        .yAxis line, .xAxis line{
            stroke-width:1;
            stroke-dasharray: 3;
            stroke: silver;
        }
        .chart-title{
            text-anchor: middle;
            font-size: 14px;
        }
        a{
            color:black;
        }
        a:visited{
            color:black;
        }
        #footer{
            background-color:gold;
            margin:auto;
            /* width:100vw; */
            height: 25px;
            padding: 20px 10%;
            vertical-align: middle;
            font-size:11px;
            line-height:20px;
            text-align: center;
        }
        .questions{
            display:inline-block;
            width:35%;
            text-align: left;
            vertical-align: top;
            line-height:18px;
            margin-left:25px;
            margin-right:25px;
        }
        .questions li {
            padding-bottom:8px;
        }
        .demo-line{
            fill:none;
            stroke:black;
            stroke-width:2px;
        }
        .majorTick line{
            stroke:red;
            stroke-dasharray: none;
        }
        .bar{
            fill: grey;
        }
        .demo-container{
            display: inline-block;
        }
        .demo-description{
            display: inline-block;
            width:20%;
            text-align: left;
            vertical-align: top;
            padding-top:10%;
        }
        .intro{
            width:80%;
            /* height:80%; */
            text-align: center;
            padding: 0 10% 3% 20%;
            /* background-color: gold; */
            margin:0;
        }
        .intro-section{
            width:45%;
            padding: 10% 0 0 0;
            /* display: inline-block; */
            text-align:left;
            vertical-align: top;
            font-size:16px;
            line-height:22px;
        }
        .intro-section p {
            margin-bottom: 30px;
        }
    </style>
 </head>

 <body>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="script.js"></script>

    <div class="intro">
        <div class="intro-section">
            <h2>The Dataset</h2>
            <p>UM's <a href="https://www.icpsr.umich.edu/icpsrweb/NAHDAP/studies/4690/summary" target="new">American's Changing Lives (ACL)</a> survey series is an ongoing, national longitudinal study that covers a wide range of sociological, psychological, mental, and physical health items. I chose this dataset for its depth and breadth, because I wanted to answer a nebulous question: what factors contribute to the onset of depression? Having recently read Johann Hari's book, <i>Lost Connections</i>, I wanted to see if data could back up his claim that depression isn't a biochemical issue, but instead triggered by the isolation caused by social issues, specifically fractured community structure and Western society's increasing conflation of status with purpose.<br></p><br>
            <h2>Descriptive Statistics</h2>
            <p>After weeks of struggling with R and factor data types, I was able to produce some "descriptive statistics" charts for the midterm. Selections are reproduced below:</p>
        </div>
    </div>
    <div id="chart">
        <div id="percent_ever_depressed-container" class="demo-container">
            <svg id="proportion_depressed"></svg>
            <div class="demo-description">Percentage of each wave's active population that responded to feeling depressed "most of the time". Together, this subset comprised of 482 people out of 3617.</div>
        </div>
        <div id="proportion_gender_depressed-container" class="demo-container">
            <svg id="proportion_gender_depressed"></svg>
            <div class="demo-description">More women participated in the study overall, but among the 482 people who reported feeling depressed at any time throughout the study, there was still proportionally more women.</div>
        </div>
        <!-- <div id="proportion_age_depressed-container" class="demo-container">
            <svg id="proportion_age_depressed"></svg>
            <div class="demo-description">These age buckets are from the first wave, in 1986. </div>
        </div> -->
        <div id="proportion_education_depressed-container" class="demo-container">
            <svg id="proportion_education_depressed"></svg>
            <div class="demo-description">This question surveyed number of years spent in school; a higher percentage of respondents who had no education were also depressed.</div>
        </div>
        <!-- <div id="proportion_income_depressed-container" class="demo-container">
            <svg id="proportion_income_depressed"></svg>
        </div> -->
        <div id="first_reported_depression-container" class="demo-container">
            <svg id="first_reported_depression"></svg>
            <div class="demo-description">My original goal was to see what factors contributed to the onset of depression, so I needed a sample that became depressed later on in the study. Unfortunately, the vast majority of an already small subset of depressed respondents came into the study depressed, but Yoav said that the 75 respondents in Wave 3 were perfectly acceptable.</div>
        </div>
        <div id="proportion_age_depressed_1994-container" class="demo-container">
            <svg id="proportion_age_depressed_1994"></svg>
            <div class="demo-description">Within this subset of 75, there was a higher incidence of depression in the 45-54 and 75+ age buckets proportional to the overall active population.</div>
        </div>
        <div id="proportion_income_depressed_1994-container" class="demo-container">
            <svg id="proportion_income_depressed_1994"></svg>
            <div class="demo-description">Within this subset of 75, those with lower incomes were also disproportionately depressed. These income brackets were created from figures reported in 1994.</div>
        </div>
        <div class="intro">
            <div class="intro-section">
                <h2>Bootstrapping</h2>
                <p>After the midterm, I spoke with Yoav about next steps. He introduced me to practice of "bootstrapping", telling me to:
                    <ol>
                        <li>calculate mean scores for relevant categories of survey questions for the 1994 sample for each wave leading up to Wave 3, </li>
                        <li>calculate the deltas across waves for each category, </li>
                        <li>repeat this process for 100 randomly selected samples from the overall population, and</li> 
                        <li>compare the results.</li>
                    </ol> 
                </p>
                <p>The survey questions seemed to be coded pretty consistently, with lower factor levels corresponding to "positive" responses and increasing to "negative" responses. However, the factor levels ranged from 2 to something like 48, so Yoav taught me how to convert them all to the same scale. As for the categories, I chose the following to look at:
                    <ul>
                        <li>Activities of Daily Life</li>
                        <li>Paid Employment</li>
                        <li>Reflections on One's Life</li>
                        <li>Self-Description</li>
                        <li>Activities of Daily Life</li>
                        <li>Social Support</li>
                        <li>Voluntary Activity</li>
                        <li>Health and Limitation of Activities</li>
                        <li>Life Events</li>
                        <li>World Views and Religion</li>
                    </ul>
 <!--                 </p>
                <p>With all this prepped, it was time to write some code. Being a R newbie, I didn't know any fancy tricks, so my first stab looked like this:</p>
                <p>
                    <img src="https://raw.githubusercontent.com/EDSP19/edsp2019project-xujenna/master/final_presentation/lol.png?token=ADFKLUROABMV2XYTD7HHA327IVA4Q" width="100%">
                </p>
                <p>
                    Unsurprisingly, R didn't like this and chose to act erratically instead... so I took Kaushik up on his offer for R help. After sitting down with him for barely more than an hour, he made more progress than I did the entire semester. Guess which one of us went to art school?
                </p>
                <p>
                    Basically, what he had helped me do was to calculate the mean scores for each category for the 1994 sample, from Wave 1-3, then organized it into a tidy data frame:
                </p>
                <p>
                    <img src="https://raw.githubusercontent.com/EDSP19/edsp2019project-xujenna/master/final_presentation/kaushik.png?token=ADFKLUT72FUPX5CBA2KWKU27IVAZW" width= "100%">
                </p>
                <p>
                    So after Kaushik bailed me out of the hell I made for myself, I functionalized what he'd done so that I could apply it 100 more random samples. Being sick and tired of my own ineffectiveness with R at this point, I exported the results to csv's for visualization below:
                </p> -->
            </div>
        </div>
        <div id="activities-container">
            <svg id="activities"></svg>
            <div class="questions">
                <ul>
                    <h3>Activities of Daily Life</h3>
                    <li>About how many times do you talk on the phone with friends, neighbors, or relatives?</li>
                    <li>How often do you get together with friends, neighbors, or relatives and do things like go out together or visit in each other's homes?</li>
                    <li>How often do you attend meetings or programs of groups, clubs, or organizations that you belong to?</li>
                    <li>How often do you typically work in the garden or yard?</li>
                    <li>How often do you engage in active sports or exercise?</li>
                    <li>How often do you take walks?</li>
                </ul>
            </div>
        </div>
        <div id="employment-container">
            <svg id="employment"></svg>
            <div class="questions">
                <ul>
                    <h3>Paid Employment</h3>
                    <li>Are you self-employed, or do you work for a private employer, or a municipal, county, state, or federal government?</li>
                    <li>Do you supervise others on your job?</li>
                    <li>How much do you enjoy doing that work?</li>
                    <li>How satisfied are you with your job?</li>
                    <li>Aside from the money, are you yourself better off because of your work on this job?</li>
                    <li>Are there other people who are better off because of your work on this job?</li>
                    <li>In addition to your main job, do you have another regular job for which are you paid?</li>
                    <li>How likely is it that during the next couple of years you will involuntarily lose your main job?</li>
                    <li>How much do you agree? I have very little chance to decide how I do my work.</li>
                    <li>How much do you agree? I get to do a variety of different things in my work.</li>
                    <li>How much do you agree? I have a lot to say about what happen in my work.</li>
                    <li>How much do you agree? I am bored with my work.</li>
                    <li>How much do you agree? I am not appreciate for the work I do.</li>
                </ul>

            </div>
        </div>
        <div id="reflections-container">
            <svg id="reflections"></svg>
            <div class="questions">
                <ul>
                    <h3>Reflections on One's Life</h3>
                    <li>How satisfied are you with your life as a whole?</li>
                    <li>How much do you agree? My life could be happier than it is now.</li>
                    <li>How much do you agree? These are the best years of my life.</li>
                    <li>How much do you agree? As I look back on my life I am fairly well satisfied.</li>
                    <li>How much do you agree? I would not change my past life even if I could.</li>
                    <li>How much do you agree? Life is not worth living if one cannot contribute to the well-being of other people.</li>
                    <li>How much do you agree? I take a positive attitude toward myself.</li>
                    <li>How much do you agree? At times I think I am no good at all.</li>
                    <li>How much do you agree? All in all, I am inclined to feel that I am a failure.</li>
                    <li>How much do you agree? I can do just about anything I really set my mind to do.</li>
                    <li>How much do you agree? Sometimes I feel that I am being pushed around in life.</li>
                    <li>How much do you agree? There is really no way I can solve the problems I have.</li>
                </ul>
            </div>
        </div>
        <div id="selfDescript-container">
            <svg id="selfDescript"></svg>
            <div class="questions">
                <ul>
                    <h3>Self Description</h3>
                    <li>During the past week, how often did you feel depressed?</li>
                    <li>During the past week, how often did everything you did feel like an effort?</li>
                    <li>During the past week, how often did you feel that there were people who really understood you?</li>
                    <li>During the past week, how often was your sleep restless?</li>
                    <li>During the past week, how often did you feel happy?</li>
                    <li>During the past week, how often did you feel lonely?</li>
                    <li>During the past week, how often did you feel that no one really knows you well?</li>
                    <li>During the past week, how often did you enjoy life?</li>
                    <li>Have you ever had a time in your life that lasted an entire week or more when you felt sad, blue or depressed most of the time, or when you lost all interest and pleasure in things you usually care about or enjoy?</li>
                    <li>Are you a talkative person?</li>
                    <li>Are you a worrier?</li>
                    <li>Are you the type of person who plans for the future?</li>
                    <li>Have you usually felt pretty sure your life would work out the way you want it to, or have there been times when you haven't been sure about it?</li>
                </ul>
            </div>
        </div>
        <div id="social-container">
            <svg id="social"></svg>
            <div class="questions">
                <ul>
                    <h3>Social Support</h3>
                    <li>Are you currently married, separated, divorced, widowed or have you never been married?</li>
                    <li>How much does your partner make you feel loved and cared for?</li>
                    <li>How much do you feel your partner makes too many demands on you?</li>
                    <li>How much is your partner critical of you or what you do?</li>
                    <li>How much do your children make you feel loved and cared for?</li>
                    <li>At this point in your life, how satisfied are you with being a parent?</li>
                    <li>How happy are you with the way your children have turn out to this point?</li>
                    <li>During the past 12 months, how often did you have contact with your mother, by phone or mail?</li>
                    <li>On the whole, how much do your friend and other relatives make you feel loved and cared for?</li>
                    <li>How much are these friends and relatives willing to listen when you need to talk about your worries or problems?</li>
                    <li>Is there anyone in your life with whom you can really share your very private feelings and concerns?</li>
                    <li>How many of your close family or friends are close to each other in the same way?</li>
                </ul>
            </div>
        </div>
        <div id="volunteering-container">
                <svg id="volunteering"></svg>
                <div class="questions">
                    <ul>
                        <h3>Voluntary Activity</h3>
                        <li>Did you do volunteer work in the last year for a church, synagogue or other religious organization?</li>
                        <li>Did you do volunteer work in the last year for a political group or labor union in the last 12 months?</li>
                        <li>About how many hours did you spend on volunteer work during the last 12 months?</li>
                        <li>How much did you enjoy doing that volunteer work?</li>
                        <li>How satisfied were you with the results of your volunteer work?</li>
                        <li>Are you better off because of your volunteer work?</li>
                        <li>Are there other people who are better off because of your volunteer work?</li>
                        <li>Did you do any other things in the last 12 months to help neighbors, friends or relatives who did not live with you?</li>
                        <li>Are you better off because of your help to friends, neighbors, and relatives?</li>
                        <li>Would you have liked to do more of that kind of unpaid work?</li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="health-container">
            <svg id="health"></svg>
            <div class="questions">
                <ul>
                    <h3>Health and Limitation of Activities</h3>
                    <li>In general, how satisfied are you with your health?</li>
                    <li>Do you wear a hearing aid?</li>
                    <li>Are you currently in bed or in a chair for most or all of the day because of your health?</li>
                    <li>Do you currently have any difficulty walking several blocks because of your health?</li>
                    <li>Are you able to get to any place you want to go?</li>
                    <li>How would you rate your health at the present time?</li>
                    <li>How much are your daily activities limited in any way by your health or health-related problems?</li>
                    <li>During the past 3 months have you seen somebody for a personal or mental problem?</li>
                    <li>How often does someone remind you to do things while will help you stay healthy?</li>
                    <li>Do you smoke cigarettes now?</li>
                </ul>
            </div>
        </div>
        <div id="life-container">
            <svg id="life"></svg>
            <div class="questions">
                <ul>
                    <h3>Life Events</h3>
                    <li>Have you ever been the victim of a serious physical attack or assualt at any time in your life?</li>
                    <li>Did you have any serious illness or accidental injury that occurred or got worse in the last three years?</li>
                    <li>Have you moved to a new residence during the past three years?</li>
                    <li>In the last three years, have you involuntarily lost a job for reasons other than retirement?</li>
                    <li>In the last three years, were you robbed or was your home burglarized?</li>
                    <li>Are you currently involved in helping someone like this by caring for them directly or arranging for their care by others?</li>
                </ul>
            </div>
        </div>
        <div id="views_religion-container">
            <svg id="views_religion"></svg>
            <div class="questions">
                <ul>
                    <h3>World Views and Religion</h3>
                    The higher the score, the less religious/spiritual.
                    <li>How much do you agree? When bad things happen, we are not supposed to know why. We are just supposed to accept them.</li>
                    <li>How much do you agree? People die when it is their time to die, and nothing can change that.</li>
                    <li>How much do you agree? Everything that happens is a part of God's plan.</li>
                    <li>How much do you agree? By and large, people deserve what they get.</li>
                    <li>How much do you agree? In the long run good people will be rewarded for the good things they have done.</li>
                    <li>How much do you agree? Because I worked hard and sacrificed in the past, I am entitled to good things in my future.</li>
                    <li>In general, how important are religious or spiritual beliefs in your day-to-day life?</li>
                    <li>When you have problems or difficulties in your work, family or personal life, how often do you seek spiritual comfort and support?</li>
                    <li>Some people believe that people simply stop existing after death while others believe in an afterlife. Which comes closest to what you believe?</li>
                </ul>
            </div>
        </div>
 </body>
 </html>
diff --git a/life.csv b/life.csv
diff --git a/reflections.csv b/reflections.csv
diff --git a/script.js b/script.js
 async function getData() {
    let activities = await d3.csv("activities.csv")
    let employment = await d3.csv("employment.csv")
    let reflections = await d3.csv("reflections.csv")
    let selfDescript = await d3.csv("self_description.csv")
    let social = await d3.csv("social.csv")
    let life = await d3.csv("life.csv")
    let views_religion = await d3.csv("views_religion.csv")
    let health = await d3.csv("health.csv")
    let volunteering = await d3.csv("volunteering.csv")
    let demographics = await d3.json("demographics.json")

    return { activities, employment, reflections, selfDescript, social, life, views_religion, health, volunteering, demographics }
 }

 getData().then(function(data){
    console.log(data)
    let margin = {top:60, right:40, bottom:60, left: 40};
    let bootstrapWidth = 350
    let bootstrapeHeight = 650

    let xScale = d3.scaleLinear()
        .domain([1,3]) 
        .range([margin.left, bootstrapWidth])
        .nice()

    let yScale = d3.scaleLinear()
        .domain([0,7]) // filter after March 22
        .range([bootstrapeHeight - margin.bottom, margin.top])

    let xTicks = d3.axisBottom(xScale)
        // .ticks(3)
        .tickValues([1,2,3])
        .tickPadding(10)
        .tickFormat(d => {
            if(d == 1){
                return "1986"
            }
            else if (d==2){
                return "1989"
            }
            else{
                return "1994"
            }
        })
        .tickSize(-(bootstrapeHeight-margin.top-margin.bottom))

    let yTicks = d3.axisLeft(yScale)
        .tickSize(-(bootstrapWidth-margin.right))
        .ticks(7)
        // .tickSizeOuter(0)
        .tickPadding(10)

    let xAxis = g => g
        .attr("transform", "translate(0,"+(bootstrapeHeight-margin.bottom)+")") // move x axis to bottom of chart
        .call(xTicks)
        .call(g => g.select(".domain").remove()) // removes y axis line
        .call(g => g.attr("class", "xAxis")); // gives class of .xAxis

    // assemble y axis
    let yAxis = g => g
        .attr("transform", "translate("+margin.left+",0)") // enforces left margin
        .call(yTicks)
        .call(g => g.select(".domain").remove()) // removes y axis line
        .call(g => g.selectAll(".tick:first-of-type text").remove())
        .call(g => g.select(".tick:first-of-type line").remove()) // removes first y axis tick
        .call(g => g.select(".tick:last-of-type line").remove()) // removes first y axis tick

        .call(g => g.attr("class", "yAxis")); // gives class .yAxis

    const line = d3.line()
        .x(d => xScale(parseInt(Object.keys(d)[0])))
        .y(d => yScale(parseFloat(d[Object.keys(d)[0]])))

    let categories = Object.keys(data)
    categories.pop()
    console.log(categories)

    categories.forEach(category => {
        let chartSVG = d3.select("#"+category)
            .attr("height", 650 + margin.top + margin.bottom + "px")
            .attr("width", 350 + margin.right + margin.left + "px")
        
        chartSVG.append("g")
            .call(xAxis);

        chartSVG.append("g")
            .call(yAxis);
        
        chartSVG.append("text")
            .text(category)
            .attr("y", 30)
            .attr("x", (bootstrapWidth+margin.right)/2)
            .attr("class", "chart-title")
    
        for(var i = 0; i <= 100; i++){
            let sampleName
            if(i == 0){
                sampleName = "sample1994_avgs"
            }
            else{
                sampleName = "sample_avg_" + i
            }
    
            let currentSampleData = []
            data[category].forEach((wave,i) => {
                let waveData = {}
                waveData[i+1] = +wave[sampleName]
                currentSampleData.push(waveData)
            })
            
            chartSVG.append("path")
                .datum(currentSampleData)
                .attr("class", function(){
                    if(sampleName == "sample1994_avgs"){
                        return "sample1994Line";
                    }
                    else{
                        return "line";
                    }
                })
                .attr("d", line)
        }
    })

    let sample1994Lines = d3.selectAll(".sample1994Line").nodes()
    sample1994Lines.forEach(line =>{
        line.parentElement.appendChild(line)
    })

    let demoKeys = Object.keys(data.demographics)

    let waveToYear = {
        "wave_1": "1986",
        "wave_2": "1989",
        "wave_3": "1994",
        "wave_4": "2002",
        "wave_5": "2011"
    }

    demoKeys.forEach(category => {
        let currentData = data["demographics"][category]
        let width = 600
        let height = 400
        let chartSVG = d3.select("#"+category)
            .attr("height", height + margin.top + margin.bottom + "px")
            .attr("width", width + margin.right + margin.left + "px")
        
        let xLabels = Object.keys(currentData)

        let yScale = d3.scaleLinear()
            .domain([0,d3.max(Object.values(currentData))])
            .range([height - margin.bottom, margin.top])
    
        let yTicks = d3.axisLeft(yScale)
            .tickSize(-(width-margin.right))
            .tickPadding(10)
            .ticks(4)

        // assemble y axis
        let yAxis = g => g
            .attr("transform", "translate("+margin.left+",0)") // enforces left margin
            .call(yTicks)
            .call(g => g.select(".domain").remove()) // removes y axis line
            .call(g => g.select(".tick:first-of-type text").remove()) // removes first y axis tick
            .call(g => g.attr("class", "yAxis")); // gives class .yAxis

        chartSVG.append("g")
            .call(yAxis);

        chartSVG.append("text")
            .text(category.replace(/_/g, " "))
            .attr("y", 30)
            .attr("x", (width+margin.right)/2)
            .attr("class", "chart-title")


        
        if(xLabels[0].includes("wave")){
            let xScale = d3.scalePoint()
                .domain(Object.values(waveToYear))
                .range([margin.left, width])
            let xTicks = d3.axisBottom(xScale)
                .ticks(xLabels.length)
                .tickPadding(10)
                .tickSize(-(height-margin.top-margin.bottom))
    
            let xAxis = g => g
                .attr("transform", "translate(0,"+(height-margin.bottom)+")") // move x axis to bottom of chart
                .call(xTicks)
                .call(g => g.select(".domain").remove()) // removes y axis line
                .call(g => g.attr("class", "xAxis")); // gives class of .xAxis
            
            chartSVG.append("g")
                .call(xAxis);

            let newData = []
            xLabels.forEach(key => {
                let wave = {}
                wave["wave"] = waveToYear[key]
                wave["val"] = currentData[key]
                newData.push(wave)
            })
            console.log(newData)
            const line = d3.line()
                .x(d => xScale(d.wave))
                .y(d => yScale(d.val))

            chartSVG.append("path")
                .datum(newData)
                .attr("class", "demo-line")
                .attr("d", line)

            if(category == "first_reported_depression"){
                chartSVG.append("circle")
                    .attr("cx", xScale("1994"))
                    .attr("cy", yScale(75))
                    .attr("fill", "black")
                    .attr("r", 4)
                chartSVG.append("text")
                    .text("↓")
                    .attr("fill", "red")
                    .attr("font-size", 28)
                    .attr("text-anchor", "middle")
                    .attr("x", xScale("1994"))
                    .attr("y", yScale(90))
                chartSVG.append("text")
                    .text("This is our sample")
                    .attr("fill", "red")
                    .attr("font-size", 13)
                    .attr("font-weight", "bold")
                    .attr("text-anchor", "middle")
                    .attr("x", xScale("1994"))
                    .attr("y", yScale(110))
            }
        }
        else{
            let xScale = d3.scaleBand()
                .domain(xLabels)
                .rangeRound([margin.left, width])
                .padding(0.1)
            let xTicks = d3.axisBottom(xScale)
                .ticks(xLabels.length)
                .tickPadding(10)
                .tickSize(-(height-margin.top-margin.bottom))

            let xAxis = g => g
                .attr("transform", "translate(0,"+(height-margin.bottom)+")") // move x axis to bottom of chart
                .call(xTicks)
                .call(g => g.select(".domain").remove()) // removes y axis line
                .call(g => g.attr("class", "xAxis")); // gives class of .xAxis
            
            chartSVG.append("g")
                .call(xAxis);

            let newData = []
            xLabels.forEach(key => {
                let wave = {}
                wave["key"] = key
                wave["val"] = currentData[key]
                newData.push(wave)
            })

            chartSVG.selectAll(".bar")
                .data(newData)
                .enter()
                .append("rect")
                    .attr("x", d => xScale(d.key))
                    .attr("y", d => yScale(d.val))
                    .attr("height", d => height - margin.top - yScale(d.val))
                    .attr("width", xScale.bandwidth())
                    .attr("class", "bar")
        }

        // d3.select(".xAxis").parentElement.insertBefore(xAxis,d3.select(".xAxis").parentElement.firstChild)
    })
 })
diff --git a/self_description.csv b/self_description.csv
diff --git a/social.csv b/social.csv
diff --git a/views_religion.csv b/views_religion.csv
diff --git a/volunteering.csv b/volunteering.csv
wave	category	sample1994_avgs	sample_avg_1	sample_avg_2	sample_avg_3	sample_avg_4	sample_avg_5	sample_avg_6	sample_avg_7	sample_avg_8	sample_avg_9	sample_avg_10	sample_avg_11	sample_avg_12	sample_avg_13	sample_avg_14	sample_avg_15	sample_avg_16	sample_avg_17	sample_avg_18	sample_avg_19	sample_avg_20	sample_avg_21	sample_avg_22	sample_avg_23	sample_avg_24	sample_avg_25	sample_avg_26	sample_avg_27	sample_avg_28	sample_avg_29	sample_avg_30	sample_avg_31	sample_avg_32	sample_avg_33	sample_avg_34	sample_avg_35	sample_avg_36	sample_avg_37	sample_avg_38	sample_avg_39	sample_avg_40	sample_avg_41	sample_avg_42	sample_avg_43	sample_avg_44	sample_avg_45	sample_avg_46	sample_avg_47	sample_avg_48	sample_avg_49	sample_avg_50	sample_avg_51	sample_avg_52	sample_avg_53	sample_avg_54	sample_avg_55	sample_avg_56	sample_avg_57	sample_avg_58	sample_avg_59	sample_avg_60	sample_avg_61	sample_avg_62	sample_avg_63	sample_avg_64	sample_avg_65	sample_avg_66	sample_avg_67	sample_avg_68	sample_avg_69	sample_avg_70	sample_avg_71	sample_avg_72	sample_avg_73	sample_avg_74	sample_avg_75	sample_avg_76	sample_avg_77	sample_avg_78	sample_avg_79	sample_avg_80	sample_avg_81	sample_avg_82	sample_avg_83	sample_avg_84	sample_avg_85	sample_avg_86	sample_avg_87	sample_avg_88	sample_avg_89	sample_avg_90	sample_avg_91	sample_avg_92	sample_avg_93	sample_avg_94	sample_avg_95	sample_avg_96	sample_avg_97	sample_avg_98	sample_avg_99	sample_avg_100	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA	NA
Wave1	activities	3.86515315315315	3.864	3.46133333333333	3.64177777777778	3.50666666666667	3.25955555555556	3.48323896499239	3.56642642642643	3.60533333333333	3.48	3.71822222222222	3.60552552552553	3.62933333333333	3.40533333333333	3.42044444444444	3.70608219178082	3.67644444444444	3.67776576576577	3.75377777777778	3.39555555555556	3.62666666666667	3.49866666666667	3.33866666666667	3.75732132132132	3.624	3.432	3.63625225225225	3.70488888888889	3.75733333333333	3.75111111111111	3.40888888888889	3.56013213213213	3.57422222222222	3.66222222222222	3.52947747747748	3.64088888888889	3.61688888888889	3.81155555555556	3.78577777777778	3.51555555555556	3.42318318318318	3.51911111111111	3.63691291291291	3.46146546546547	3.55822222222222	3.75733333333333	3.33511111111111	3.65777777777778	3.83111111111111	3.47644444444444	3.57955555555556	3.91197597597598	3.64697897897898	3.86666666666667	3.54903303303303	3.47225225225225	3.49375375375375	3.66497297297297	3.48977777777778	3.55422222222222	3.77945945945946	3.53099099099099	3.57866666666667	3.58218618618619	3.59466666666667	3.672	3.67822222222222	3.51466666666667	3.65155555555556	3.75288888888889	3.74755555555556	3.70577777777778	3.71644444444444	3.51911111111111	3.58257057057057	3.77955555555556	3.40444444444444	3.81866666666667	3.46666666666667	3.67644444444444	3.5455975975976	3.59578378378378	3.66669101978691	3.45511111111111	3.68974174174174	3.53333333333333	3.41244444444444	3.74910510510511	3.56	3.68403603603604	3.53955555555556	3.52533333333333	3.72517717717718	3.30044444444444	3.65866666666667	3.5627027027027	3.664	3.58666666666667	3.648	3.78755555555556	3.35555555555556	3.72798798798799	3.54044444444444	3.76444444444444	3.40177777777778	3.70666666666667	3.75377777777778	3.29955555555556	3.43733333333333	3.61688888888889	3.66588588588589	3.61155555555556	3.46395129375951	3.57452252252252	3.47606006006006	3.58577777777778	3.70755555555556	3.58755555555556	3.29955555555556	3.58044444444444	3.68729129129129	3.68444444444444	3.58176576576577	3.58488888888889	3.87288888888889	3.66311111111111
Wave2	activities	3.90533333333333	3.87037337662338	3.74561403508772	3.75403225806452	3.71610169491525	3.55652173913043	3.65403225806452	3.73796296296296	3.64047619047619	3.90350877192982	3.78568181818182	3.75092592592593	3.86140350877193	3.7703125	3.83634085213033	3.90172413793103	3.93362068965517	3.87105263157895	3.78728813559322	3.61	3.88245614035088	3.65079365079365	3.68518518518519	4.06984126984127	3.78939393939394	3.55573770491803	3.72543859649123	3.93898305084746	3.91065028161802	3.74568965517241	3.85288461538462	3.63839285714286	3.887	4.10641414141414	3.64	3.75277777777778	3.88629032258065	3.91206896551724	3.92732320280538	3.59833333333333	3.78932291666667	3.76011904761905	3.89285714285714	3.79555353901996	3.67222222222222	3.905	3.56491228070175	3.89435483870968	3.76071428571429	3.87540983606557	3.74067796610169	4.04661016949153	3.72966101694915	3.87950819672131	3.62166666666667	3.825	3.78070175438596	3.84745762711864	3.70245901639344	3.70086206896552	3.67641509433962	3.69516129032258	3.88083333333333	3.68023529411765	3.89385964912281	3.81120689655172	3.67844827586207	3.7508064516129	3.65636363636364	4.02909090909091	3.89553571428571	3.6844262295082	3.70707627118644	3.67777777777778	3.9	3.90438596491228	3.72909090909091	3.82583333333333	3.67618798043326	3.60566919929866	3.65462962962963	3.62923076923077	3.76676553672316	3.79354838709677	3.75166666666667	3.86694915254237	3.64565217391304	4.05269423558897	3.78534482758621	3.95816102756892	3.70737704918033	3.76634615384615	3.78036723163842	3.76610169491525	3.65727272727273	3.69761904761905	4.0327868852459	3.68620689655172	3.72377049180328	3.86101694915254	3.68660714285714	3.79032258064516	3.91048387096774	3.8984375	3.77	3.87118644067797	3.7325	3.64206349206349	3.90169491525424	3.83947368421053	3.87307692307692	3.85824915824916	3.62589285714286	3.88225952813067	3.84083333333333	3.68983050847458	3.77301587301587	3.69098360655738	3.73820488721805	3.87589285714286	3.77460317460317	3.75648148148148	3.80993647912886	3.70241935483871	3.90423728813559	3.73793103448276
Wave3	activities	3.9510990990991	3.54873188405797	3.38666666666667	3.35210884353741	3.24320987654321	3.24678362573099	3.45521885521886	3.37917397233587	3.53177476118653	3.55466666666667	3.43950617283951	3.49942760942761	3.15540650406504	3.3505	3.57536231884058	3.50724637681159	3.47037037037037	3.66677124183007	3.26794871794872	3.37254901960784	3.52222222222222	3.34172714078374	3.25652173913043	3.76339869281046	3.37818181818182	3.48868027210884	3.26878911564626	3.56349206349206	3.59926530612245	3.59487734487734	3.38156028368794	3.30222222222222	3.3089898989899	3.76951951951952	3.18756936736959	3.64798026518656	3.2640522875817	3.47845528455285	3.44296296296296	3.11358024691358	3.17851851851852	3.34335154826958	3.64240543735225	3.49242424242424	3.27885521885522	3.7156462585034	3.18752941176471	3.46555394291243	3.42669387755102	3.46588235294118	3.36465821000705	3.47674418604651	3.23529411764706	3.47594819611471	3.41111111111111	3.47703703703704	3.40354449472097	3.56823529411765	3.21349118263658	3.43636363636364	3.5989387755102	3.32529741863075	3.79132889695503	3.02527891156463	3.27851851851852	3.29032133178475	3.28325791855204	3.352	3.21904761904762	3.57361111111111	3.36666666666667	3.46500754147813	3.42176870748299	3.49866666666667	3.28930817610063	3.56454106280193	3.38624730188097	3.39831573655103	3.35079365079365	3.12	3.33821138211382	3.52093023255814	3.49425287356322	3.21782776971456	3.51066666666667	3.81189039718451	3.34545454545455	3.35026078710289	3.26060606060606	3.34476650563607	3.40919540229885	3.36376811594203	3.37148526077097	3.37508503401361	3.19855218855219	3.38946208112875	3.76470588235294	3.51240816326531	3.416	3.69166666666667	3.236	3.4952925170068	3.51194968553459	3.51733333333333	3.32030141843972	2.98156028368794	3.53207547169811	3.52969696969697	3.42242332830568	3.4030303030303	3.47295597484277	3.39958169934641	3.29645390070922	3.39102564102564	3.63918439716312	3.36169934640523	3.24575163398693	3.62176870748299	3.41618480725624	3.30860095976375	3.50277777777778	3.46955756661639	3.64933333333333	3.39191707430701	3.63387247739449	3.3209977324263
	{
	"proportion_depressed": {
	"wave_1": 0.0611620795107034,
	"wave_2": 0.0518934081346424,
	"wave_3": 0.0510673922143156,
	"wave_4": 0.0404521118381915,
	"wave_5": 0.0493920972644377
	},
	"proportion_gender_depressed": {
	"male": 0.0949926362297496,
	"female": 0.15626383355467
	},
	"proportion_age_depressed": {
	"24-34": 0.0675675675675676,
	"35-44": 0.0795262267343486,
	"45-54": 0.0538461538461538,
	"55-64": 0.0437956204379562,
	"65-74": 0.0588235294117647,
	"75+": 0.0605381165919283
	},
	"proportion_education_depressed": {
	"0": 0.333333333333333,
	"1": 0.16666666666666710,
	"2": 0.157894736842105,
	"3": 0.177777777777778,
	"4": 0.191489361702128,
	"5": 0.174603174603175,
	"6": 0.144444444444444,
	"7": 0.210084033613445,
	"8": 0.13840830449827,
	"9": 0.193939393939394,
	"10": 0.116071428571429,
	"11": 0.165217391304348,
	"12": 0.122507122507123,
	"13": 0.118367346938776,
	"14": 0.134285714285714,
	"15": 0.0847457627118644,
	"16": 0.106299212598425,
	"17": 0.0731707317073171
	},
	"proportion_income_depressed": {
	"< $10k": 0.187925170068027,
	"$10-19,999": 0.136518771331058,
	"$20-29,999": 0.100671140939597,
	"$30-39,999": 0.0815789473684211,
	"$40-59,999": 0.0894308943089431,
	"$60,000+": 0.0783410138248848
	},
	"first_reported_depression":{
	"wave_1": 220,
	"wave_2": 110,
	"wave_3": 75,
	"wave_4": 28,
	"wave_5": 20
	},
	"proportion_age_depressed_1994": {
	"24-34": 0.004054054,
	"35-44": 0.023688663,
	"45-54": 0.046153846,
	"55-64": 0.011678832,
	"65-74": 0.016993464,
	"75+": 0.042600897
	},
	"proportion_income_depressed_1994": {
	">$5K": 0.0986842105263158,
	"$5-10K": 0.047752808988764,
	"$10-15K": 0.0394736842105263,
	"$15-20K": 0.0175438596491228,
	"$20-25K": 0.0160427807486631,
	"$25-30K": 0.00645161290322581,
	"$30-40K": 0.0158227848101266,
	"$40-60K": 0.0232558139534884,
	"$60-80K": 0.0235849056603774,
	"$80-100K": 0.021978021978022,
	">=$100K": 0.0087719298245614

	}
	}
	<html>
	<head>
	<meta charset="UTF-8">
	<style>
	body{
	font-family:monospace;
	margin:0;
	}
	div{
	text-align: center;
	margin:10px;
	}
	svg{
	display:inline-block;
	}
	.tick, .majorTick{
	font-size:12px;
	font-family:monospace;
	}
	.line, .sample1994Line{
	fill: none;
	stroke-width: 2.5;
	stroke:grey;
	opacity:0.15;
	}
	.sample1994Line{
	stroke:red;
	opacity:1;
	}
	.yAxis line, .xAxis line{
	stroke-width:1;
	stroke-dasharray: 3;
	stroke: silver;
	}
	.chart-title{
	text-anchor: middle;
	font-size: 14px;
	}
	a{
	color:black;
	}
	a:visited{
	color:black;
	}
	#footer{
	background-color:gold;
	margin:auto;
	/* width:100vw; */
	height: 25px;
	padding: 20px 10%;
	vertical-align: middle;
	font-size:11px;
	line-height:20px;
	text-align: center;
	}
	.questions{
	display:inline-block;
	width:35%;
	text-align: left;
	vertical-align: top;
	line-height:18px;
	margin-left:25px;
	margin-right:25px;
	}
	.questions li {
	padding-bottom:8px;
	}
	.demo-line{
	fill:none;
	stroke:black;
	stroke-width:2px;
	}
	.majorTick line{
	stroke:red;
	stroke-dasharray: none;
	}
	.bar{
	fill: grey;
	}
	.demo-container{
	display: inline-block;
	}
	.demo-description{
	display: inline-block;
	width:20%;
	text-align: left;
	vertical-align: top;
	padding-top:10%;
	}
	.intro{
	width:80%;
	/* height:80%; */
	text-align: center;
	padding: 0 10% 3% 20%;
	/* background-color: gold; */
	margin:0;
	}
	.intro-section{
	width:45%;
	padding: 10% 0 0 0;
	/* display: inline-block; */
	text-align:left;
	vertical-align: top;
	font-size:16px;
	line-height:22px;
	}
	.intro-section p {
	margin-bottom: 30px;
	}
	</style>
	</head>

	<body>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="script.js"></script>

	<div class="intro">
	<div class="intro-section">
	<h2>The Dataset</h2>
	<p>UM's <a href="https://www.icpsr.umich.edu/icpsrweb/NAHDAP/studies/4690/summary" target="new">American's Changing Lives (ACL)</a> survey series is an ongoing, national longitudinal study that covers a wide range of sociological, psychological, mental, and physical health items. I chose this dataset for its depth and breadth, because I wanted to answer a nebulous question: what factors contribute to the onset of depression? Having recently read Johann Hari's book, <i>Lost Connections</i>, I wanted to see if data could back up his claim that depression isn't a biochemical issue, but instead triggered by the isolation caused by social issues, specifically fractured community structure and Western society's increasing conflation of status with purpose.<br></p><br>
	<h2>Descriptive Statistics</h2>
	<p>After weeks of struggling with R and factor data types, I was able to produce some "descriptive statistics" charts for the midterm. Selections are reproduced below:</p>
	</div>
	</div>
	<div id="chart">
	<div id="percent_ever_depressed-container" class="demo-container">
	<svg id="proportion_depressed"></svg>
	<div class="demo-description">Percentage of each wave's active population that responded to feeling depressed "most of the time". Together, this subset comprised of 482 people out of 3617.</div>
	</div>
	<div id="proportion_gender_depressed-container" class="demo-container">
	<svg id="proportion_gender_depressed"></svg>
	<div class="demo-description">More women participated in the study overall, but among the 482 people who reported feeling depressed at any time throughout the study, there was still proportionally more women.</div>
	</div>
	<!-- <div id="proportion_age_depressed-container" class="demo-container">
	<svg id="proportion_age_depressed"></svg>
	<div class="demo-description">These age buckets are from the first wave, in 1986. </div>
	</div> -->
	<div id="proportion_education_depressed-container" class="demo-container">
	<svg id="proportion_education_depressed"></svg>
	<div class="demo-description">This question surveyed number of years spent in school; a higher percentage of respondents who had no education were also depressed.</div>
	</div>
	<!-- <div id="proportion_income_depressed-container" class="demo-container">
	<svg id="proportion_income_depressed"></svg>
	</div> -->
	<div id="first_reported_depression-container" class="demo-container">
	<svg id="first_reported_depression"></svg>
	<div class="demo-description">My original goal was to see what factors contributed to the onset of depression, so I needed a sample that became depressed later on in the study. Unfortunately, the vast majority of an already small subset of depressed respondents came into the study depressed, but Yoav said that the 75 respondents in Wave 3 were perfectly acceptable.</div>
	</div>
	<div id="proportion_age_depressed_1994-container" class="demo-container">
	<svg id="proportion_age_depressed_1994"></svg>
	<div class="demo-description">Within this subset of 75, there was a higher incidence of depression in the 45-54 and 75+ age buckets proportional to the overall active population.</div>
	</div>
	<div id="proportion_income_depressed_1994-container" class="demo-container">
	<svg id="proportion_income_depressed_1994"></svg>
	<div class="demo-description">Within this subset of 75, those with lower incomes were also disproportionately depressed. These income brackets were created from figures reported in 1994.</div>
	</div>
	<div class="intro">
	<div class="intro-section">
	<h2>Bootstrapping</h2>
	<p>After the midterm, I spoke with Yoav about next steps. He introduced me to practice of "bootstrapping", telling me to:
	<ol>
	<li>calculate mean scores for relevant categories of survey questions for the 1994 sample for each wave leading up to Wave 3, </li>
	<li>calculate the deltas across waves for each category, </li>
	<li>repeat this process for 100 randomly selected samples from the overall population, and</li>
	<li>compare the results.</li>
	</ol>
	</p>
	<p>The survey questions seemed to be coded pretty consistently, with lower factor levels corresponding to "positive" responses and increasing to "negative" responses. However, the factor levels ranged from 2 to something like 48, so Yoav taught me how to convert them all to the same scale. As for the categories, I chose the following to look at:
	<ul>
	<li>Activities of Daily Life</li>
	<li>Paid Employment</li>
	<li>Reflections on One's Life</li>
	<li>Self-Description</li>
	<li>Activities of Daily Life</li>
	<li>Social Support</li>
	<li>Voluntary Activity</li>
	<li>Health and Limitation of Activities</li>
	<li>Life Events</li>
	<li>World Views and Religion</li>
	</ul>
	<!-- </p>
	<p>With all this prepped, it was time to write some code. Being a R newbie, I didn't know any fancy tricks, so my first stab looked like this:</p>
	<p>
	<img src="https://raw.githubusercontent.com/EDSP19/edsp2019project-xujenna/master/final_presentation/lol.png?token=ADFKLUROABMV2XYTD7HHA327IVA4Q" width="100%">
	</p>
	<p>
	Unsurprisingly, R didn't like this and chose to act erratically instead... so I took Kaushik up on his offer for R help. After sitting down with him for barely more than an hour, he made more progress than I did the entire semester. Guess which one of us went to art school?
	</p>
	<p>
	Basically, what he had helped me do was to calculate the mean scores for each category for the 1994 sample, from Wave 1-3, then organized it into a tidy data frame:
	</p>
	<p>
	<img src="https://raw.githubusercontent.com/EDSP19/edsp2019project-xujenna/master/final_presentation/kaushik.png?token=ADFKLUT72FUPX5CBA2KWKU27IVAZW" width= "100%">
	</p>
	<p>
	So after Kaushik bailed me out of the hell I made for myself, I functionalized what he'd done so that I could apply it 100 more random samples. Being sick and tired of my own ineffectiveness with R at this point, I exported the results to csv's for visualization below:
	</p> -->
	</div>
	</div>
	<div id="activities-container">
	<svg id="activities"></svg>
	<div class="questions">
	<ul>
	<h3>Activities of Daily Life</h3>
	<li>About how many times do you talk on the phone with friends, neighbors, or relatives?</li>
	<li>How often do you get together with friends, neighbors, or relatives and do things like go out together or visit in each other's homes?</li>
	<li>How often do you attend meetings or programs of groups, clubs, or organizations that you belong to?</li>
	<li>How often do you typically work in the garden or yard?</li>
	<li>How often do you engage in active sports or exercise?</li>
	<li>How often do you take walks?</li>
	</ul>
	</div>
	</div>
	<div id="employment-container">
	<svg id="employment"></svg>
	<div class="questions">
	<ul>
	<h3>Paid Employment</h3>
	<li>Are you self-employed, or do you work for a private employer, or a municipal, county, state, or federal government?</li>
	<li>Do you supervise others on your job?</li>
	<li>How much do you enjoy doing that work?</li>
	<li>How satisfied are you with your job?</li>
	<li>Aside from the money, are you yourself better off because of your work on this job?</li>
	<li>Are there other people who are better off because of your work on this job?</li>
	<li>In addition to your main job, do you have another regular job for which are you paid?</li>
	<li>How likely is it that during the next couple of years you will involuntarily lose your main job?</li>
	<li>How much do you agree? I have very little chance to decide how I do my work.</li>
	<li>How much do you agree? I get to do a variety of different things in my work.</li>
	<li>How much do you agree? I have a lot to say about what happen in my work.</li>
	<li>How much do you agree? I am bored with my work.</li>
	<li>How much do you agree? I am not appreciate for the work I do.</li>
	</ul>

	</div>
	</div>
	<div id="reflections-container">
	<svg id="reflections"></svg>
	<div class="questions">
	<ul>
	<h3>Reflections on One's Life</h3>
	<li>How satisfied are you with your life as a whole?</li>
	<li>How much do you agree? My life could be happier than it is now.</li>
	<li>How much do you agree? These are the best years of my life.</li>
	<li>How much do you agree? As I look back on my life I am fairly well satisfied.</li>
	<li>How much do you agree? I would not change my past life even if I could.</li>
	<li>How much do you agree? Life is not worth living if one cannot contribute to the well-being of other people.</li>
	<li>How much do you agree? I take a positive attitude toward myself.</li>
	<li>How much do you agree? At times I think I am no good at all.</li>
	<li>How much do you agree? All in all, I am inclined to feel that I am a failure.</li>
	<li>How much do you agree? I can do just about anything I really set my mind to do.</li>
	<li>How much do you agree? Sometimes I feel that I am being pushed around in life.</li>
	<li>How much do you agree? There is really no way I can solve the problems I have.</li>
	</ul>
	</div>
	</div>
	<div id="selfDescript-container">
	<svg id="selfDescript"></svg>
	<div class="questions">
	<ul>
	<h3>Self Description</h3>
	<li>During the past week, how often did you feel depressed?</li>
	<li>During the past week, how often did everything you did feel like an effort?</li>
	<li>During the past week, how often did you feel that there were people who really understood you?</li>
	<li>During the past week, how often was your sleep restless?</li>
	<li>During the past week, how often did you feel happy?</li>
	<li>During the past week, how often did you feel lonely?</li>
	<li>During the past week, how often did you feel that no one really knows you well?</li>
	<li>During the past week, how often did you enjoy life?</li>
	<li>Have you ever had a time in your life that lasted an entire week or more when you felt sad, blue or depressed most of the time, or when you lost all interest and pleasure in things you usually care about or enjoy?</li>
	<li>Are you a talkative person?</li>
	<li>Are you a worrier?</li>
	<li>Are you the type of person who plans for the future?</li>
	<li>Have you usually felt pretty sure your life would work out the way you want it to, or have there been times when you haven't been sure about it?</li>
	</ul>
	</div>
	</div>
	<div id="social-container">
	<svg id="social"></svg>
	<div class="questions">
	<ul>
	<h3>Social Support</h3>
	<li>Are you currently married, separated, divorced, widowed or have you never been married?</li>
	<li>How much does your partner make you feel loved and cared for?</li>
	<li>How much do you feel your partner makes too many demands on you?</li>
	<li>How much is your partner critical of you or what you do?</li>
	<li>How much do your children make you feel loved and cared for?</li>
	<li>At this point in your life, how satisfied are you with being a parent?</li>
	<li>How happy are you with the way your children have turn out to this point?</li>
	<li>During the past 12 months, how often did you have contact with your mother, by phone or mail?</li>
	<li>On the whole, how much do your friend and other relatives make you feel loved and cared for?</li>
	<li>How much are these friends and relatives willing to listen when you need to talk about your worries or problems?</li>
	<li>Is there anyone in your life with whom you can really share your very private feelings and concerns?</li>
	<li>How many of your close family or friends are close to each other in the same way?</li>
	</ul>
	</div>
	</div>
	<div id="volunteering-container">
	<svg id="volunteering"></svg>
	<div class="questions">
	<ul>
	<h3>Voluntary Activity</h3>
	<li>Did you do volunteer work in the last year for a church, synagogue or other religious organization?</li>
	<li>Did you do volunteer work in the last year for a political group or labor union in the last 12 months?</li>
	<li>About how many hours did you spend on volunteer work during the last 12 months?</li>
	<li>How much did you enjoy doing that volunteer work?</li>
	<li>How satisfied were you with the results of your volunteer work?</li>
	<li>Are you better off because of your volunteer work?</li>
	<li>Are there other people who are better off because of your volunteer work?</li>
	<li>Did you do any other things in the last 12 months to help neighbors, friends or relatives who did not live with you?</li>
	<li>Are you better off because of your help to friends, neighbors, and relatives?</li>
	<li>Would you have liked to do more of that kind of unpaid work?</li>
	</ul>
	</div>
	</div>
	</div>
	<div id="health-container">
	<svg id="health"></svg>
	<div class="questions">
	<ul>
	<h3>Health and Limitation of Activities</h3>
	<li>In general, how satisfied are you with your health?</li>
	<li>Do you wear a hearing aid?</li>
	<li>Are you currently in bed or in a chair for most or all of the day because of your health?</li>
	<li>Do you currently have any difficulty walking several blocks because of your health?</li>
	<li>Are you able to get to any place you want to go?</li>
	<li>How would you rate your health at the present time?</li>
	<li>How much are your daily activities limited in any way by your health or health-related problems?</li>
	<li>During the past 3 months have you seen somebody for a personal or mental problem?</li>
	<li>How often does someone remind you to do things while will help you stay healthy?</li>
	<li>Do you smoke cigarettes now?</li>
	</ul>
	</div>
	</div>
	<div id="life-container">
	<svg id="life"></svg>
	<div class="questions">
	<ul>
	<h3>Life Events</h3>
	<li>Have you ever been the victim of a serious physical attack or assualt at any time in your life?</li>
	<li>Did you have any serious illness or accidental injury that occurred or got worse in the last three years?</li>
	<li>Have you moved to a new residence during the past three years?</li>
	<li>In the last three years, have you involuntarily lost a job for reasons other than retirement?</li>
	<li>In the last three years, were you robbed or was your home burglarized?</li>
	<li>Are you currently involved in helping someone like this by caring for them directly or arranging for their care by others?</li>
	</ul>
	</div>
	</div>
	<div id="views_religion-container">
	<svg id="views_religion"></svg>
	<div class="questions">
	<ul>
	<h3>World Views and Religion</h3>
	The higher the score, the less religious/spiritual.
	<li>How much do you agree? When bad things happen, we are not supposed to know why. We are just supposed to accept them.</li>
	<li>How much do you agree? People die when it is their time to die, and nothing can change that.</li>
	<li>How much do you agree? Everything that happens is a part of God's plan.</li>
	<li>How much do you agree? By and large, people deserve what they get.</li>
	<li>How much do you agree? In the long run good people will be rewarded for the good things they have done.</li>
	<li>How much do you agree? Because I worked hard and sacrificed in the past, I am entitled to good things in my future.</li>
	<li>In general, how important are religious or spiritual beliefs in your day-to-day life?</li>
	<li>When you have problems or difficulties in your work, family or personal life, how often do you seek spiritual comfort and support?</li>
	<li>Some people believe that people simply stop existing after death while others believe in an afterlife. Which comes closest to what you believe?</li>
	</ul>
	</div>
	</div>
	</body>
	</html>
	async function getData() {
	let activities = await d3.csv("activities.csv")
	let employment = await d3.csv("employment.csv")
	let reflections = await d3.csv("reflections.csv")
	let selfDescript = await d3.csv("self_description.csv")
	let social = await d3.csv("social.csv")
	let life = await d3.csv("life.csv")
	let views_religion = await d3.csv("views_religion.csv")
	let health = await d3.csv("health.csv")
	let volunteering = await d3.csv("volunteering.csv")
	let demographics = await d3.json("demographics.json")

	return { activities, employment, reflections, selfDescript, social, life, views_religion, health, volunteering, demographics }
	}

	getData().then(function(data){
	console.log(data)
	let margin = {top:60, right:40, bottom:60, left: 40};
	let bootstrapWidth = 350
	let bootstrapeHeight = 650

	let xScale = d3.scaleLinear()
	.domain([1,3])
	.range([margin.left, bootstrapWidth])
	.nice()

	let yScale = d3.scaleLinear()
	.domain([0,7]) // filter after March 22
	.range([bootstrapeHeight - margin.bottom, margin.top])

	let xTicks = d3.axisBottom(xScale)
	// .ticks(3)
	.tickValues([1,2,3])
	.tickPadding(10)
	.tickFormat(d => {
	if(d == 1){
	return "1986"
	}
	else if (d==2){
	return "1989"
	}
	else{
	return "1994"
	}
	})
	.tickSize(-(bootstrapeHeight-margin.top-margin.bottom))

	let yTicks = d3.axisLeft(yScale)
	.tickSize(-(bootstrapWidth-margin.right))
	.ticks(7)
	// .tickSizeOuter(0)
	.tickPadding(10)

	let xAxis = g => g
	.attr("transform", "translate(0,"+(bootstrapeHeight-margin.bottom)+")") // move x axis to bottom of chart
	.call(xTicks)
	.call(g => g.select(".domain").remove()) // removes y axis line
	.call(g => g.attr("class", "xAxis")); // gives class of .xAxis

	// assemble y axis
	let yAxis = g => g
	.attr("transform", "translate("+margin.left+",0)") // enforces left margin
	.call(yTicks)
	.call(g => g.select(".domain").remove()) // removes y axis line
	.call(g => g.selectAll(".tick:first-of-type text").remove())
	.call(g => g.select(".tick:first-of-type line").remove()) // removes first y axis tick
	.call(g => g.select(".tick:last-of-type line").remove()) // removes first y axis tick

	.call(g => g.attr("class", "yAxis")); // gives class .yAxis

	const line = d3.line()
	.x(d => xScale(parseInt(Object.keys(d)[0])))
	.y(d => yScale(parseFloat(d[Object.keys(d)[0]])))

	let categories = Object.keys(data)
	categories.pop()
	console.log(categories)

	categories.forEach(category => {
	let chartSVG = d3.select("#"+category)
	.attr("height", 650 + margin.top + margin.bottom + "px")
	.attr("width", 350 + margin.right + margin.left + "px")

	chartSVG.append("g")
	.call(xAxis);

	chartSVG.append("g")
	.call(yAxis);

	chartSVG.append("text")
	.text(category)
	.attr("y", 30)
	.attr("x", (bootstrapWidth+margin.right)/2)
	.attr("class", "chart-title")

	for(var i = 0; i <= 100; i++){
	let sampleName
	if(i == 0){
	sampleName = "sample1994_avgs"
	}
	else{
	sampleName = "sample_avg_" + i
	}

	let currentSampleData = []
	data[category].forEach((wave,i) => {
	let waveData = {}
	waveData[i+1] = +wave[sampleName]
	currentSampleData.push(waveData)
	})

	chartSVG.append("path")
	.datum(currentSampleData)
	.attr("class", function(){
	if(sampleName == "sample1994_avgs"){
	return "sample1994Line";
	}
	else{
	return "line";
	}
	})
	.attr("d", line)
	}
	})

	let sample1994Lines = d3.selectAll(".sample1994Line").nodes()
	sample1994Lines.forEach(line =>{
	line.parentElement.appendChild(line)
	})

	let demoKeys = Object.keys(data.demographics)

	let waveToYear = {
	"wave_1": "1986",
	"wave_2": "1989",
	"wave_3": "1994",
	"wave_4": "2002",
	"wave_5": "2011"
	}

	demoKeys.forEach(category => {
	let currentData = data["demographics"][category]
	let width = 600
	let height = 400
	let chartSVG = d3.select("#"+category)
	.attr("height", height + margin.top + margin.bottom + "px")
	.attr("width", width + margin.right + margin.left + "px")

	let xLabels = Object.keys(currentData)

	let yScale = d3.scaleLinear()
	.domain([0,d3.max(Object.values(currentData))])
	.range([height - margin.bottom, margin.top])

	let yTicks = d3.axisLeft(yScale)
	.tickSize(-(width-margin.right))
	.tickPadding(10)
	.ticks(4)

	// assemble y axis
	let yAxis = g => g
	.attr("transform", "translate("+margin.left+",0)") // enforces left margin
	.call(yTicks)
	.call(g => g.select(".domain").remove()) // removes y axis line
	.call(g => g.select(".tick:first-of-type text").remove()) // removes first y axis tick
	.call(g => g.attr("class", "yAxis")); // gives class .yAxis

	chartSVG.append("g")
	.call(yAxis);

	chartSVG.append("text")
	.text(category.replace(/_/g, " "))
	.attr("y", 30)
	.attr("x", (width+margin.right)/2)
	.attr("class", "chart-title")



	if(xLabels[0].includes("wave")){
	let xScale = d3.scalePoint()
	.domain(Object.values(waveToYear))
	.range([margin.left, width])
	let xTicks = d3.axisBottom(xScale)
	.ticks(xLabels.length)
	.tickPadding(10)
	.tickSize(-(height-margin.top-margin.bottom))

	let xAxis = g => g
	.attr("transform", "translate(0,"+(height-margin.bottom)+")") // move x axis to bottom of chart
	.call(xTicks)
	.call(g => g.select(".domain").remove()) // removes y axis line
	.call(g => g.attr("class", "xAxis")); // gives class of .xAxis

	chartSVG.append("g")
	.call(xAxis);

	let newData = []
	xLabels.forEach(key => {
	let wave = {}
	wave["wave"] = waveToYear[key]
	wave["val"] = currentData[key]
	newData.push(wave)
	})
	console.log(newData)
	const line = d3.line()
	.x(d => xScale(d.wave))
	.y(d => yScale(d.val))

	chartSVG.append("path")
	.datum(newData)
	.attr("class", "demo-line")
	.attr("d", line)

	if(category == "first_reported_depression"){
	chartSVG.append("circle")
	.attr("cx", xScale("1994"))
	.attr("cy", yScale(75))
	.attr("fill", "black")
	.attr("r", 4)
	chartSVG.append("text")
	.text("↓")
	.attr("fill", "red")
	.attr("font-size", 28)
	.attr("text-anchor", "middle")
	.attr("x", xScale("1994"))
	.attr("y", yScale(90))
	chartSVG.append("text")
	.text("This is our sample")
	.attr("fill", "red")
	.attr("font-size", 13)
	.attr("font-weight", "bold")
	.attr("text-anchor", "middle")
	.attr("x", xScale("1994"))
	.attr("y", yScale(110))
	}
	}
	else{
	let xScale = d3.scaleBand()
	.domain(xLabels)
	.rangeRound([margin.left, width])
	.padding(0.1)
	let xTicks = d3.axisBottom(xScale)
	.ticks(xLabels.length)
	.tickPadding(10)
	.tickSize(-(height-margin.top-margin.bottom))

	let xAxis = g => g
	.attr("transform", "translate(0,"+(height-margin.bottom)+")") // move x axis to bottom of chart
	.call(xTicks)
	.call(g => g.select(".domain").remove()) // removes y axis line
	.call(g => g.attr("class", "xAxis")); // gives class of .xAxis

	chartSVG.append("g")
	.call(xAxis);

	let newData = []
	xLabels.forEach(key => {
	let wave = {}
	wave["key"] = key
	wave["val"] = currentData[key]
	newData.push(wave)
	})

	chartSVG.selectAll(".bar")
	.data(newData)
	.enter()
	.append("rect")
	.attr("x", d => xScale(d.key))
	.attr("y", d => yScale(d.val))
	.attr("height", d => height - margin.top - yScale(d.val))
	.attr("width", xScale.bandwidth())
	.attr("class", "bar")
	}

	// d3.select(".xAxis").parentElement.insertBefore(xAxis,d3.select(".xAxis").parentElement.firstChild)
	})
	})