ustimeuse.github.io/differences.html at master · ustimeuse/ustimeuse.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
---
permalink: /differences.html
title: Group Differences
---
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Landing Page - Start Bootstrap Theme</title>

  <!-- Bootstrap Core CSS -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="css/landing-page.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" type="text/css" href="css/style1.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
{% include header.html %}
{% include intro-header.html %}
<div class="container">

  <div class="row">

    <div id="donut" class="col-md-12">
      <h2 class="tag">Insights & Observations</h2>
      <ul>
        {% for sentence in site.data.story %}
        <li class="descriptions"><span class="mainpoint">{{ sentence.tag }} </span>
          {{ sentence.insight }}
        </li>
        {% endfor %}
      </ul>
      <hr class="section-heading-spacer">
      <div class="clearfix"></div>
      <form>
          <a class="active customselect" onchange="updatePath()" href="#gender" checked> Gender</a></li>
          <a class="customselect" onchange="updatePath()" href="#race"> Race</a></li>
          <a class="customselect" onchange="updatePath()" href="#income"> Income</a></li>
          <a class="customselect" onchange="updatePath()" href="#employment"> Employment</a></li>
      </form>
      <div class="help-tip">
        <p>The donut graph shows the distribution of different demographic characteristics (gender, family
        income, employment status, and race) within our dataset. Our data set consists of 4085 observations.
        We took out any observaton with NIU values for the relevant variables we would like to look at, including
        employment status, school enrollment, family income, race, and gender.
        The parallel coordinates allow user to view differences in the average amount of time that different
        demographic groups spend on various categories of time use. For instance, user can view and compare
        the average amount of work time, leisure, household activities between female and male, ammong different
        races, across different family incomes, etc.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div id="show_data"></div>
      <div id="updateInfo"></div>
    </div>
    <div class="col-md-8">
      <div id="parallel-coordinates"></div>
    </div>
  </div>
</div>

<!-- Footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <ul class="list-inline">
          <li>
            <a href="index.html#time_management">Motivation</a>
          </li>
          <li>
            <a href="index.html#objectives">Goals</a>
          </li>
          <li>
            <a href="index.html#data">Data</a>
          </li>

          <!--<li>-->
          <!--<a href="#insights">Insights</a>-->
          <!--</li>-->
          <li>
            <a href="index.html#our_team">Team</a>
          </li>
          <!--<li>-->
          <!--<a href="#references">References</a>-->
          <!--</li>-->
        </ul>
        <p class="copyright text-muted small">Team Triple Treat @ 2016</p>
      </div>
    </div>
  </div>
</footer>
<script src="js/jquery.js"></script>
<script src="js/queue.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/topojson.js"></script>
<script src="js/d3.min.js"></script>
<script src="js/d3.tip.js"></script>
<script src="js/colorbrewer.js"></script>
<script src="js/donut1.js"></script>
<script src="js/tab.js"></script>
<script src="js/parallelCoordinates.js"></script>
</body>