interactive-vis-course/Week12/scroller_template_lines2.html at gh-pages · arnicas/interactive-vis-course · 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
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
  <title>Scrolling Sections</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="css/line.css" />

<style>

body {
  margin: 20px;
}

.container {
  width: 890px;
}

#graphic {
  padding-top: 60px;
}

p {
  padding: 20px;
}

#sections {
  position: relative;
  display: inline-block;
  width: 250px;
  top: 0px;
  z-index: 90;
  padding-bottom: 20px;
}


.step {
  margin-bottom: 200px;
  font-family: "TiemposTextWeb-Regular","Georgia";
  font-size: 16px;
  line-height: 23px;
  color: #767678;
}

#sections .title {
  font-family: Arial,Helvetica,"san-serif";
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 2px;
  color: #262626;
  line-height: 1.2em;
}

#extra-space {
  height: 300px;
}

#vis {
  display: none;
  position: fixed;
  top: 60px;
  z-index: 1;
  margin-left: 0;
  font-size: 10px;
}

#page_header {
  position: relative;
  margin: 20px;
  z-index: 2;
  width: 600px;
}


</style>
</head>
<body>

  <h1> A page title</h1>

  <p>A bunch of hipster text Franzen typewriter 90's, hella pickled pitchfork pinterest. Authentic wolf cronut narwhal drinking vinegar, post-ironic bushwick roof party kogi blue bottle church-key. Swag ramps mustache normcore four loko, pinterest lomo XOXO hashtag fashion axe disrupt schlitz. Skateboard aesthetic bespoke, shoreditch artisan franzen migas locavore wolf heirloom raw denim hammock master cleanse butcher chia. Umami mumblecore put a bird on it bespoke. Cornhole dreamcatcher mlkshk four loko mustache, twee master cleanse disrupt ethical vinyl. Williamsburg wolf mustache, small batch lo-fi readymade synth actually church-key brunch umami pabst.</p>

  <div id="page_header">
    <h2> Starting Info or pic here maybe</h2>
  </div>

<div class="container">
  <div id="graphic">
    <div id="sections">
      <section class="step">
        <div class="title">Scroll down to look at some data.</div>
        (You could also have no title or text in case 0 at all.)
      </section>
      <section class="step">
        <!-- case 1 -->
        <div class="title">This is all the lines</div>
        This is case 1 now, all the countries shown.
      </section>
      <section class="step">
        <!-- case 2 -->
        <div class="title">Look at Nigeria for Some Reason</div>
          Something interesting to highlight, label, color.
      </section>
      <section class="step">
        <!-- case 3 -->
        <div class="title">And here's Bosnia and Herzegovina</div>
        It doesn't seem to have as much data.
      </section>
      <section class="step">
        <!-- case 4-->
        <div class="title">These are Disasters</div>
        Here are Rwanda and Haiti. One is genocide, one is a natural disaster. Guess which is which?
      </section>
    </div>
    <div id="vis">
    </div>
  </div>
</div>

<div id="page_header">
    <h2>Some more stuff here?</h2>
</div>

<div id="extra-space"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="js/mfreeman_scroller.js"></script>
<script src="js/line_chart_refactor.js"></script>
<script src="js/scroller_settings2.js"></script>
</body>
</html>