Bertha 01 Quadrat, Spass mit d3

var dim = []; var faktor = 10; toDataUrl(wp_custom.upload_dir.baseurl + '/bertha_01.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]); console.log(myValue); svg.selectAll("circle").data(myValue).enter().append("rect") .attr("rx", 0) .attr("ry", 0) .attr("x", function(d) { return Math.random() * size[0]; }) .attr("y", function(d) { return Math.random() * size[1]; }) .attr("width",function(d) { return Math.round(d.radius*faktor*2); }) .attr("height",function(d) { return Math.round(d.radius*faktor*2); }) .attr("fill", function(d) { return d3.rgb(d.r,d.g,d.b); }) .transition().duration(1000) .delay(function(d, i) { return i * 1; }) .attr("width", function(d) { return Math.round(d.radius*faktor*1.2); }) .attr("height", function(d) { return Math.round(d.radius*faktor*1.2); }) .attr("x",function(d) { return d.spalte*faktor - (Math.round(d.radius*faktor*1.4)/2); }) .attr("y",function(d) { return d.reihe*faktor - (Math.round(d.radius*faktor*1.4)/2); }) 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; }