http://jsfiddle.net/annedeboer/8b6x7v17/3/

by Anne de Boer

HTML

<body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <iframe src="http://www.ecksenis.net/def_shuffle/fellowship_of_the_thing/fellowship_of_the_thing.html"></iframe>
    <iframe src="http://www.ecksenis.net/def_shuffle/sound_2/sound_html/index.html"></iframe>
    <iframe src="http://www.ecksenis.net/def_shuffle/sound_2/sound_html/index.html"></iframe>
    <div class="a"></div>

</body>

CSS

body {
    background-color:background: #c5deea; /* Old browsers */
background: -moz-linear-gradient(top,  #c5deea 0%, #8abbd7 31%, #066dab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* IE6-9 */
;
}

.a{
width:200px; 
height:300px; 
background-image :url(http://ecksenis.net/20150624_172801.jpg);
    background-size: cover;
    position: absolute;
    z-index:-1;
}

.cell-border {
    fill: none;
    stroke: #000;
    color:#000;
}
.cell-center {
    fill: none;
    stroke: #000;
    color:#000;
}
.label {
    color:#000;
    font: 11px sans-serif;
}
.label--top {
    text-anchor: middle;
    color:#000;
}
.label--right {
    text-anchor: start;
    color:#000;
}
.label--bottom {
    text-anchor: middle;
    color:#000;
}
.label--left {
    text-anchor: end;
    color:#000;
}
body {
    margin:0px;
}
iframe {
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    width:100%;
    height:100%;
    border:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
}

JavaScript

var width = 1000,
    height = 1000;

var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var miliseconds = now.getMilliseconds();
var day = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();

var randomX = d3.random.normal(width / 3, (seconds * day)),
    randomY = d3.random.normal(height / 2, (minutes * hours));

var data = d3.range(miliseconds)
    .map(function () {
    return [randomX(), randomY()];
})
    .filter(function (d) {
    return 0 <= d[0] && d[0] <= width && 0 <= d[1] && d[1] <= height;
});

var cells = d3.geom.voronoi()
    .clipExtent([
    [-1, -1],
    [width + 1, height + 1]
])
(data)
    .map(d3.geom.polygon);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var cell = svg.append("g")
    .attr("class", "cell")
    .selectAll("g")
    .data(cells)
    .enter().append("g");

cell.append("path")
    .attr("class", "cell-center")
    .attr("d", function (d) {
    return "M" + d.centroid() + "L" + d.point;
});

cell.append("path")
    .attr("class", "cell-border")
    .attr("d", function (d) {
    return "M" + d.join("L") + "Z";
});

svg.append("g")
    .attr("class", "dot")
    .selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("transform", function (d) {
    return "translate(" + d + ")";
})
    .attr("r", 2.5);

svg.append("g")
    .attr("class", "label")
    .selectAll("text")
    .data(cells.filter(function (d) {
    return d.area() > 2000;
}))
    .enter().append("text")
    .attr("class", function (d) {
    var centroid = d.centroid(),
        point = d.point,
        angle = Math.round(Math.atan2(centroid[1] - point[1], centroid[0] - point[0]) / Math.PI * 2);
    return "label--" + (d.orient = angle === 0 ? "right" : angle === -1 ? "top" : angle === 1 ? "bottom" : "left");
})
    .attr("transform", function (d) {
    return "translate(" + d.point + ")";
})
    .attr("dy", function...