Mercurial > repos > other > exif-graphr

annotate index.html @ 5:457823710044

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Start to add beeswarm timeline of photos
author IBBoard <dev@ibboard.co.uk>
date Mon, 29 May 2017 16:08:09 +0100
parents 42c058ce5b7c
children a42497c3964c
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
2 <html xmlns="http://www.w3.org/1999/xhtml">
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
3 <head>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
4 <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
5 <title>Exif Graphr for Flickr</title>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
6 <script type="text/javascript" src="./d3.js"></script>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
7 <!-- Uncomment the following line for "production" use -->
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
8 <!--<script type="text/javascript" src="./d3.min.js"></script>-->
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
9 <script type="text/javascript" src="./d3.tip.js"></script>
5
457823710044 Start to add beeswarm timeline of photos
IBBoard <dev@ibboard.co.uk>
parents: 0
diff changeset
10 <script type="text/javascript" src="./d3.beeswarm.js"></script>
0
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
11 <style type="text/css">
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
12 .axis path,
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
13 .axis line {
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
14 fill: none;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
15 stroke: black;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
16 shape-rendering: crispEdges;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
17 }
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
18
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
19 .axis text {
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
20 font-family: sans-serif;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
21 font-size: 11px;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
22 }
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
23
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
24 .d3-tip {
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
25 background-color: rgba(51, 51, 51, 0.9);
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
26 border-radius: 5px;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
27 border: 1px solid #000;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
28 color: #f0f0f0;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
29 font-size: 80%;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
30 padding: 0.5em;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
31 max-width: 25em;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
32 }
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
33 .d3-tip:after {
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
34 display: block;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
35 content: " ";
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
36 position: absolute;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
37 top: 100%;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
38 left: 50%;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
39 margin-left: -5px;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
40 border: 5px solid transparent;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
41 border-width: 10px 5px 0 5px;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
42 border-top-color: #000;
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
43 }
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
44 table { border-collapse: collapse; width: 100% }
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
45 td, th { border: 1px solid #aaa }
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
46 th { background-color: #ddd }
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
47 </style>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
48 </head>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
49 <body>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
50 <h1>Exif Graphr</h1>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
51 <p>This page will graph the EXIF data (details about the photo) from public Flickr accounts. Hover over a dot or look in the table for more details about a picture.</p>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
52 <p>In the graph:</p>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
53 <ul><li>Horizontal position is shutter speed (left = quick shutter, right = slow shutter)</li>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
54 <li>Vertical position is focal length (bottom = short focal length/low zoom or wide-angle, top = long focal length/high zoom or telephoto)</li>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
55 <li>Size is aperture (the lower the number, the larger the aperture and the larger the dot)</li>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
56 <li>Colour is based on the camera model (all photos from the same camera model are the same hue)</li>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
57 <li>Colour saturation is based on ISO (higher ISO is more sensitive, so the colour is brighter)</li>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
58 </ul>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
59 <form action="">
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
60 <input type="text" id="username" value="ibboard" onkeypress="if (event.keyCode==13) { visualise(); return false; }" /> <input type="button" value="Visualise" onclick="visualise()" />
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
61 </form>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
62 <div id="graph"></div>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
63 <div id="legend"></div>
5
457823710044 Start to add beeswarm timeline of photos
IBBoard <dev@ibboard.co.uk>
parents: 0
diff changeset
64 <div id="timeline"></div>
0
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
65 <table>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
66 <thead>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
67 <tr>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
68 <th width="100">Photo</th>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
69 <th>Camera</th>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
70 <th width="10%">Shutter Speed</th>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
71 <th width="10%">Focal Length</th>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
72 <th width="10%">Aperture</th>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
73 <th width="10%">ISO</th>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
74 </tr>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
75 </thead>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
76 <tbody id="photoTable">
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
77 </tbody>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
78 </table>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
79 <script type="text/javascript" src="./exif-graphr.js"></script>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
80 <div class="footer">
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
81 <p>This product uses the Flickr API but is not endorsed or certified by Flickr.</p>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
82 <p>All photo data is cached, but is only taken from public photos. No personal information is collected/stored/retained beyond normal web server logs.</p>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
83 </div>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
84 </body>
42c058ce5b7c Initial public commit of Exif-Graphr
IBBoard <dev@ibboard.co.uk>
parents:
diff changeset
85 </html>