Skip to content

Instantly share code, notes, and snippets.

@richshaw

richshaw/README.md

Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save richshaw/0a7a1dd78bf1882c67fa to your computer and use it in GitHub Desktop.
Save richshaw/0a7a1dd78bf1882c67fa to your computer and use it in GitHub Desktop.
Download ZIP
#Beautiful images bubble
Raw
README.md

A sample of 1000 #beautiful images were automatically analysed using an automated visual analytics API from Alchemy. Size of bubbles represents frequency of tag.

JSON data was aggreated from a Mongo DB collection hence the lazy _id.

Raw
beautifulcount.json
[
{
"_id": "person",
"count": 493
},
{
"_id": "sky",
"count": 46
},
{
"_id": "portrait",
"count": 43
},
{
"_id": "sport",
"count": 40
},
{
"_id": "sunset",
"count": 40
},
{
"_id": "nature",
"count": 38
},
{
"_id": "flower",
"count": 28
},
{
"_id": "model",
"count": 23
},
{
"_id": "girl",
"count": 21
},
{
"_id": "beach",
"count": 17
},
{
"_id": "cat",
"count": 17
},
{
"_id": "dog",
"count": 16
},
{
"_id": "food",
"count": 15
},
{
"_id": "sun",
"count": 14
},
{
"_id": "cloud",
"count": 13
},
{
"_id": "wedding",
"count": 12
},
{
"_id": "night",
"count": 11
},
{
"_id": "building",
"count": 11
},
{
"_id": "animal",
"count": 10
},
{
"_id": "tree",
"count": 9
},
{
"_id": "car",
"count": 9
},
{
"_id": "moon",
"count": 9
},
{
"_id": "nail",
"count": 8
},
{
"_id": "sea",
"count": 7
},
{
"_id": "baby",
"count": 7
},
{
"_id": "garden",
"count": 7
},
{
"_id": "fashion",
"count": 7
},
{
"_id": "city",
"count": 6
},
{
"_id": "mountain",
"count": 6
},
{
"_id": "pet",
"count": 6
},
{
"_id": "quote",
"count": 5
},
{
"_id": "party",
"count": 5
},
{
"_id": "doll",
"count": 5
},
{
"_id": "handmade",
"count": 4
},
{
"_id": "sign",
"count": 4
},
{
"_id": "light",
"count": 4
},
{
"_id": "church",
"count": 4
},
{
"_id": "river",
"count": 4
},
{
"_id": "rose",
"count": 4
},
{
"_id": "auto",
"count": 4
},
{
"_id": "eyes",
"count": 4
},
{
"_id": "horse",
"count": 3
},
{
"_id": "water",
"count": 3
},
{
"_id": "drawing",
"count": 3
},
{
"_id": "train",
"count": 3
},
{
"_id": "firework",
"count": 3
},
{
"_id": "swim",
"count": 2
},
{
"_id": "autumn",
"count": 2
},
{
"_id": "tower",
"count": 2
},
{
"_id": "skyline",
"count": 2
},
{
"_id": "eye",
"count": 2
},
{
"_id": "guitar",
"count": 2
},
{
"_id": "snow",
"count": 2
},
{
"_id": "railway",
"count": 2
},
{
"_id": "tulip",
"count": 2
},
{
"_id": "luna",
"count": 2
},
{
"_id": "hot",
"count": 2
},
{
"_id": "bush",
"count": 2
},
{
"_id": "bird",
"count": 2
},
{
"_id": "necklace",
"count": 2
},
{
"_id": "jewelry",
"count": 2
},
{
"_id": "pink",
"count": 2
},
{
"_id": "normal",
"count": 2
},
{
"_id": "beads",
"count": 2
},
{
"_id": "white",
"count": 2
},
{
"_id": "kitten",
"count": 2
},
{
"_id": "iphone",
"count": 2
},
{
"_id": "red",
"count": 2
},
{
"_id": "nail polish",
"count": 2
},
{
"_id": "basketball",
"count": 2
},
{
"_id": "orchid",
"count": 2
},
{
"_id": "tabby",
"count": 1
},
{
"_id": "pizza",
"count": 1
},
{
"_id": "cross",
"count": 1
},
{
"_id": "suit",
"count": 1
},
{
"_id": "park",
"count": 1
},
{
"_id": "peony",
"count": 1
},
{
"_id": "edgewood",
"count": 1
},
{
"_id": "dress",
"count": 1
},
{
"_id": "rapeseed",
"count": 1
},
{
"_id": "dome",
"count": 1
},
{
"_id": "number",
"count": 1
},
{
"_id": "bike",
"count": 1
},
{
"_id": "cta",
"count": 1
},
{
"_id": "sunrise",
"count": 1
},
{
"_id": "lampwork",
"count": 1
},
{
"_id": "derby",
"count": 1
},
{
"_id": "hockey",
"count": 1
},
{
"_id": "surf",
"count": 1
},
{
"_id": "instagram",
"count": 1
},
{
"_id": "yellow",
"count": 1
},
{
"_id": "rock",
"count": 1
},
{
"_id": "polaroid",
"count": 1
},
{
"_id": "full",
"count": 1
},
{
"_id": "house",
"count": 1
},
{
"_id": "swimming",
"count": 1
},
{
"_id": "photo",
"count": 1
},
{
"_id": "glass",
"count": 1
},
{
"_id": "wine",
"count": 1
},
{
"_id": "meme",
"count": 1
},
{
"_id": "machine",
"count": 1
},
{
"_id": "kayak",
"count": 1
},
{
"_id": "law",
"count": 1
},
{
"_id": "gel",
"count": 1
},
{
"_id": "palm",
"count": 1
},
{
"_id": "truck",
"count": 1
},
{
"_id": "spring",
"count": 1
},
{
"_id": "man",
"count": 1
},
{
"_id": "golf",
"count": 1
},
{
"_id": "poppy",
"count": 1
},
{
"_id": "raw",
"count": 1
},
{
"_id": "border",
"count": 1
},
{
"_id": "highway",
"count": 1
},
{
"_id": "rugby",
"count": 1
},
{
"_id": "road",
"count": 1
},
{
"_id": "pop",
"count": 1
},
{
"_id": "route",
"count": 1
},
{
"_id": "export",
"count": 1
},
{
"_id": "mma",
"count": 1
},
{
"_id": "shield",
"count": 1
},
{
"_id": "bikini",
"count": 1
},
{
"_id": "dalmatian",
"count": 1
},
{
"_id": "beer",
"count": 1
},
{
"_id": "poodle",
"count": 1
},
{
"_id": "football",
"count": 1
},
{
"_id": "husky",
"count": 1
},
{
"_id": "ferrari",
"count": 1
},
{
"_id": "kitty",
"count": 1
},
{
"_id": "reflection",
"count": 1
},
{
"_id": "landscape",
"count": 1
},
{
"_id": "toy",
"count": 1
},
{
"_id": "camera",
"count": 1
},
{
"_id": "painting",
"count": 1
},
{
"_id": "top of the rock",
"count": 1
},
{
"_id": "palace",
"count": 1
},
{
"_id": "amaro",
"count": 1
},
{
"_id": "ski",
"count": 1
},
{
"_id": "walker",
"count": 1
},
{
"_id": "apple",
"count": 1
},
{
"_id": "real estate",
"count": 1
},
{
"_id": "wrestling",
"count": 1
},
{
"_id": "fruit",
"count": 1
},
{
"_id": "earring",
"count": 1
},
{
"_id": "street",
"count": 1
},
{
"_id": "west hollywood",
"count": 1
},
{
"_id": "siamese",
"count": 1
},
{
"_id": "panther",
"count": 1
},
{
"_id": "illustration",
"count": 1
},
{
"_id": "sailing",
"count": 1
},
{
"_id": "tour",
"count": 1
},
{
"_id": "collie",
"count": 1
},
{
"_id": "field",
"count": 1
},
{
"_id": "window",
"count": 1
},
{
"_id": "family",
"count": 1
},
{
"_id": "hair",
"count": 1
},
{
"_id": "woman",
"count": 1
},
{
"_id": "folk",
"count": 1
},
{
"_id": "cricket",
"count": 1
},
{
"_id": "duck",
"count": 1
},
{
"_id": "insect",
"count": 1
},
{
"_id": "gig",
"count": 1
},
{
"_id": "band",
"count": 1
},
{
"_id": "diver",
"count": 1
},
{
"_id": "mum",
"count": 1
},
{
"_id": "chrysanthemum",
"count": 1
},
{
"_id": "bicycle",
"count": 1
},
{
"_id": "scuba",
"count": 1
},
{
"_id": "volleyball",
"count": 1
},
{
"_id": "border collie",
"count": 1
},
{
"_id": "survey",
"count": 1
},
{
"_id": "anemone",
"count": 1
},
{
"_id": "eiffel tower",
"count": 1
},
{
"_id": "forest",
"count": 1
},
{
"_id": "malamute",
"count": 1
},
{
"_id": "bumper",
"count": 1
},
{
"_id": "fall",
"count": 1
},
{
"_id": "import",
"count": 1
},
{
"_id": "diving",
"count": 1
},
{
"_id": "run",
"count": 1
},
{
"_id": "fish",
"count": 1
},
{
"_id": "plant",
"count": 1
},
{
"_id": "photoshoot",
"count": 1
},
{
"_id": "business",
"count": 1
},
{
"_id": "engagement",
"count": 1
},
{
"_id": "full moon",
"count": 1
},
{
"_id": "singer",
"count": 1
},
{
"_id": "tattoo",
"count": 1
},
{
"_id": "versailles",
"count": 1
},
{
"_id": "candy",
"count": 1
},
{
"_id": "black",
"count": 1
},
{
"_id": "jacket",
"count": 1
},
{
"_id": "rail",
"count": 1
},
{
"_id": "eiffel",
"count": 1
},
{
"_id": "dandelion",
"count": 1
},
{
"_id": "jaguar",
"count": 1
},
{
"_id": "character",
"count": 1
},
{
"_id": "hamster",
"count": 1
},
{
"_id": "lake",
"count": 1
},
{
"_id": "island",
"count": 1
},
{
"_id": "map",
"count": 1
},
{
"_id": "love",
"count": 1
},
{
"_id": "leopard",
"count": 1
},
{
"_id": "heart",
"count": 1
},
{
"_id": "lilac",
"count": 1
},
{
"_id": "cute",
"count": 1
}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 889,
height = 500,
padding = 1.5, // separation between same-color nodes
clusterPadding = 6, // separation between nodes
maxRadius = 12;
var n = 200, // total number of nodes
m = 1; // number of distinct clusters
var color = d3.scale.category10()
.domain(d3.range(m));
// The largest node for each cluster.
var clusters = new Array(m);
d3.json("beautifulcount.json", function(error, root) {
var nodes = root.map(function(x) {
var i = Math.floor(Math.random() * m),
r = Math.log(x.count) * maxRadius,
d = {cluster: i, radius: r, text: x._id, count: x.count};
if (!clusters[i] || (r > clusters[i].radius)) clusters[i] = d;
return d;
});
// Use the pack layout to initialize node positions.
d3.layout.pack()
.sort(null)
.size([width, height])
.children(function(d) { return d.values; })
.value(function(d) { return d.radius * d.radius; })
.nodes({values: d3.nest()
.key(function(d) { return d.cluster; })
.entries(nodes)});
var force = d3.layout.force()
.nodes(nodes)
.size([width, height])
.gravity(.02)
.charge(0)
.on("tick", tick)
.start();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll("circle")
.data(nodes)
.enter().append("circle")
.filter(function(d){ return d.count > 1; })
.style("fill", function(d) { return '#f03838'; })
.call(force.drag);
var label = svg.selectAll("g")
.data(nodes)
.enter().append("g")
.filter(function(d){ return d.count > 1; })
.call(force.drag);
label.append("text")
.style("text-anchor", "middle")
//Font size based on radius
.style("font-size", function(d) { return Math.max(8, d.r / 2) + "px"; })
.style("width", function(d) { return d.r * 2.5 + "px"; })
.text(function(d) { return d.text; })
label.append("text")
.attr("dy", function(d) { return Math.max(8, d.r / 2) + "px"; })
.style("text-anchor", "middle")
//Font size based on radius
.style("font-size", function(d) { return Math.max(8, d.r / 4) + "px"; })
.style("width", function(d) { return d.r * 2.5 + "px"; })
.text(function(d) { return d.count; })
node.transition()
.duration(750)
.delay(function(d, i) { return i * 5; })
.attrTween("r", function(d) {
var i = d3.interpolate(0, d.radius);
return function(t) { return d.radius = i(t); };
});
function tick(e) {
node
//Gravity changed to match wider dimensions
.each(gravity(e.alpha * .1))
.each(collide(.5))
//Max min to stay within bounding box
.attr("cx", function(d) { return d.x = Math.max(d.r, Math.min(width - d.r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(d.r, Math.min(height - d.r, d.y)); });
label
.each(gravity(e.alpha * .1))
.each(collide(.5))
.attr("transform", function(d) {
var x = Math.max(d.r, Math.min(width - d.r, d.x));
var y = Math.max(d.r, Math.min(height - d.r, d.y));
return 'translate(' + x + ',' + y + ')';
});
}
// Move d to be adjacent to the cluster node.
function cluster(alpha) {
return function(d) {
var cluster = clusters[d.cluster];
if (cluster === d) return;
var x = d.x - cluster.x,
y = d.y - cluster.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + cluster.radius;
if (l != r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
cluster.x += x;
cluster.y += y;
}
};
}
// Resolves collisions between d and all other circles.
function collide(alpha) {
var quadtree = d3.geom.quadtree(nodes);
return function(d) {
var r = d.radius + maxRadius + Math.max(padding, clusterPadding),
nx1 = d.x - r,
nx2 = d.x + r,
ny1 = d.y - r,
ny2 = d.y + r;
quadtree.visit(function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== d)) {
var x = d.x - quad.point.x,
y = d.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = d.radius + quad.point.radius + (d.cluster === quad.point.cluster ? padding : clusterPadding);
if (l < r) {
l = (l - r) / l * alpha;
d.x -= x *= l;
d.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
});
};
}
// Custom gravity to favor a non-square aspect ratio.
function gravity(alpha) {
var cx = width / 2,
cy = height / 2,
ax = alpha / 4,
ay = alpha;
return function(d) {
d.x += (cx - d.x) * ax;
d.y += (cy - d.y) * ay;
};
}
}); //End JSON
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment