Skip to content

Instantly share code, notes, and snippets.

@ronsims2
Created December 23, 2016 01:35
Show Gist options
  • Save ronsims2/c9948455f8ea6408fb6d8fbbf73fcb90 to your computer and use it in GitHub Desktop.
Save ronsims2/c9948455f8ea6408fb6d8fbbf73fcb90 to your computer and use it in GitHub Desktop.
Simon says for d3 donut charts
(function() {
var shuffle = function(items) {
var newOrder = [];
var usedNumbers = {};
var i = 0;
while (newOrder.length < items.length) {
i++;
var rando = Math.floor(Math.random() * items.length);
if (!usedNumbers[rando.toString()]) {
usedNumbers[rando.toString()] = true;
newOrder.push(rando);
}
}
return newOrder;
};
arcs = d3.selectAll('path');
var clicks = [];
arcs.on('click', function(d, i) {
clicks.push(i);
});
newOrder = shuffle(arcs[0]);
var count = 0;
var interval = setInterval(function() {
arc = d3.select(arcs[0][newOrder[count]]);
arc.attr('fill', function(d, i) {
d._fill = d.fill;
return d3.interpolate(d.fill, 'white')(0.35);
})
.transition()
.duration(300)
.attr('fill', function(d, i) {
d.fill = d._fill;
return d.fill;
});
count++;
if (count === newOrder.length) {
clearInterval(interval);
}
}, 900);
d3.select('text').on('click', function() {
var score = 0;
for (var i = 0; i < newOrder.length; i++) {
if (newOrder[i] === clicks[i]) {
score++;
}
}
if (score === newOrder.length) {
alert('Congrats you beat Simon');
} else {
alert('You lost to Simon!');
}
console.log(clicks, newOrder);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment