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;
}
