Skip to content

Instantly share code, notes, and snippets.

@macklinu

macklinu/flickr.js

Last active December 11, 2015 19:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save macklinu/4646524 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save macklinu/4646524 to your computer and use it in GitHub Desktop.
Download ZIP
D3 Flickr
Raw
flickr.js
d3.json("nhl.json", function(json) {
d3.select("body")
.selectAll("img")
.data(json.items)
.enter()
.append("img")
.attr("class", "nhl")
.attr("src", function (d) {return d.media.m});
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
img {
margin: 10px;
}
img:hover {
border-radius: 100px;
}
</style>
</head>
<body>
<div id="flickr"></div>
<script src="flickr.js"></script>
</body>
</html>
Raw
nhl.json
{
"title": "Recent Uploads tagged nhl",
"link": "http://www.flickr.com/photos/tags/nhl/",
"description": "",
"modified": "2013-01-27T05:41:54Z",
"generator": "http://www.flickr.com/",
"items": [
{
"title": "77|365",
"link": "http://www.flickr.com/photos/imericaphoto/8419347232/",
"media": {"m":"http://farm9.staticflickr.com/8356/8419347232_4b1137d31e_m.jpg"},
"date_taken": "2013-01-26T21:41:54-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/imericaphoto/\">|imerica|<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/imericaphoto/8419347232/\" title=\"77|365\"><img src=\"http://farm9.staticflickr.com/8356/8419347232_4b1137d31e_m.jpg\" width=\"240\" height=\"240\" alt=\"77|365\" /><\/a><\/p> ",
"published": "2013-01-27T05:41:54Z",
"author": "nobody@flickr.com (|imerica|)",
"author_id": "42524582@N08",
"tags": "winter hockey square nhl lofi squareformat jersey 365 detroitredwings winterclassic iphoneography instagramapp"
},
{
"title": "Bryan Bickell",
"link": "http://www.flickr.com/photos/the_mel/8418180761/",
"media": {"m":"http://farm9.staticflickr.com/8088/8418180761_8e164f1a5c_m.jpg"},
"date_taken": "2013-01-22T20:44:14-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418180761/\" title=\"Bryan Bickell\"><img src=\"http://farm9.staticflickr.com/8088/8418180761_8e164f1a5c_m.jpg\" width=\"240\" height=\"160\" alt=\"Bryan Bickell\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T05:00:45Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues bryanbickell"
},
{
"title": "Ray Emery",
"link": "http://www.flickr.com/photos/the_mel/8419277112/",
"media": {"m":"http://farm9.staticflickr.com/8473/8419277112_0787f9ed08_m.jpg"},
"date_taken": "2013-01-22T20:44:21-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419277112/\" title=\"Ray Emery\"><img src=\"http://farm9.staticflickr.com/8473/8419277112_0787f9ed08_m.jpg\" width=\"240\" height=\"160\" alt=\"Ray Emery\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T05:01:41Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues rayemery"
},
{
"title": "Duncan Keith",
"link": "http://www.flickr.com/photos/the_mel/8418163119/",
"media": {"m":"http://farm9.staticflickr.com/8098/8418163119_644e3dfba5_m.jpg"},
"date_taken": "2013-01-22T20:42:26-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418163119/\" title=\"Duncan Keith\"><img src=\"http://farm9.staticflickr.com/8098/8418163119_644e3dfba5_m.jpg\" width=\"240\" height=\"160\" alt=\"Duncan Keith\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:51:45Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues duncankeith"
},
{
"title": "Patrick Kane",
"link": "http://www.flickr.com/photos/the_mel/8418159785/",
"media": {"m":"http://farm9.staticflickr.com/8225/8418159785_655f8d704f_m.jpg"},
"date_taken": "2013-01-22T20:22:55-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418159785/\" title=\"Patrick Kane\"><img src=\"http://farm9.staticflickr.com/8225/8418159785_655f8d704f_m.jpg\" width=\"240\" height=\"180\" alt=\"Patrick Kane\" /><\/a><\/p> ",
"published": "2013-01-27T04:50:10Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues patrickkane"
},
{
"title": "Marcus Kruger",
"link": "http://www.flickr.com/photos/the_mel/8419266288/",
"media": {"m":"http://farm9.staticflickr.com/8468/8419266288_c5c60ae3c7_m.jpg"},
"date_taken": "2013-01-22T20:43:23-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419266288/\" title=\"Marcus Kruger\"><img src=\"http://farm9.staticflickr.com/8468/8419266288_c5c60ae3c7_m.jpg\" width=\"240\" height=\"160\" alt=\"Marcus Kruger\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:55:51Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues marcuskruger"
},
{
"title": "Leddy, Sharp, Kruger, Saad",
"link": "http://www.flickr.com/photos/the_mel/8418177399/",
"media": {"m":"http://farm9.staticflickr.com/8334/8418177399_7a5c61e486_m.jpg"},
"date_taken": "2013-01-22T20:44:00-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418177399/\" title=\"Leddy, Sharp, Kruger, Saad\"><img src=\"http://farm9.staticflickr.com/8334/8418177399_7a5c61e486_m.jpg\" width=\"240\" height=\"160\" alt=\"Leddy, Sharp, Kruger, Saad\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:58:59Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues patricksharp marcuskruger nickleddy brandonsaad"
},
{
"title": "Johnny Oduya",
"link": "http://www.flickr.com/photos/the_mel/8419273830/",
"media": {"m":"http://farm9.staticflickr.com/8498/8419273830_9cddb2424a_m.jpg"},
"date_taken": "2013-01-22T20:44:04-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419273830/\" title=\"Johnny Oduya\"><img src=\"http://farm9.staticflickr.com/8498/8419273830_9cddb2424a_m.jpg\" width=\"240\" height=\"160\" alt=\"Johnny Oduya\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:59:51Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues johnnyoduya"
},
{
"title": "Patrick Sharp",
"link": "http://www.flickr.com/photos/the_mel/8419264604/",
"media": {"m":"http://farm9.staticflickr.com/8336/8419264604_6bb4aa52a4_m.jpg"},
"date_taken": "2013-01-22T20:43:08-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419264604/\" title=\"Patrick Sharp\"><img src=\"http://farm9.staticflickr.com/8336/8419264604_6bb4aa52a4_m.jpg\" width=\"240\" height=\"160\" alt=\"Patrick Sharp\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:54:59Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues patricksharp"
},
{
"title": "Nick Leddy",
"link": "http://www.flickr.com/photos/the_mel/8419262598/",
"media": {"m":"http://farm9.staticflickr.com/8237/8419262598_8ebb2c87cf_m.jpg"},
"date_taken": "2013-01-22T20:43:00-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419262598/\" title=\"Nick Leddy\"><img src=\"http://farm9.staticflickr.com/8237/8419262598_8ebb2c87cf_m.jpg\" width=\"240\" height=\"160\" alt=\"Nick Leddy\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:53:58Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues nickleddy"
},
{
"title": "One Goal",
"link": "http://www.flickr.com/photos/the_mel/8418160863/",
"media": {"m":"http://farm9.staticflickr.com/8238/8418160863_f9b21da89e_m.jpg"},
"date_taken": "2013-01-22T20:39:44-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418160863/\" title=\"One Goal\"><img src=\"http://farm9.staticflickr.com/8238/8418160863_f9b21da89e_m.jpg\" width=\"240\" height=\"160\" alt=\"One Goal\" /><\/a><\/p> ",
"published": "2013-01-27T04:50:41Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues jumbotron blackhawks scoreboard unitedcenter chicagoblackhawks stlouisblues"
},
{
"title": "Niklas Hjalmarsson",
"link": "http://www.flickr.com/photos/the_mel/8419259300/",
"media": {"m":"http://farm9.staticflickr.com/8052/8419259300_304d88c21c_m.jpg"},
"date_taken": "2013-01-22T20:42:34-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419259300/\" title=\"Niklas Hjalmarsson\"><img src=\"http://farm9.staticflickr.com/8052/8419259300_304d88c21c_m.jpg\" width=\"240\" height=\"160\" alt=\"Niklas Hjalmarsson\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:52:21Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues niklashjalmarsson"
},
{
"title": "Viktor Stalberg",
"link": "http://www.flickr.com/photos/the_mel/8419270004/",
"media": {"m":"http://farm9.staticflickr.com/8500/8419270004_3b2bc3f7f6_m.jpg"},
"date_taken": "2013-01-22T20:43:56-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419270004/\" title=\"Viktor Stalberg\"><img src=\"http://farm9.staticflickr.com/8500/8419270004_3b2bc3f7f6_m.jpg\" width=\"240\" height=\"160\" alt=\"Viktor Stalberg\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:57:51Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues viktorstalberg"
},
{
"title": "Brandon Saad",
"link": "http://www.flickr.com/photos/the_mel/8419268298/",
"media": {"m":"http://farm9.staticflickr.com/8353/8419268298_f3ffb30867_m.jpg"},
"date_taken": "2013-01-22T20:43:43-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419268298/\" title=\"Brandon Saad\"><img src=\"http://farm9.staticflickr.com/8353/8419268298_f3ffb30867_m.jpg\" width=\"240\" height=\"160\" alt=\"Brandon Saad\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:56:57Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues brandonsaad"
},
{
"title": "Brent Seabrook",
"link": "http://www.flickr.com/photos/the_mel/8418166625/",
"media": {"m":"http://farm9.staticflickr.com/8473/8418166625_c1a2169fbb_m.jpg"},
"date_taken": "2013-01-22T20:42:51-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418166625/\" title=\"Brent Seabrook\"><img src=\"http://farm9.staticflickr.com/8473/8418166625_c1a2169fbb_m.jpg\" width=\"240\" height=\"160\" alt=\"Brent Seabrook\" /><\/a><\/p> <p>Player Introductions<\/p>",
"published": "2013-01-27T04:53:18Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues brentseabrook"
},
{
"title": "Patrick Kane",
"link": "http://www.flickr.com/photos/the_mel/8418149731/",
"media": {"m":"http://farm9.staticflickr.com/8185/8418149731_e5ba673e52_m.jpg"},
"date_taken": "2013-01-22T20:20:30-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418149731/\" title=\"Patrick Kane\"><img src=\"http://farm9.staticflickr.com/8185/8418149731_e5ba673e52_m.jpg\" width=\"240\" height=\"160\" alt=\"Patrick Kane\" /><\/a><\/p> ",
"published": "2013-01-27T04:45:06Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues patrickkane"
},
{
"title": "Andrew Shaw",
"link": "http://www.flickr.com/photos/the_mel/8418140807/",
"media": {"m":"http://farm9.staticflickr.com/8232/8418140807_faa12801b7_m.jpg"},
"date_taken": "2013-01-22T20:19:00-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418140807/\" title=\"Andrew Shaw\"><img src=\"http://farm9.staticflickr.com/8232/8418140807_faa12801b7_m.jpg\" width=\"240\" height=\"160\" alt=\"Andrew Shaw\" /><\/a><\/p> ",
"published": "2013-01-27T04:40:33Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues andrewshaw"
},
{
"title": "Duncan Keith",
"link": "http://www.flickr.com/photos/the_mel/8419248768/",
"media": {"m":"http://farm9.staticflickr.com/8366/8419248768_789790ebea_m.jpg"},
"date_taken": "2013-01-22T20:21:42-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419248768/\" title=\"Duncan Keith\"><img src=\"http://farm9.staticflickr.com/8366/8419248768_789790ebea_m.jpg\" width=\"240\" height=\"160\" alt=\"Duncan Keith\" /><\/a><\/p> ",
"published": "2013-01-27T04:47:05Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues duncankeith"
},
{
"title": "Marcus Kruger",
"link": "http://www.flickr.com/photos/the_mel/8418151575/",
"media": {"m":"http://farm9.staticflickr.com/8514/8418151575_ef3c489536_m.jpg"},
"date_taken": "2013-01-22T20:20:47-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8418151575/\" title=\"Marcus Kruger\"><img src=\"http://farm9.staticflickr.com/8514/8418151575_ef3c489536_m.jpg\" width=\"240\" height=\"160\" alt=\"Marcus Kruger\" /><\/a><\/p> ",
"published": "2013-01-27T04:46:03Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues marcuskruger"
},
{
"title": "Patrick Kane",
"link": "http://www.flickr.com/photos/the_mel/8419250712/",
"media": {"m":"http://farm9.staticflickr.com/8096/8419250712_334dccf05d_m.jpg"},
"date_taken": "2013-01-22T20:22:01-08:00",
"description": " <p><a href=\"http://www.flickr.com/people/the_mel/\">the_mel<\/a> posted a photo:<\/p> <p><a href=\"http://www.flickr.com/photos/the_mel/8419250712/\" title=\"Patrick Kane\"><img src=\"http://farm9.staticflickr.com/8096/8419250712_334dccf05d_m.jpg\" width=\"240\" height=\"160\" alt=\"Patrick Kane\" /><\/a><\/p> ",
"published": "2013-01-27T04:48:07Z",
"author": "nobody@flickr.com (the_mel)",
"author_id": "8651939@N05",
"tags": "chicago hockey nhl blues blackhawks unitedcenter chicagoblackhawks stlouisblues patrickkane"
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment