Bertha 03 kreis, Spass mit d3.js

var dim = []; var faktor = 10; toDataUrl(wp_custom.upload_dir.baseurl + '/bertha_03.png', function(myValue){ var size = [dim[0]*faktor, dim[1]*faktor] var svg = d3.select("#kreise") .append("svg") .attr("id", "chart") .attr("viewBox","0 0 " + size[0] + " " + size[1]) .attr("preserveAspectRatio","xMidYMid meet") .attr("width",size[0]) .attr("height",size[1]); svg.selectAll("circle").data(myValue).enter().append("circle") .attr("cx", function(d) { return Math.random() * size[0]; }) .attr("cy", function(d) { return Math.random() * size[1]; }) .attr("r", function(d) { return Math.round(d.radius*faktor); }) .attr("fill", function(d) { return d3.rgb(d.r,d.g,d.b); }) .transition().duration(1000) .delay(function(d, i) { return i * 1; }) .attr("cx", function(d) { return d.spalte*faktor +faktor/2; }) .attr("cy", function(d) { return d.reihe*faktor +faktor/2; }) .attr("r", function(d) { return Math.round(d.radius*faktor*.7); }); var aspect = size[0] / size[1], chart = d3.select('#chart'); d3.select(window) .on("resize", function() { var targetWidth = chart.node().parentNode.getBoundingClientRect().width; chart.attr("width", targetWidth); chart.attr("height", targetWidth / aspect); }); }); function toDataUrl(url, callback){ var img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = function(){ var canvas = document.createElement('CANVAS'); canvas.width = this.width; // or 'width' if you want a special/scaled size canvas.height = this.height; // or 'height' if you want a special/scaled size dim.push(canvas.width); dim.push(canvas.height); var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data; var myArray = []; counter = 0; for(var i = 0; i < imageData.length; i+=4){ r = imageData[i]; g = imageData[i+1]; b = imageData[i+2]; a = imageData[i+3]; spalte = (counter)% dim[0], reihe = Math.floor((counter)/dim[0]), radius = (256-((r+g+b)/3))/255, myArray.push({'r':r,'g':g,'b':b,'a':a,'spalte':spalte,'reihe':reihe,'radius':radius}); counter ++; } callback(myArray); canvas = null; }; img.src = url; }