Mercurial > repos > other > exif-graphr

<!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>
<style type="text/css">
.axis path,
.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}

.axis text {
	font-family: sans-serif;
	font-size: 11px;
}

.d3-tip {
	background-color: rgba(51, 51, 51, 0.9);
	border-radius: 5px;
	border: 1px solid #000;
	color: #f0f0f0;
	font-size: 80%;
	padding: 0.5em;
	max-width: 25em;
}
.d3-tip:after {
	display: block;
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-width: 10px 5px 0 5px;
	border-top-color: #000;
}
table { border-collapse: collapse; width: 100% }
td, th { border: 1px solid #aaa }
th { background-color: #ddd }
</style>
</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" onkeypress="if (event.keyCode==13) { visualise(); return false; }" /> <input type="button" value="Visualise" onclick="visualise()" />
</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>
author	IBBoard <dev@ibboard.co.uk>
date	Mon, 29 May 2017 16:08:09 +0100
parents	42c058ce5b7c
children	a42497c3964c