view index.html @ 10:a42497c3964c

Move scripts & CSS to files to play nicely with CSP
author IBBoard <dev@ibboard.co.uk>
date Wed, 26 Jun 2019 20:41:10 +0100
parents 457823710044
children
line wrap: on
line source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
<title>Exif Graphr for Flickr</title>
<script type="text/javascript" src="./d3.js"></script>
<!-- Uncomment the following line for "production" use -->
<!--<script type="text/javascript" src="./d3.min.js"></script>-->
<script type="text/javascript" src="./d3.tip.js"></script>
<script type="text/javascript" src="./d3.beeswarm.js"></script>
<link rel="stylesheet" href="./exif-graphr.css" />
</head>
<body>
<h1>Exif Graphr</h1>
<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>
<p>In the graph:</p>
<ul><li>Horizontal position is shutter speed (left = quick shutter, right = slow shutter)</li>
<li>Vertical position is focal length (bottom = short focal length/low zoom or wide-angle, top = long focal length/high zoom or telephoto)</li>
<li>Size is aperture (the lower the number, the larger the aperture and the larger the dot)</li>
<li>Colour is based on the camera model (all photos from the same camera model are the same hue)</li>
<li>Colour saturation is based on ISO (higher ISO is more sensitive, so the colour is brighter)</li>
</ul>
<form action="">
<input type="text" id="username" value="ibboard" /> <input type="button" value="Visualise" id="submit" />
</form>
<div id="graph"></div>
<div id="legend"></div>
<div id="timeline"></div>
<table>
<thead>
<tr>
  <th width="100">Photo</th>
  <th>Camera</th>
  <th width="10%">Shutter Speed</th>
  <th width="10%">Focal Length</th>
  <th width="10%">Aperture</th>
  <th width="10%">ISO</th>
</tr>
</thead>
<tbody id="photoTable">
</tbody>
</table>
<script type="text/javascript" src="./exif-graphr.js"></script>
<div class="footer">
<p>This product uses the Flickr API but is not endorsed or certified by Flickr.</p>
<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>
</div>
</body>
</html>