-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
executable file
·199 lines (171 loc) · 12 KB
/
index.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BREVE See your data tables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/prefixfree.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="content container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#featured"><h1><img width="400" src="images/breve_logo.svg"></h1></a>
</div><!-- navbar-header -->
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#featured"><i class="fa fa-circle-thin"></i></a></li>
<li><a href="#why">Why Breve?</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#try">Try It</a></li>
<li><a href="#team">The Team</a></li>
</ul>
</div><!-- collapse navbar-collapse -->
</div><!-- container -->
</nav>
<div class="carousel fade" data-ride="carousel" id="featured">
<ol class="carousel-indicators">
</ol>
<div class="carousel-inner fullheight">
<div class="item"><img src="images/1mapgaps_errors.png" alt="Map gaps and mis-matched values"></div>
<div class="item"><img src="images/2datatypescolumn.png" alt="Identify Data Types"></div>
<div class="item"><img src="images/3mapdatatypes.png" alt="Map by Data Types"></div>
<div class="item"><img src="images/4editrecord.png" alt="Edit a record"></div>
<div class="item"><img src="images/5sort.png" alt="Sort by Data Types"></div>
</div><!-- carousel-inner -->
<a class="left carousel-control" href="#featured" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#featured" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- featured carousel -->
</header>
<div class="main">
<div class="page" id="why">
<div class="content container">
<h2>Why Breve?</h2>
<div class="row">
<p class="col-md-5 col-md-offset-1">We designed Breve for researchers who have to work with very incomplete and messy data. Historical data is often full of inconsistencies and errors that can be difficult to see when scrolling through a spreadsheet. We were inspired by Victor Powell's <a href="http://t.co/339TNaGrch">CSV fingerprint</a> which he describes as a "birdseye view of the file without too much distracting detail". Breve gives you that meta view of tabular data and also lets you drill down to records and columns, and edit values.</p>
<p class="col-md-5">At the beginning of a research project and at points along the way, it is helpful to be able to see what you have to work with — all at once—. Ben Fry's <cite>Preservation of Favoured Traces</cite> originally built in Processing (<a href="http://fathom.info/latest/12705">and now available in print!</a>) elegantly reveals deletions and additions in the seven editions of Darwin's <cite>On the Origin of Species</cite>. Since humanities data is significantly shaped and enriched during the research process, we wanted to make the evolution of a constructed data set clearly visible to the author.</p>
</div><!-- row -->
</div><!-- content container -->
</div><!-- Why page -->
<div class="page" id="features">
<div class="content container">
<h2>Features</h2>
<div class="row">
<article class="how col-md-4 col-sm-6 col-xs-12">
<h3>Map Errors and gaps</h3>
<p>The default view is a very simple gray, white and, if there are errors, red. An error in Breve is simply a mis-matched value. The application guesses the data type (date, text string, number, url, etc.) when you upload the data. If you have a series of numeric values with a few alpha characters, Breve will flag those values with alpha characters in red as "mismatched".</p>
</article>
<article class="how col-md-4 col-sm-6 col-xs-12">
<h3>Edit records and save</h3>
<p>With Breve you can easily review records and edit values. Click on any cell in the table map to open a record. Use your keyboard arrow keys to move through the records. Use the Escape key to enter the 'Edit Record' mode. If you do make any changes to the values, those will be stored locally in your browser. When you download the csv, it will reflect those changes.</p>
</article>
<article class="how col-md-4 col-sm-6 col-xs-12">
<h3>Map by data type</h3>
<p>The first column to the right of your column names gives the number of values in that column and a color that corresponds to a data type. Mouse over the color to see the data type label. If you have a binary data type, Breve will distinctly identify the two values by color. Also, the blue of the "date" data type varies from light to dark according to the specificity of the date.</p>
</article>
<article class="how col-md-4 col-sm-6 col-xs-12">
<h3>Edit dimensions</h3>
<p>If Breve guessed wrong about a data-type, you can edit it by clicking on the column label. Within the 'Edit Dimension' view you can also sort values by count or in alpha-numeric order. If fields in a column include multiple values, you can specify the delimiter and review the individual values.</p>
</article>
<article class="how col-md-4 col-sm-6 col-xs-12">
<h3>Sort by data type</h3>
<p>The third view is a column sort by data type. The 'Edit Record' feature is not available in this view because the values are reordered to make it easy to see at a glance the relative number of missing values and data types per column.</p>
</article>
<article class="how col-md-4 col-sm-6 col-xs-12">
<h3>Assign a source type</h3>
<p>The 'Edit dimensions' window includes the option to assign one of five source types: 1. Generated automatically, like and index value; 2. Data authored/created by the researcher; 3. Curated or edited source data; and 4. Untouched source data. Assigning a source type will put a marker in front of the column label.
</article>
</div>
</div>
</div><!-- end page How -->
<div class="page" id="try">
<div class="container">
<h2 id="download">Try it!</h2>
<p>Breve is available as a desktop app for Mac and as a web app. However you choose to use it, your data remain local to your computer. If using the web app, the data you upload will be processed only by the web browser. We do not store your data server-side.</p>
<div class="row download">
<div class="col-md-3 col-md-offset-4"><a class="btn btn-default" href="http://hdlab.stanford.edu/breve/files/breve.app.zip" role="button">Download .zip</a></div>
<div class="col-md-3"><a class="btn btn-default" href="http://hdlab.stanford.edu/breve/platforms/browser/www/" role="button">Browser version</a></div>
</div><!-- outer row -->
</div><!-- container -->
</div><!-- project page -->
<div class="page" id="team">
<div class="container">
<h2 id="team">The Team</h2>
<div class="row">
<p>Breve is being developed under the <a href="http://hdlab.stanford.edu">Networks in History project</a>, funded by a grant from the <a href="http://www.neh.gov/divisions/odh/about">Office of Digital Humanities</a> at the National Endowment for the Humanities. A large community of humanities researchers has contributed to the design of Breve and our other data visualization tool, <a href="http://palladio.designhumanities.org">Palladio</a>. (Breve will be incorporated into Palladio in the next release.)</p>
<p>Community participation makes these tools possible. We are particularly grateful to colleagues at Stanford's <a href="http://cesta.stanford.edu">Center for Spatial and Textual Analysis</a>, where Humanities + Design resides, and colleagues at the Stanford University Library's <a href="http://cidr.stanford.edu">Center for Interdisciplinary Digital Research</a>.</p><p>Please contact us via <a href="mailto:apps@designhumanities.org">email</a> or <a href="http://twitter.com/home/?status=@hdstanford%20%23breve%20">twitter</a> with your questions and suggestions for making Breve a useful tool for research and peer review.
<div class="person col-lg-4">
<div class="row">
<div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0">
<img class="img-circle" src="https://classics.stanford.edu/sites/default/files/ceserani.png" alt="Photo of Giovanna Ceserani">
</div><!-- photo -->
<div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8">
<h3>Giovanna Ceserani</h3>
<p>Faculty Director,<br />Humanities + Design</p>
</div><!-- info -->
</div> <!-- inner row -->
</div> <!-- person -->
<div class="person col-lg-4">
<div class="row">
<div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0">
<img class="img-circle" src="https://pbs.twimg.com/profile_images/2573500348/xlb8oyj7szhzdio6c7o8.jpeg" alt="Photo of Ethan Jewett">
</div><!-- photo -->
<div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8">
<h3>Ethan Jewett</h3>
<p>Lead Developer</p>
</div><!-- info -->
</div> <!-- inner row -->
</div> <!-- person -->
<div class="person col-lg-4">
<div class="row">
<div class="photo col-xs-6 col-xs-offset-3 col-sm-3 col-sm-offset-1 col-md-2 col-md-offset-2 col-lg-4 col-lg-offset-0">
<img class="img-circle" src="https://avatars0.githubusercontent.com/u/288005?v=3&s=460" alt="Photo of Nicole Coleman">
</div><!-- photo -->
<div class="info col-xs-8 col-xs-offset-2 col-sm-7 col-sm-offset-0 col-md-6 col-lg-8">
<h3>Nicole Coleman</h3>
<p>Research Director,<br />Humanities + Design, Designer</p>
</div><!-- info -->
</div> <!-- inner row -->
</div> <!-- person -->
</div><!-- outer row -->
</div><!-- container -->
</div><!-- team page -->
<footer>
<div class="content container-fluid">
<div class="row">
<div class="col-md-3 col-md-offset-1">
<div><img width="120" src="images/SUSig_White.png" /></div>
</div><!-- col-md-3 -->
<div class="col-md-3">
<div id="funding"><img width="200" src="images/neh_logo_rev.png" /></div>
</div><!-- col-md-3 -->
<div class="col-md-3">
<nav class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li><a href="http://twitter.com/home/?status=@hdstanford%20%23breve%20"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://github.com/humanitiesplusdesign/breve"><i class="fa fa-github"></i></a></li>
</ul>
</nav>
</div><!-- col-md-3 -->
</div><!-- row -->
</div><!-- content container -->
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="js/breveweb.js"></script>
</body>
</html>