Created
July 27, 2015 18:33
-
-
Save P3nny/0d620bdfc739ad29cb1a to your computer and use it in GitHub Desktop.
Cologne Pics - Takes names of city quarters and displays recently posted instagram pics tagged with city quaters name.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| tooltipdiv = d3.select("body") | |
| .append("div") | |
| .attr("class", "tooltip"); | |
| function mousemove(text, text2){ | |
| tooltipdiv | |
| .style("visibility", "visible") | |
| .style("opacity", 1) | |
| .style("top", d3.event.pageY+15 + "px") | |
| .style("left", d3.event.pageX + "px") | |
| .html(text + "<br/>" + text2); | |
| } | |
| function mouseout(){ | |
| tooltipdiv.style("opacity", 1) | |
| .style("visibility", "hidden"); | |
| } | |
| d3.json("/cologne.json", function(json) { | |
| d3.csv("/Stadtteildaten.csv", function(data) | |
| { | |
| // first map | |
| var width = 600; | |
| var height = 800; | |
| var vis = d3.select("#mapContainer1").append("svg") | |
| .attr("width", width).attr("height", height) | |
| // Was soll angezeigt werden: | |
| map_id = "1" | |
| object = "Zugelassene Kraftfahrzeuge" | |
| divisor = "Haushalte insgesamt" | |
| var minmax = d3.nest() | |
| .rollup(function(values) { return d3.extent(values, function(d) {return +(d[object]/d[divisor]); }) }) | |
| .map(data); | |
| var get_median = d3.nest() | |
| .rollup(function(values) { return d3.mean(values, function(d) {return +(d[object]/d[divisor]); }) }) | |
| .map(data); | |
| // create a first guess for the projection | |
| var center = d3.geo.centroid(json) | |
| var scale = 100; | |
| var offset = [width/1.7, height/2.7]; | |
| var projection = d3.geo.mercator().scale(scale).center(center) | |
| .translate(offset); | |
| // colors | |
| var color = d3.scale.linear().domain(minmax).range(['#cdd',"#43052a"]); | |
| // create the path | |
| var path = d3.geo.path().projection(projection); | |
| // using the path determine the bounds of the current map and use | |
| // these to determine better values for the scale and translation | |
| var bounds = path.bounds(json); | |
| var hscale = scale*width / (bounds[1][0] - bounds[0][0]); | |
| var vscale = scale*height / (bounds[1][1] - bounds[0][1]); | |
| var scale = (hscale < vscale) ? hscale : vscale; | |
| var offset = [width - (bounds[0][0] + bounds[1][0])/2.39, | |
| height - (bounds[0][1] + bounds[1][1])/1.9]; | |
| // new projection | |
| projection = d3.geo.mercator().center(center) | |
| .scale(scale).translate(offset); | |
| path = path.projection(projection); | |
| var stadtdaten = d3.nest() | |
| .key(function(d) { return d["Stadtteil Nr."]; }) | |
| .entries(data); | |
| //console.log(stadtdaten); | |
| //Legende: | |
| var legend = vis.append("g") | |
| .attr("class", "legend") | |
| .attr("x", 5) | |
| .attr("y", 25) | |
| .attr("height", 100) | |
| .attr("width", 100); | |
| legendtitle = legend.append("text") | |
| .style("font-size","12px").attr("x", 5) | |
| .attr("y", 15) | |
| .style("fill", "Grey").text("Anzahl der KFZ pro Haushalt"+":") | |
| // for(var number in minmax){}; | |
| minvalue = legend.append("rect") | |
| .attr("x", 15) | |
| .attr("y", 22) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(minmax[0])); | |
| // | |
| mintext = legend.append("text") | |
| .style("font-size","12px").attr("x", 29) | |
| .attr("y", 31) | |
| .style("fill", "Grey").text(Math.round(minmax[0]*100)/100); | |
| maxvalue = legend.append("rect") | |
| .attr("x", 87) | |
| .attr("y", 22) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(minmax[1])); | |
| maxtext = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 100) | |
| .attr("y", 31) | |
| .style("fill", "Grey").text(Math.round(minmax[1]*100)/100); | |
| median = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 5) | |
| .attr("y", 50) | |
| .style("fill", "Grey").text("Durchschnitt:") | |
| medianvalue = legend.append("rect") | |
| .attr("x", 35) | |
| .attr("y", 60) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(get_median)); | |
| mediantext = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 50) | |
| .attr("y", 69) | |
| .style("fill", "Grey").text(Math.round(get_median*100)/100); | |
| vis.selectAll("path") | |
| .data(json.features).enter().append("path") | |
| .attr("d", path) | |
| .attr("id", function(d) { return map_id+d.properties.NUMMER}) | |
| .attr("class", "stadtteil") | |
| .style("fill", function(d){return color( d.properties.STADTBEZIR.replace(/\s+/g, '').length);}) | |
| .style("stroke-width", "1") | |
| .style("stroke", "gray") | |
| .on("mouseover", function(d){ | |
| console.log(d); | |
| return mousemove(d.properties.NAME, "") }) | |
| .on("mousemove",function(d) { | |
| console.log(d); | |
| mousemove(d.properties.NAME, d3.select(this).node().textContent); } ) | |
| .on("mouseout", mouseout); | |
| //Add color data to the graph. | |
| $.each(stadtdaten, function(i, daten){ | |
| datensatz = daten.values[0][object]/daten.values[0][divisor] | |
| $('#' +map_id+ daten.key).css("fill", color(datensatz)); | |
| $('#' +map_id+ daten.key).css("fill", color(datensatz)).text(Math.round(datensatz*100)/100); | |
| }); | |
| // second map | |
| var vis = d3.select("#mapContainer2").append("svg") | |
| .attr("width", width).attr("height", height) | |
| // Was soll angezeigt werden: | |
| map_id = "2" | |
| object = "Fertilitätsrate (Durchschnittliche Zahl der Kinder, die eine Frau vom 15. bis zum 49. Lebensjahr lebend zur Welt bringt)" | |
| var minmax = d3.nest() | |
| .rollup(function(values) { return d3.extent(values, function(d) {return +(d[object]); }) }) | |
| .map(data); | |
| var get_median = d3.nest() | |
| .rollup(function(values) { return d3.mean(values, function(d) {return +(d[object]); }) }) | |
| .map(data); | |
| // create a first guess for the projection | |
| var center = d3.geo.centroid(json) | |
| var scale = 300; | |
| var offset = [width/1.7, height/2.7]; | |
| var projection = d3.geo.mercator().scale(scale).center(center) | |
| .translate(offset); | |
| // colors | |
| var color = d3.scale.linear().domain(minmax).range(['#cdd',"#43052a"]); | |
| // create the path | |
| var path = d3.geo.path().projection(projection); | |
| // using the path determine the bounds of the current map and use | |
| // these to determine better values for the scale and translation | |
| var bounds = path.bounds(json); | |
| var hscale = scale*width / (bounds[1][0] - bounds[0][0]); | |
| var vscale = scale*height / (bounds[1][1] - bounds[0][1]); | |
| var scale = (hscale < vscale) ? hscale : vscale; | |
| var offset = [width - (bounds[0][0] + bounds[1][0])/2.39, | |
| height - (bounds[0][1] + bounds[1][1])/1.9]; | |
| // new projection | |
| projection = d3.geo.mercator().center(center) | |
| .scale(scale).translate(offset); | |
| path = path.projection(projection); | |
| var stadtdaten = d3.nest() | |
| .key(function(d) { return d["Stadtteil Nr."]; }) | |
| .entries(data); | |
| //console.log(stadtdaten); | |
| //Legende: | |
| var legend = vis.append("g") | |
| .attr("class", "legend") | |
| .attr("x", 5) | |
| .attr("y", 25) | |
| .attr("height", 100) | |
| .attr("width", 100); | |
| legendtitle = legend.append("text") | |
| .style("font-size","12px").attr("x", 5) | |
| .attr("y", 15) | |
| .style("fill", "Grey").text("Fertilitätsrate:") | |
| // for(var number in minmax){}; | |
| minvalue = legend.append("rect") | |
| .attr("x", 15) | |
| .attr("y", 22) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(minmax[0])); | |
| // | |
| mintext = legend.append("text") | |
| .style("font-size","12px").attr("x", 29) | |
| .attr("y", 31) | |
| .style("fill", "Grey").text(Math.round(minmax[0]*100)/100); | |
| maxvalue = legend.append("rect") | |
| .attr("x", 87) | |
| .attr("y", 22) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(minmax[1])); | |
| maxtext = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 100) | |
| .attr("y", 31) | |
| .style("fill", "Grey").text(Math.round(minmax[1]*100)/100); | |
| median = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 5) | |
| .attr("y", 50) | |
| .style("fill", "Grey").text("Durchschnitt:") | |
| medianvalue = legend.append("rect") | |
| .attr("x", 35) | |
| .attr("y", 60) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(get_median)); | |
| mediantext = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 50) | |
| .attr("y", 69) | |
| .style("fill", "Grey").text(Math.round(get_median*100)/100); | |
| vis.selectAll("path") | |
| .data(json.features).enter().append("path") | |
| .attr("d", path) | |
| .attr("id", function(d) { return map_id+d.properties.NUMMER}) | |
| .attr("class", "stadtteil") | |
| .style("fill", function(d){return color( d.properties.STADTBEZIR.replace(/\s+/g, '').length);}) | |
| .style("stroke-width", "1") | |
| .style("stroke", "gray") | |
| .on("mouseover", function(d){ return mousemove(d.properties.NAME, "") }) | |
| .on("mousemove",function(d) { | |
| console.log(d); | |
| mousemove(d.properties.NAME, d3.select(this).node().textContent); } ) | |
| .on("mouseout", mouseout); | |
| //Add color data to the graph. | |
| $.each(stadtdaten, function(i, daten){ | |
| datensatz = daten.values[0][object] | |
| $('#' +map_id+ daten.key).css("fill", color(datensatz)); | |
| $('#' +map_id+ daten.key).css("fill", color(datensatz)).text(Math.round(datensatz*100)/100); | |
| }); | |
| // third map | |
| var vis = d3.select("#mapContainer3").append("svg") | |
| .attr("width", width).attr("height", height) | |
| // Was soll angezeigt werden: | |
| map_id = "3" | |
| object = "Zugelassene KfZ: Krafträder" | |
| divisor = "Haushalte insgesamt" | |
| var minmax = d3.nest() | |
| .rollup(function(values) { return d3.extent(values, function(d) {return +(d[object]/d[divisor]); }) }) | |
| .map(data); | |
| var get_median = d3.nest() | |
| .rollup(function(values) { return d3.mean(values, function(d) {return +(d[object]/d[divisor]); }) }) | |
| .map(data); | |
| // create a first guess for the projection | |
| var center = d3.geo.centroid(json) | |
| var scale = 300; | |
| var offset = [width/1.7, height/2.7]; | |
| var projection = d3.geo.mercator().scale(scale).center(center) | |
| .translate(offset); | |
| // colors | |
| var color = d3.scale.linear().domain(minmax).range(['#cdd',"#43052a"]); | |
| // create the path | |
| var path = d3.geo.path().projection(projection); | |
| // using the path determine the bounds of the current map and use | |
| // these to determine better values for the scale and translation | |
| var bounds = path.bounds(json); | |
| var hscale = scale*width / (bounds[1][0] - bounds[0][0]); | |
| var vscale = scale*height / (bounds[1][1] - bounds[0][1]); | |
| var scale = (hscale < vscale) ? hscale : vscale; | |
| var offset = [width - (bounds[0][0] + bounds[1][0])/2.39, | |
| height - (bounds[0][1] + bounds[1][1])/1.9]; | |
| // new projection | |
| projection = d3.geo.mercator().center(center) | |
| .scale(scale).translate(offset); | |
| path = path.projection(projection); | |
| var stadtdaten = d3.nest() | |
| .key(function(d) { return d["Stadtteil Nr."]; }) | |
| .entries(data); | |
| //console.log(stadtdaten); | |
| //Legende: | |
| var legend = vis.append("g") | |
| .attr("class", "legend") | |
| .attr("x", 5) | |
| .attr("y", 25) | |
| .attr("height", 100) | |
| .attr("width", 100); | |
| legendtitle = legend.append("text") | |
| .style("font-size","12px").attr("x", 5) | |
| .attr("y", 15) | |
| .style("fill", "Grey").text("Motorräder pro Haushalt"+":") | |
| // for(var number in minmax){}; | |
| minvalue = legend.append("rect") | |
| .attr("x", 15) | |
| .attr("y", 22) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(minmax[0])); | |
| // | |
| mintext = legend.append("text") | |
| .style("font-size","12px").attr("x", 29) | |
| .attr("y", 31) | |
| .style("fill", "Grey").text(Math.round(minmax[0]*100)/100); | |
| maxvalue = legend.append("rect") | |
| .attr("x", 87) | |
| .attr("y", 22) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(minmax[1])); | |
| maxtext = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 100) | |
| .attr("y", 31) | |
| .style("fill", "Grey").text(Math.round(minmax[1]*100)/100); | |
| median = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 5) | |
| .attr("y", 50) | |
| .style("fill", "Grey").text("Durchschnitt:") | |
| medianvalue = legend.append("rect") | |
| .attr("x", 35) | |
| .attr("y", 60) | |
| .attr("width", 10) | |
| .attr("height", 10) | |
| .style("fill", color(get_median)); | |
| mediantext = legend.append("text") | |
| .style("font-size","12px") | |
| .attr("x", 50) | |
| .attr("y", 69) | |
| .style("fill", "Grey").text(Math.round(get_median*100)/100); | |
| vis.selectAll("path") | |
| .data(json.features).enter().append("path") | |
| .attr("d", path) | |
| .attr("id", function(d) { return map_id+d.properties.NUMMER}) | |
| .attr("class", "stadtteil") | |
| .style("fill", function(d){return color( d.properties.STADTBEZIR.replace(/\s+/g, '').length);}) | |
| .style("stroke-width", "1") | |
| .style("stroke", "gray") | |
| .on("mouseover", function(d){ return mousemove(d.properties.NAME, "") }) | |
| .on("mousemove",function(d) { mousemove(d.properties.NAME, d3.select(this).node().textContent); } ) | |
| .on("mouseout", mouseout); | |
| //Add color data to the graph. | |
| $.each(stadtdaten, function(i, daten){ | |
| datensatz = daten.values[0][object]/daten.values[0][divisor] | |
| $('#' +map_id+ daten.key).css("fill", color(datensatz)); | |
| $('#' +map_id+ daten.key).css("fill", color(datensatz)).text(Math.round(datensatz*100)/100); | |
| }); | |
| }); //close csv | |
| });//close json | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Insta Cologne</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script type="text/javascript" src="jquery-1.8.0.min.js"></script> | |
| <script type="text/javascript" src="chart.js"></script> | |
| <script type="text/javascript" src="instafeed.min.js"></script> | |
| </head> | |
| <body> | |
| <h1>#Veedel Fotos</h1> | |
| <p>Hier entsteht eine Anwendung, die per Klick auf ein Kölner Stadtviertel die neuesten Instagram-Fotos aus diesem #veedel aufruft. | |
| <div id="instafeed"></div> | |
| <div id="mapContainer1" class="map"></div> | |
| </body> | |
| </html> | |
| <script type="text/javascript"> | |
| var feed = new Instafeed({ | |
| get: 'tagged', | |
| tagName: 'Sülz', | |
| sortBy: 'most-recent', | |
| clientId: 'c2fefac7367c40cab3f7c19628c80833', | |
| }); | |
| feed.run(); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Generated by CoffeeScript 1.3.3 | |
| (function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);document.getElementById(this.options.target).appendChild(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.Instafeed=e}).call(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment