Mercurial > repos > other > exif-graphr

annotate index.html @ 7:a803fabf200e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fix overflow for bee positions with lots of photos at one time
author IBBoard <dev@ibboard.co.uk>
date Sat, 03 Jun 2017 20:54:14 +0100
parents 457823710044
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>