--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/exif-graphr.js	Sun Aug 14 20:46:16 2016 +0100
@@ -0,0 +1,351 @@
+var debug = false;
+var photo_data = {};
+
+/* Helper functions */
+function byID(d) { return d.id; }
+function byValue(d) { return d; }
+
+function makeUrl(method, vals) {
+	vals = vals || {};
+	var parts = [];
+	if (debug) {
+		for (var key in vals) {
+			parts.push(encodeURIComponent(key) + '-' + encodeURIComponent(vals[key]));
+		}
+		var extra = parts.join('-');
+		if (extra != '') {
+			extra = '-' + extra;
+		}
+		var url = "./data-" + method + extra + ".json";
+	} else {
+		for (var key in vals) {
+			parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(vals[key]));
+		}
+		var extra = parts.join('&');
+		if (extra != '') {
+			extra = '&' + extra;
+		}
+		var url = "https://ibboard.co.uk/exif-graphr/api.php?method=" + method + extra;
+	}
+
+	return url;
+}
+
+/* The real code */
+function visualise() {
+	photo_data = {};
+	var userFoundFunc = function(error,data) {
+		if (error) {
+			alert(error.responseText ? error.responseText : error.statusText);
+			return;
+		}
+		if (data.stat != 'ok') {
+			if (data.message) {
+				alert(data.message);
+			} else {
+				alert("Unknown error");
+			}
+			return;
+		}
+		var nsid = getNSID(data);
+		getPhotos(nsid);
+	}
+
+	var username = document.getElementById('username').value;
+
+	if (/[0-9]+@N[0-9]+/.test(username)) {
+		getPhotos(username);
+	} else if (/https?:\/\/www\.flickr\.com\/photos\/[0-9a-z]+(\/.*)+/.test(username)) {
+		getNSID = function(data) {
+			return data.user.id;
+		};
+		d3.json(makeUrl('flickr.urls.lookupUser', { 'url': username }), userFoundFunc);
+	} else {
+		getNSID = function(data) {
+			return data.user.nsid;
+		};
+		d3.json(makeUrl('flickr.people.findByUsername', { 'username': username }), userFoundFunc);
+	}
+}
+
+function getPhotos(nsid) {
+	d3.json(makeUrl('flickr.people.getPublicPhotos', { 'user_id': nsid, 'per_page' : 100, 'extras': 'url_t' }), function(error, data) {
+		data.photos.photo.forEach(getExif);
+	});
+}
+
+function getExif(photo) {
+	var photo_id = photo.id;
+	var thumb_url = photo.url_t;
+	var url = "https://flickr.com/photos/" + photo.owner + "/" + photo_id;
+	d3.json(makeUrl('flickr.photos.getExif', { 'photo_id' : photo_id }), function(error, data) {
+		if (error || data.code) {
+			console.log("Error fetching details for " + photo_id + ": " + data.message);
+			return;
+		}
+		var exifs = data.photo.exif;
+		var len = exifs.length;
+		var exposure = '';
+		var f_number = '';
+		var iso = '';
+		var focal_length = '';
+		var timestamp = '';
+		var make = '';
+		var model = '';
+
+		for (var i = 0; i < len; i++) {
+			var exif = exifs[i];
+			if (exif.tagspace == 'ExifIFD') {
+				if (exif.tag == 'ExposureTime') {
+					if (exif.clean) {
+						exposure = exif.clean._content;
+					} else if (/^[0-9]+(\.[0-9]+)?$/.test(exif.raw._content)) {
+						exposure = exif.raw._content + " sec (" + exif.raw._content + ")";
+					} else {
+						console.log("No clean exposure time for "+photo.id+". Raw was "+exif.raw._content); continue;
+					}
+				} else if (exif.tag == 'FNumber') {
+					f_number = exif.raw._content;
+				} else if (exif.tag == 'ISO') {
+					iso = exif.raw._content;
+				} else if (exif.tag == 'FocalLength') {
+					if (/^[0-9\.]+ mm/.test(exif.raw._content)) {
+						focal_length = parseInt(exif.raw._content);
+					}
+				} else if (exif.tag == 'DateTimeOriginal') {
+					timestamp = Date.parse(exif.raw._content.replace(/^([0-9][0-9][0-9][0-9]):([0-9][0-9]):([0-9][0-9]) /, '$1/$2/$3 '));
+				}
+			} else if (exif.tagspace == 'IFD0') {
+				if (exif.tag == 'Make') {
+					make = exif.raw._content;
+				} else if (exif.tag == 'Model') {
+					model = exif.raw._content;
+				} else if (exif.tag == 'FocalLength') {
+					if (!focal_length) { focal_length = exif.raw._content.replace(/^([0-9]+(\.[0-9]+)?).*$/, '$1'); }
+				} else if (exif.tag == 'ExposureTime') {
+					if (!exposure) { exposure = exif.raw._content + " sec (" + exif.raw._content + ")"; }
+				} else if (exif.tag == 'FNumber') {
+					if (!f_number) { f_number = Math.round(exif.raw._content / 100); /* Trial and error guess - it is a rational number */ }
+				}
+
+			}
+		}
+
+		var exp_matches = exposure.match(/^(1\/)?([0-9\.]+) sec( \(([^\)]+)\))?/);
+		var exp_parts = [ '', '' ];
+		if (exp_matches) {
+			if (exp_matches[1]) {
+				// We got a non-decimal numeric version
+				exp_parts[0] = 1 / exp_matches[2];
+			} else {
+				exp_parts[0] = exp_matches[2];
+			}
+
+			if (exp_matches[4]) {
+				exp_parts[1] = exp_matches[4];
+				var exp_fraction = exp_parts[1].match(/^1\/([0-9]+)$/);
+				if (exp_fraction) {
+					//Override for accuracy - the "clean" version rounds too much - 1/909 through 1/2000 ⇒ 0.001
+					exp_parts[0] = 1 / exp_fraction[1];
+				}
+			} else {
+				exp_parts[1] = exp_parts[0] >= 1 ? exp_parts[0] : "1/"+(1/exp_parts[0]);
+			}
+		}
+		var exp_sec = exp_parts[0];
+		var exp_str = exp_parts[1];
+
+		var camera = '';
+		make = make.replace(/ CORPORATION$/, '');
+		if (make && model && !(model.indexOf(make) === 0)) {
+			camera = make + " " + model;
+		} else {
+			camera = model;
+		}
+		
+		photo_data[photo.id] = { 'id': photo.id, 'exposure': +exp_sec, 'exposure_string': exp_str, 'f_number': f_number, 'iso': +iso, 'focal_length': +focal_length, 'camera': camera, 'make': make, 'model' : model, 'timestamp': timestamp, 'thumb': thumb_url, 'url': url };
+		update();
+	});
+}
+
+function clone(obj) {
+	if (null == obj || "object" != typeof obj) return obj;
+	var copy = obj.constructor();
+	for (var attr in obj) {
+		if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
+	}
+	return copy;
+}
+
+function hashcode(s){
+	return s.split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0);
+}
+
+var margin = {top: 40, right: 20, bottom: 50, left: 55},
+	width = 960 - margin.left - margin.right,
+	height = 600 - margin.top - margin.bottom,
+	axisHeight = height - margin.bottom;
+var svg = d3.select("#graph").append("svg")
+	.attr("width", width + margin.left + margin.right)
+	.attr("height", height + margin.top + margin.bottom)
+  .append("g")
+	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+var photoTable = d3.select("#photoTable");
+var legend = d3.select("#legend").append("svg");
+var legendGradients = legend.append("defs");
+var legends = legend.append("g");
+
+var tip = d3.tip()
+	.attr('class', 'd3-tip')
+	.offset([-10, 0])
+	.html(function(d) {
+		return "Photo " + d.id + '<br /><img src="' + d.thumb + '" alt="Photo ' + d.id + '" />' + "<br />Aperture: f/" + d.f_number + "<br />Focal Length: " + d.focal_length + "<br />Exposure: " + d.exposure_string + "<br />ISO: " + d.iso + "<br />Camera: " + d.camera;
+	});
+svg.call(tip);
+
+var flAxisScale = d3.scale.linear()
+	.rangeRound([axisHeight, 0]);
+var flAxis = d3.svg.axis().orient("left").scale(flAxisScale);
+var expAxisScale = d3.scale.log()
+	.rangeRound([0, width]);
+var expAxis = d3.svg.axis().scale(expAxisScale)
+	.tickFormat(function(d) { if (d < 1) { return "1∕" + (1 / d).toFixed(2).replace(/\.?0+$/, ''); } else { return d; } });
+var circlesG = svg.append("svg:g");
+var axises = svg.append("svg:g");
+var saturationScale = d3.scale.log().range([30,90]);
+axises.append("g")
+	.attr("class", "y axis")
+	.call(flAxis);
+axises.append("g")
+	.attr("class", "x axis")
+	.attr("transform", "translate(0," + (axisHeight) + ")")
+	.call(expAxis)
+		.selectAll("text")
+		.style("text-anchor", "start")
+		.attr("y", 0)
+		.attr("x", 9)
+		.attr("dy", ".35em")
+		.attr("transform", function(d) {
+			return "rotate(90)" 
+		});
+axises.append("text")
+	.attr("transform", "translate(" + (width / 2) + " ," + (height + (margin.bottom/2)) + ")")
+	.style("text-anchor", "middle")
+	.text("Shutter Speed (Exposure) in Seconds");
+svg.append("text")
+	.attr("transform", "rotate(-90)")
+	.attr("y", 0 - margin.left)
+	.attr("x",0 - (height / 2))
+	.attr("dy", "1em")
+	.style("text-anchor", "middle")
+	.text("Focal Length in mm");
+
+function update() {
+	var photos = [];
+	for (var key in photo_data) {
+		if (photo_data.hasOwnProperty(key)) {
+			photos.push(photo_data[key]);
+		}
+	}
+
+	var photosWithExif = photos.filter(function(d) { return d.focal_length != '' && d.exposure != '' && d.f_number != '' && d.iso != '';});
+	saturationScale.domain([d3.min(photosWithExif, function(val) { return val.iso; }), d3.max(photosWithExif, function(val) { return val.iso; })]);
+
+	update_graph(photosWithExif);
+	update_table(photos);
+	update_legend(photosWithExif);
+}
+
+function update_graph(filteredPhotos) {
+	flAxisScale.domain([d3.min(filteredPhotos, function(val) { return val.focal_length; }) * 0.9, d3.max(filteredPhotos, function(val) { return val.focal_length; }) * 1.1]);
+	flAxis.scale(flAxisScale);
+	axises.selectAll(".y.axis").call(flAxis);
+	expAxisScale.domain([d3.min(filteredPhotos, function(val) { return val.exposure; }) * 0.9, d3.max(filteredPhotos, function(val) { return val.exposure; }) * 1.1]);
+	expAxis.scale(expAxisScale);
+	axises.selectAll(".x.axis").call(expAxis)
+		.selectAll("text")
+		.style("text-anchor", "start")
+		.attr("y", 0)
+		.attr("x", 9)
+		.attr("dy", ".35em")
+		.attr("transform", function(d) {
+			return "rotate(90)" 
+		});
+	var circles = circlesG.selectAll("circle")
+		.data(filteredPhotos, byID);
+	circles.exit().remove();
+	circles.enter()
+		.append("circle")
+		.on('mouseover', tip.show)
+		.on('mouseout', tip.hide)
+//		.transition()
+//		.duration(750);
+	
+	circles/*.transition().duration(250)*/
+		.attr("cx", function (d) { return expAxisScale(d.exposure); })
+		.attr("cy", function (d) { return flAxisScale(d.focal_length); })
+		.attr("r", function (d) { return 50 / d.f_number; })
+		.attr("fill", function (d) { var h = make_camera_hue(d.camera); var s = saturationScale(d.iso); return "hsl("+h+","+s+"%,50%)";})
+		.attr("stroke", "#000")
+		.attr("stroke-width", 1);
+	circles.sort(function(a, b) { var f_sort = a.f_number - b.f_number; if (f_sort != 0) { return f_sort; } else { return a.exposure - b.exposure; } });
+}
+
+function make_camera_hue(camera) {
+	return (hashcode(camera) % 90) * 4;
+}
+
+function update_table(photos) {
+	var photoRows = photoTable.selectAll("tr").data(photos, byID);
+	photoRows.exit().remove();
+	photoRows.enter()
+		.append("tr");
+	photoRows.sort(function(a,b){ return b.timestamp - a.timestamp;});
+	photoCells = photoRows.selectAll("td")
+		.data(function(photo) {
+			var thumb = '<a href="' + photo.url + '"><img src="' + photo.thumb + '" alt="Photo ' + photo.id + '" /></a>';
+			return [ thumb, photo.camera, photo.exposure_string != '' ? photo.exposure_string + "s" : '', photo.focal_length != '' ? photo.focal_length + "mm" : '', photo.f_number != '' ? "f/" + photo.f_number : '', photo.iso ]; })
+		.enter()
+		.append("td")
+		.html(function(d) { return d; });
+}
+
+function update_legend(photos) {
+	var legendBlockWidth = 200;
+	var legendBlockHeight = 20;
+	var cameras = d3.set(photos.map(function(d){ return d.camera ? d.camera : "Unknown"; })).values();
+	legend.attr("width", 400)
+		.attr("height", cameras.length * legendBlockHeight + legendBlockHeight);
+	var gradients = legendGradients.selectAll("linearGradient").data(cameras, byValue);
+	gradients.exit().remove();
+	var newGradients = gradients.enter().append("linearGradient")
+		.attr("id", function(d,i) { return "Gradient" + i; });
+	newGradients.append("stop")
+		.attr("offset", "0%")
+		.attr("stop-color", function(camera){var h = make_camera_hue(camera); return "hsl("+h+","+saturationScale.range()[0]+"%,50%)";});
+	newGradients.append("stop")
+		.attr("offset", "100%")
+		.attr("stop-color", function(camera){var h = make_camera_hue(camera); return "hsl("+h+","+saturationScale.range()[1]+"%,50%)";});
+	var cameraLegends = legends.selectAll("g").data(cameras, byValue);
+	cameraLegends.exit().remove();
+	var newCameraLegends = cameraLegends.enter().append("g")
+	newCameraLegends.append("title").text(function(d){return d;});
+	newCameraLegends.append("rect")
+		.attr("x", 0)
+		.attr("y", function(d,i){ return i * legendBlockHeight; })
+		.attr("width", legendBlockWidth)
+		.attr("height", legendBlockHeight)
+		.attr("fill", function(d,i) { return "url(#Gradient" + i + ")"; })
+		.on('mouseover', function(d) { setCircleOpacity(d, 0.1); })
+		.on('mouseout', function(d) { setCircleOpacity(d, 1); });
+	newCameraLegends.append("text")
+		.text(function(d){ return d; })
+		.attr("x", legendBlockWidth + 5)
+		.attr("y", function(d,i) { return i * legendBlockHeight + (legendBlockHeight / 4) * 3; });
+}
+
+function setCircleOpacity(camera, opacity) {
+	// Set opacity of all circles that AREN'T photos from this camera to highlight the ones that are
+	circlesG.selectAll("circle")
+		.attr('opacity', function (d) { return (d.camera != camera) ? opacity : 1; });
+}
\ No newline at end of file