diversity/index.html at master · vpascal/diversity · 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
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="dist/js/percircle.js"></script>
    <script type="text/javascript" src="countUp.js"></script>
    <link rel="stylesheet" href="dist/css/percircle.css">


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
        integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <style>
        @page {
            size: auto;
        }
    </style>
</head>

<body>

    <div class='container-fluid'>
        <header class="w3-display-container w3-content" style="max-width:1500px;" id="home">

            <div class='w3-wide w3-center'>
                <h1 class="text-center">Diversity: Faculty and Staff </h1>
                <img src="tree.png" class="center responsive" style="width:7%;">
            </div>
            <div id='commitment' class='w3-center w3-large'>
                <p>
                    The Patton College community fosters a sense of respect and inclusion. Through educational
                    experiences and the climate in our college, we promote increased awareness, acceptance, knowledge,
                    and understanding of all facets of human diversity. We are committed to the recruitment, retention,
                    and success of students, staff, and faculty who are representative of our increasingly diverse
                    global community. Our goal is to prepare leader-educators, practitioners, and human service
                    professionals to serve society responsibly as change agents in meeting diverse human and social
                    needs.
                </p>
            </div>
        </header>


        <div clas='row'>
            <div class='w3-center buttons' id='buttonnav'>
                <p>Click &#x2193</p>
                <button class="mybutton" id='faculty' type="button">&nbsp;&nbsp;&nbsp;Faculty</button>
                <button class="mybutton" id='staff' type="button">&nbsp;&nbsp;&nbsp;Staff</button>
                <button class="mybutton" id='both' type="button"> &nbsp;&nbsp;&nbsp;&nbsp;Both</button>
            </div>
        </div>

        <div class='row row-grid'>

            <div class='col-xs-12 col-sm-6 col-lg-5 zoom' id='people'>
                <div>
                    <h3 class="text-center">Gender <i class="fas fa-transgender"></i></h3>
                </div>
                <table class="tg">
                    <col style="width:30%">
                    <col style="width:30%">
                    <col style="width:40%">
                    <tr>
                        <th></th>
                        <th><img src='women.svg' </th>
                        <th><img src='men.svg'></th>
                    </tr>
                    <tr>
                        <td class="name">PCOE</td>
                        <td class="female" id='pcoe_female' align="center">62.3%</td>
                        <td class=" male" id='pcoe_male' align="center">35.7%</td>
                    </tr>
                    <tr>
                        <td class="name">OHIO</td>
                        <td class="female" id='ou_female' align="center">50.2%</td>
                        <td class="male" id='ou_male' align="center">49.8%</td>
                    </tr>
                </table>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-4 zoom" id='mytable'>
                <div>
                    <h3 class="text-center">Race & Ethnicity <i class="fas fa-globe"></i></h3>
                </div>

            </div>
            <div class='col-xs-12 col-sm-6 col-lg-3 zoom' id='charts'>
                <div>
                    <h3 class="text-center">% Non-White <i class="fas fa-users"></i></h3>
                </div>
                <div id="patton" class="medium"></div>
                <img id='pulsating' src="circle.svg" alt=" " height='25'>
                <h6 id='pcoe'>PCOE</h6>
                <div id="ou" class="medium "></div>
                <h6 id='ou_circle'>OHIO</h6>
            </div>
        </div>
        <div id='linechart' class='w3-center'>
        </div>

        <div class='w3-center'>
            <p style=" font-size: x-small;"> Data Source: Ohio University Office of Institutional Research, Fall 2019
            </p>
        </div>
    </div>
    <script type="text/javascript " src="script.js"></script>


</body>

</html>