D3-Research-Visualization/index.html at main · annayao0602/D3-Research-Visualization · 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
<!DOCTYPE html>
<html>

<meta charset="utf-8">
<head>
    <title>D3 Research Visualization</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link href='https://fonts.googleapis.com/css?family=Jura' rel='stylesheet'>


    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="circos/circos.js"></script>

</head>

<body>
  <header class="page-header">
    <div class ="header-title">
      <div class = "dropdown">
          <img src = "images/dropdown_icon.png" alt = "blue icon" width = 40 height = 40>
        <div class = "dropdown-content">
            <a id = "home" href = "index.html"> Home</a>
            <a id = "about" href = "about.html"> About</a>
        </div>
      </div>
      <div class = "title">
        <h1>A Closer Look At Research</h1>
      </div>
    </div>

  </header>
  <div class = "about">
    <p>This project aims to visualize research at R1 institutes such as UVA in a creative manner. Click “Expand” on any of the visualizations to learn more.</p>
  </div>

<main class= "dashboard-container">

    <div id = "box-helios" class="card">
      <div class = "viz_header">
        <h3>Coauthorship Network</h3>
      </div>
      <a href="helios/helios_main.html">
        <div id = "button">
          <img src = "images/button1.png" width = 65 height = 35>
        </div>
      </a>
      <iframe src="helios/helios_home.html" style="border:none;" height="400" width="500" title="Iframe Example"></iframe>
    </div>

    <div id = "box-circos" class="card">
      <div class = "viz_header">
        <h3>Number of Publications</h3>
      </div>
      <a href="circos/circos_page.html">
        <div id = "button">
          <img src = "images/button1.png" width = 65 height = 35>
        </div>
      </a>
      <div id = "my_dataviz">
        <script src="circos/main_circos.js"></script>
      </div>
    </div>

  <div id="box-bar" class="card">
    <h3>Publications by Domain</h3>
    <div id = "barchart">
      <script src = "barchart/bar.js"></script>
    </div>
    <!--
    <a href="circos/circos_page.html">
      <div id = "button">
        <img src = "images/button1.png" width = 65 height = 35>
      </div>
    </a>
    -->
  </div>


</main>

</body>
</html>