-
Notifications
You must be signed in to change notification settings - Fork 2
/
about.html
112 lines (90 loc) · 5.23 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="custom.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>About Collection View</title>
<style>
img {
padding: 1em;
width: 50%;
float: right;
}
</style>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="container">
<div id="topbanner" class="jumbotron">
<h1>About Collection View</h1>
<a id="about" class="badge badge-pill badge-light" href="index.html">Home</a>
</div>
<div class="row">
<div class="col-sm-7 col-md-7 col-lg-7 aboutleft">
<div class="card mb-3">
<div class="card-body">
<h2>Why Collection View?</h2>
<p>Collection View is in part an extension of my work on <a href="https://searchworkbench.info/">
Search Workbench</a>. Just as that project enables one to visualize PubMed results, Collection View
allows you to visualize your
Library of Congress searches so that you can get a better sense of what they are doing.
Importantly, you can also directly <em>compare</em> searches to one another —
facilitating the process of fine-tuning a search strategy.</p>
<h2>How it works</h2>
<p>Collection View <em>summarizes</em> your search results by plotting them on a couple of different
data visualizations. In the first, raw numbers for each format are visualized as a stacked bar graph.
In the second, searches using <a href="https://www.youtube.com/watch?v=bCAULDuMcso">Boolean logic</a> are
visualized using a Venn diagram. This view is also available when you're comparing multiple searches.
Finally, the <em>proportions</em> of items in your search for each format and each century are compared
to the baselines for the collection as a whole.</p>
<p>For more details, check out my talk at <a href="https://2021.code4lib.org/talks/Looking-Beyond-the-List-Enhancing-Search-with-Interactive-Visualizations">Code4Lib 2021</a>. Slides at
<a href="https://osf.io/acm3q/">osf.io</a>. Video on <a href="https://www.youtube.com/watch?v=QC_R2IkYzao">YouTube</a>.</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h3>Technologies</h3>
<p>Collection View is put together with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> and <a href="http://jquery.com/">jQuery</a>. Search results are fetched with the Library of Congress's <a href="https://www.loc.gov/apis/">
API</a>. </p>
<p><a href="https://developers.google.com/chart/interactive/docs/gallery/linechart">Google Charts</a> is used to draw the line charts, and Ben Fredrickson's <a href="https://github.com/benfred/venn.js/tree/master">venn.js</a> overlay of Mike Bostock's <a href="https://d3js.org/">d3.js</a>
performs the set visualization. Responsive layout is made easier with <a href="http://getbootstrap.com/">Bootstrap</a>.</p>
<p>You can find the source code for this application at <a href="https://github.com/esperr/collection-view">GitHub</a>.</p>
</div>
</div>
</div>
<div class="col-sm-5 col-md-5 col-lg-5">
<div class="card mb-3">
<div class="card-body">
<h3>Contact</h3>
<p>PubMed by Year is a project of <a href="https://esperr.github.io/about/">Ed Sperr, M.L.I.S.</a></p>
<p>Ed can be reached at <a href="mailto:ed_sperr@hotmail.com">ed_sperr@hotmail.com</a> or <a href="mailto:esperr@uga.edu">esperr@uga.edu</a>. Please feel free to reach out with any comments or enhancement requests!</p>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h3>License</h3>
<p>Copyright 2021, Ed Sperr. This software is provided under the terms of the <a href="https://opensource.org/licenses/MIT">MIT License</a>. Feel free to borrow/adapt <a href="https://github.com/esperr/search-workbench">the source code</a> as you wish, but be aware that things strictly adhere
to the XKCD <a href="https://xkcd.com/1513/">Code</a> <a href="https://xkcd.com/1695/">Quality</a> <a href="https://xkcd.com/1833/">Guidelines</a>.</p>
<p>Please note that the information provided here comes ultimately from the <a href="https://www.loc.gov/">Library of Congress</a> and is subject to use according to their
<a href="https://www.loc.gov/legal/">Legal terms and policies</a>.</p>
<p>Feel free to use this tool as you wish, but if you use Collection View for publication, I'd appreciate a citation:
</p><blockquote>
Sperr E. Collection View [Internet]. 2021 [cited <em>your_date_here</em>]. Available from https://esperr.github.io/collection-view/
</blockquote>
</div>
</div>
<div class="card mb-5">
<div class="card-body">
<h2>See also...</h2>
<p>Curious about how these techniques can be used for other databases? Check out the PubVenn,
PubMed by Year and other cool tools at <a href="https://esperr.github.io/visualizingpubmed/">
Visualizing PubMed</a>.</p>
</div>
</div>
</div>
</div>
</div>
</body>