console
var feelings = [':grinning:', ':grimacing:', ':grin:', ':joy:', ':smiley:', ':smile:', ':sweat_smile:', ':laughing:', ':innocent:', ':wink:', ':blush:', ':slight_smile:', ':upside_down:', ':relaxed:', ':yum:', ':relieved:', ':heart_eyes:', ':kissing_heart:', ':kissing:', ':kissing_smiling_eyes:', ':kissing_closed_eyes:', ':stuck_out_tongue_winking_eye:', ':stuck_out_tongue_closed_eyes:', ':stuck_out_tongue:', ':money_mouth:', ':nerd:', ':sunglasses:', ':hugging:', ':smirk:', ':no_mouth:', ':neutral_face:', ':expressionless:', ':unamused:', ':rolling_eyes:', ':thinking:', ':flushed:', ':disappointed:', ':worried:', ':angry:', ':rage:', ':pensive:', ':confused:', ':slight_frown:', ':frowning2:', ':persevere:', ':confounded:', ':tired_face:', ':weary:', ':triumph:', ':open_mouth:', ':scream:', ':fearful:', ':cold_sweat:', ':hushed:', ':frowning:', ':anguished:', ':cry:', ':disappointed_relieved:', ':sleepy:', ':sweat:', ':sob:', ':dizzy_face:', ':astonished:', ':zipper_mouth:', ':mask:', ':thermometer_face:', ':head_bandage:', ':sleeping:'];
feelings.reverse();
feelings = feelings.map(function(feeling) {
return {
feeling: feeling,
imageUrl: emojione.shortnameToImage(feeling).match(/src="(.*)"/)[1]
};
});
var width = 500;
var height = 500;
var nodes = [];
var links = [];
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
var node = svg.selectAll(".node");
var force = d3.layout.force()
.nodes(nodes)
.links(links)
.size([width, height])
.on("tick", tick)
.linkStrength(0.1)
.friction(0.9)
.linkDistance(40)
.charge(-60)
.gravity(0.1)
.theta(0.8)
.alpha(0.1);
function start() {
node = node.data(force.nodes(), function(d) {
return d.index;
});
node.enter()
.append("svg:image")
.attr("xlink:href", function(d) {
return d.imageUrl;
})
.attr("class", function(d) {
return "node";
})
.attr("width", 36)
.attr("height", 36)
node.exit().remove();
node.call(force.drag)
.on("mousedown", function() {
d3.event.stopPropagation();
});
force.start();
}
function tick() {
node.attr("x", function(d) {
return d.x;
})
.attr("y", function(d) {
return d.y;
});
}
function getInitialPosition() {
var position = {};
var dir = Math.floor(Math.random() * 4);
if (dir === 1) {
position.x = Math.random() * width;
position.y = 0;
} else if (dir === 2) {
position.x = Math.random() * width;
position.y = height;
} else if (dir === 3) {
position.x = 0;
position.y = Math.random() * height;
} else if (dir === 4) {
position.x = width;
position.y = Math.random() * height;
}
return position;
}
var delay = 1000;
function addPerson() {
var feeling = feelings.pop();
var position = getInitialPosition();
feeling.x = position.x;
feeling.y = position.y;
nodes.push(feeling);
start();
if (feelings.length > 0) {
setTimeout(function() {
addPerson();
}, delay);
if (delay > 100) {
delay -= 100;
}
}
}
addPerson();
<script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<svg>
</svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
<script src='//cdn.jsdelivr.net/emojione/2.1.4/lib/js/emojione.min.js'></script>
svg {
margin: 0 auto;
display: block;
max-width: 100%;
}