Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: ec7a13bfde
Fetching contributors…

Cannot retrieve contributors at this time

125 lines (117 sloc) 4.463 kb
<!DOCTYPE html>
<html>
<head>
<title>insta</title>
<script type='text/javascript' src='crossfilter.min.js'></script>
<script type='text/javascript' src='d3.v2.min.js'></script>
<script type='text/javascript' src='modestmaps.js'></script>
<script type='text/javascript'>
window.onload = function() {
d3.json('data/index.json', function(photos) {
photosIndex = crossfilter(photos);
photosByDate = photosIndex.dimension(function(d) { return +d.created_time });
photosByLikes = photosIndex.dimension(function(d) { return d.likes.count });
photosByFilter = photosIndex.dimension(function(d) { return d.filter });
photosByMonth = photosIndex.dimension(function(d) { return d3.time.month(new Date(+d.created_time * 1000)) });
photoCountByFilter = photosByFilter.group().reduceCount();
photoCountByLikes = photosByLikes.group().reduceCount();
photoCountByMonth = photosByMonth.group().reduceCount();
var facet = d3.select('#filters');
var facets = facet.selectAll('div.option')
.data(photoCountByFilter.top(100))
.enter()
.append('div')
.append('a')
.text(function(d) { return d.key + ' (' + d.value + ')'; })
.on('click', function(d) {
if (d3.select(this).attr('class') == 'active') {
photosByFilter.filter(null);
photoList();
facets.attr('class', '');
} else {
photosByFilter.filterExact(d.key);
photoList();
facets.attr('class', '');
d3.select(this).attr('class', 'active');
}
});
var likes = d3.select('#likes').selectAll('div.option')
.data(photoCountByLikes.top(100))
.enter()
.append('div')
.append('a')
.text(function(d) { return d.key + ' (' + d.value + ')'; })
.on('click', function(d) {
if (d3.select(this).attr('class') == 'active') {
photosByLikes.filter(null);
photoList();
likes.attr('class', '');
} else {
photosByLikes.filterExact(d.key);
photoList();
likes.attr('class', '');
d3.select(this).attr('class', 'active');
}
});
var nicemonth = d3.time.format('%b %Y');
var months = d3.select('#months').selectAll('div.option')
.data(photoCountByMonth.top(100))
.enter()
.append('div')
.append('a')
.text(function(d) { return nicemonth(d.key) + ' (' + d.value + ')'; })
.on('click', function(d) {
if (d3.select(this).attr('class') == 'active') {
photosByMonth.filter(null);
photoList();
months.attr('class', '');
} else {
photosByMonth.filterExact(d.key);
photoList();
months.attr('class', '');
d3.select(this).attr('class', 'active');
}
});
var photoContainer = d3.select('#photos');
var stackContainer = d3.select('#stack');
var photo;
function photoList() {
[stackContainer, photoContainer].forEach(function(c) {
photo = c.selectAll('img')
.data(photosByDate.top(100), function(d) { return d.id });
photo.enter()
.append('img')
.sort(function(b, a) {
return (a && b) && a.created_time - b.created_time;
})
.attr('src', function(d) { return 'data/' + d.id + '_low.jpg'; })
.attr('title', function(d) { return d.caption && d.caption.text; })
.on('click', function(d) {
window.location = 'detail.html#' + d.id;
});
photo.exit().remove();
});
}
photoList();
});
};
</script>
<link href='style.css' media='screen' rel='stylesheet' type='text/css' />
</head>
<body>
<div class='wrapper'>
<!-- <div id='map'></div> -->
<div id='photos'>
</div>
<div class='facets'>
<div id='stack'></div>
<h2>Filters</h2>
<div id='filters'></div>
<h2>Likes</h2>
<div id='likes'></div>
<h2>Months</h2>
<div id='months'></div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.