minikomi/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Instagram Likes</title>
<style>
.axis text {
  font: 10px sans-serif;
}

body{
  margin: 0 auto;
  width: 1320px;
}
text {
  font-size: 12px;
  font-family: sans-serif;
}

#popover{
  position: absolute;
  background: white;
  display: none;
}

</style>
</head>
<body>
<div id="popover"></div>
<div>
<h1>Who likes your (latest 33) photos then?</h1>
<h2>Enter your username to find out..</h2>
<input type="text" id = "input" />
<input type="button" id="button" value="go" />
</div>
<div id="contents"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>


d3.jsonp = function (url, callback) {
  function rand() {
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
        c = '', i = -1;
    while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
    return c;
  }

  function create(url) {
    var e = url.match(/callback=d3.jsonp.(\w+)/),
        c = e ? e[1] : rand();
    d3.jsonp[c] = function(data) {
      callback(data);
      delete d3.jsonp[c];
      script.remove();
    };
    return 'd3.jsonp.' + c;
  }

  var cb = create(url),
      script = d3.select('head')
        .append('script')
        .attr('type', 'text/javascript')
        .attr('src', url.replace(/(\{|%7B)callback(\}|%7D)/, cb));
};

var _ignoreHashChange = false;

function go(user_name) {

  d3.select("#contents").html("");
  var client_id = "59c1efd13dd44cd69682a4494285d5c0"

  d3.jsonp("https://api.instagram.com/v1/users/search?callback={callback}&q="+user_name+"&client_id="+client_id, function(userdata){
    var user;
    if(userdata.data.length === 0) {
      alert("not found");
      return;
    }
    for(i = 0; i < userdata.data.length; i++) {
      if(userdata.data[i].username == user_name){
        user = userdata.data[i];
      }
    }

    d3.select("#contents").append("h2").text("User: " + user.username)

    d3.jsonp("https://api.instagram.com/v1/users/"+user.id+"/media/recent/?count=33&callback={callback}&client_id="+client_id, function(mediadata){
      if(mediadata.meta.code == 400){
        d3.select("#contents").append("h3").text("User has a locked account.")
        return;

      }

      var allLikes = d3.merge(mediadata.data.map(function(d){
        return d.likes.data.map(function(e){
          var ret = {};
          ret.photo = {
            "id": d.id,
            "thumbimg": d.images.thumbnail,
            "regularimg": d.images.standard_resolution,
            "link": d.link
          }
          ret.user = e;
          return ret;
        })
      }));

      var folded = d3.map(allLikes.reduce(function(o,d){
        if(o[d.user.id]){
          o[d.user.id].liked.push(d.photo)
        } else {
          o[d.user.id] = {user: d.user, liked: [d.photo]}
        }
        return o;
      }, {})).entries().sort(function(a,b){return b.value.liked.length - a.value.liked.length})


      var margin = {top: 50, right: 300, bottom: 350, left: 150};
      var rowHeight   = 30,
          width       = 33 * rowHeight,
          height      = rowHeight * folded.length;

      var svg = d3.select("#contents").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 rows = svg.selectAll(".row")
        .data(folded)
        .enter()
        .append("g").attr("transform", function(_,i){return "translate(0,"+i*rowHeight+")";})

      rows.append("image")
          .attr("xlink:href", function(d){
            return d.value.user.profile_picture
          })
          .attr("height", rowHeight - 1)
          .attr("width", rowHeight - 1)
          .on("click", function(d){
            go(d.value.user.username);
          });

      rows.append("text")
          .attr("dx", -10)
          .attr("dy", (rowHeight/2)-8)
          .attr("dominant-baseline", "middle")
          .attr("text-anchor", "end")
          .text(function(d){
            return ""+d.value.user.username
          })

      rows.append("text")
          .attr("dx", -10)
          .attr("dy", (rowHeight/2)+6)
          .attr("dominant-baseline", "middle")
          .attr("text-anchor", "end")
          .text(function(d){
            return ""+d.value.liked.length
          })

      rows.selectAll(".img").data(function(d){return d.value.liked})
          .enter()
          .append("image")
          .attr("class", "img")
          .attr("xlink:href", function(d){
            return d.thumbimg.url
          })
          .attr("x", function(_,i){return rowHeight+ 10 + (i * rowHeight)})
          .attr("width", (rowHeight - 1))
          .attr("height", (rowHeight - 1))
          .on("mouseover", function(d){
            var popover = d3.select("#popover");
            popover.style("top", (d3.event.y + 20) + "px")
                  .style("left", (d3.event.x + 20) + "px")
                  .style("display", "block")
            popover.append("img").attr("src", d.regularimg.url);

          })
          .on("mouseout", function(d){
            var popover = d3.select("#popover");
            popover.style("display", "none").html("")
          })
    });
  });
  if (window.location.hash !== "#"+user_name) {
    _ignoreHashChange = true;
    window.location.hash = user_name
    _ignoreHashChange = false;
  }
  document.getElementById("input").value = user_name;
}

d3.select("#button").on("click", function(){
  d3.event.preventDefault();
  go(document.getElementById("input").value);
});

if (window.location.hash.length > 0) {
  go(window.location.hash.slice(1))
} else {
  go("minikomi")
}

d3.select(window).on("hashchange", function hashchange() {
  if(_ignorehashchange) {
    return;
  }
  var that = d3.select(this).on("hashchange", null);
  if (window.location.hash.length > 0) {
    go(window.location.hash.slice(1))
  }
  that.on("hashchange", hashchange);
});


</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Instagram Likes</title>
	<style>
	.axis text {
	font: 10px sans-serif;
	}

	body{
	margin: 0 auto;
	width: 1320px;
	}
	text {
	font-size: 12px;
	font-family: sans-serif;
	}

	#popover{
	position: absolute;
	background: white;
	display: none;
	}

	</style>
	</head>
	<body>
	<div id="popover"></div>
	<div>
	<h1>Who likes your (latest 33) photos then?</h1>
	<h2>Enter your username to find out..</h2>
	<input type="text" id = "input" />
	<input type="button" id="button" value="go" />
	</div>
	<div id="contents"></div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>


	d3.jsonp = function (url, callback) {
	function rand() {
	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
	c = '', i = -1;
	while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
	return c;
	}

	function create(url) {
	var e = url.match(/callback=d3.jsonp.(\w+)/),
	c = e ? e[1] : rand();
	d3.jsonp[c] = function(data) {
	callback(data);
	delete d3.jsonp[c];
	script.remove();
	};
	return 'd3.jsonp.' + c;
	}

	var cb = create(url),
	script = d3.select('head')
	.append('script')
	.attr('type', 'text/javascript')
	.attr('src', url.replace(/(\{\|%7B)callback(\}\|%7D)/, cb));
	};

	var _ignoreHashChange = false;

	function go(user_name) {

	d3.select("#contents").html("");
	var client_id = "59c1efd13dd44cd69682a4494285d5c0"

	d3.jsonp("https://api.instagram.com/v1/users/search?callback={callback}&q="+user_name+"&client_id="+client_id, function(userdata){
	var user;
	if(userdata.data.length === 0) {
	alert("not found");
	return;
	}
	for(i = 0; i < userdata.data.length; i++) {
	if(userdata.data[i].username == user_name){
	user = userdata.data[i];
	}
	}

	d3.select("#contents").append("h2").text("User: " + user.username)

	d3.jsonp("https://api.instagram.com/v1/users/"+user.id+"/media/recent/?count=33&callback={callback}&client_id="+client_id, function(mediadata){
	if(mediadata.meta.code == 400){
	d3.select("#contents").append("h3").text("User has a locked account.")
	return;

	}

	var allLikes = d3.merge(mediadata.data.map(function(d){
	return d.likes.data.map(function(e){
	var ret = {};
	ret.photo = {
	"id": d.id,
	"thumbimg": d.images.thumbnail,
	"regularimg": d.images.standard_resolution,
	"link": d.link
	}
	ret.user = e;
	return ret;
	})
	}));

	var folded = d3.map(allLikes.reduce(function(o,d){
	if(o[d.user.id]){
	o[d.user.id].liked.push(d.photo)
	} else {
	o[d.user.id] = {user: d.user, liked: [d.photo]}
	}
	return o;
	}, {})).entries().sort(function(a,b){return b.value.liked.length - a.value.liked.length})


	var margin = {top: 50, right: 300, bottom: 350, left: 150};
	var rowHeight = 30,
	width = 33 * rowHeight,
	height = rowHeight * folded.length;

	var svg = d3.select("#contents").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 rows = svg.selectAll(".row")
	.data(folded)
	.enter()
	.append("g").attr("transform", function(_,i){return "translate(0,"+i*rowHeight+")";})

	rows.append("image")
	.attr("xlink:href", function(d){
	return d.value.user.profile_picture
	})
	.attr("height", rowHeight - 1)
	.attr("width", rowHeight - 1)
	.on("click", function(d){
	go(d.value.user.username);
	});

	rows.append("text")
	.attr("dx", -10)
	.attr("dy", (rowHeight/2)-8)
	.attr("dominant-baseline", "middle")
	.attr("text-anchor", "end")
	.text(function(d){
	return ""+d.value.user.username
	})

	rows.append("text")
	.attr("dx", -10)
	.attr("dy", (rowHeight/2)+6)
	.attr("dominant-baseline", "middle")
	.attr("text-anchor", "end")
	.text(function(d){
	return ""+d.value.liked.length
	})

	rows.selectAll(".img").data(function(d){return d.value.liked})
	.enter()
	.append("image")
	.attr("class", "img")
	.attr("xlink:href", function(d){
	return d.thumbimg.url
	})
	.attr("x", function(_,i){return rowHeight+ 10 + (i * rowHeight)})
	.attr("width", (rowHeight - 1))
	.attr("height", (rowHeight - 1))
	.on("mouseover", function(d){
	var popover = d3.select("#popover");
	popover.style("top", (d3.event.y + 20) + "px")
	.style("left", (d3.event.x + 20) + "px")
	.style("display", "block")
	popover.append("img").attr("src", d.regularimg.url);

	})
	.on("mouseout", function(d){
	var popover = d3.select("#popover");
	popover.style("display", "none").html("")
	})
	});
	});
	if (window.location.hash !== "#"+user_name) {
	_ignoreHashChange = true;
	window.location.hash = user_name
	_ignoreHashChange = false;
	}
	document.getElementById("input").value = user_name;
	}

	d3.select("#button").on("click", function(){
	d3.event.preventDefault();
	go(document.getElementById("input").value);
	});

	if (window.location.hash.length > 0) {
	go(window.location.hash.slice(1))
	} else {
	go("minikomi")
	}

	d3.select(window).on("hashchange", function hashchange() {
	if(_ignorehashchange) {
	return;
	}
	var that = d3.select(this).on("hashchange", null);
	if (window.location.hash.length > 0) {
	go(window.location.hash.slice(1))
	}
	that.on("hashchange", hashchange);
	});



	</script>
	</body>
	</html>