Published
Edited
Sep 23, 2021
28 stars
canvas2 = {
await visibility();
const n = hexData.length*2;
const points = points_0.slice();
const delaunay = new d3.Delaunay(points);
const context = DOM.context2d(w, h);
const context_base = DOM.context2d(w, h);
var color_background = palette.base;
var color_polygonfill = palette.base;
var color_shadow = palette.dark;
var color_hexLines = d3.rgb(palette.base).darker(0.75);
var color_cellLines = palette.dark;
var color_cellLines = palette.base;
if(colorby == 'nothingContrast'){
color_background = palette.dark;
color_polygonfill = palette.dark;
color_hexLines = d3.rgb(palette.dark).brighter(2);
}
context.lineCap = "round";
context.lineJoin = "round";
// create base canvas (all others will layer on top)
context_base.fillStyle = color_background;
context_base.fillRect(0,0,w,h);
context_base.fillStyle = color_polygonfill;
context_base.shadowColor = color_shadow;
context_base.shadowBlur = m+r_max;
context_base.beginPath();
for (var ii=0; ii<unionPolygon.length; ii++){
context_base.lineTo(unionPolygon[ii][0], unionPolygon[ii][1])
}
context_base.fill();
for (var hex of hexData){
context_base.strokeStyle = color_hexLines;
context_base.beginPath();
for (var ii=1/6; ii<2.2; ii+=1/3) context_base.lineTo(hex.x+(r_max+0.5)*Math.cos(ii*Math.PI),
hex.y+(r_max+0.5)*Math.sin(ii*Math.PI));
context_base.lineWidth = 1;
context_base.stroke();
if(centroids){
context_base.beginPath();
context_base.arc(hex.x, hex.y, 3, 0, 2 * Math.PI);
context_base.lineWidth = 2;
context_base.strokeStyle = color_hexLines;
context_base.stroke();
}
}
const voronoi = delaunay.voronoi([-1000, -1000, w+1000, h+1000]); //bigger bounding box avoids weird clipping
for (let k = 0; k < 5500; ++k) {
// background color
context.drawImage(context_base.canvas,0,0,w,h);
// master polygon color
/*
context.strokeStyle = "#aaaaaaa";
context.fillStyle = color_polygonfill;
context.shadowColor = color_shadow;
context.shadowBlur = m+r_max;
context.beginPath();
for (var ii=0; ii<unionPolygon.length; ii++){
context.lineTo(unionPolygon[ii][0], unionPolygon[ii][1])
}
context.fill();
*/
context.lineWidth = 1;
context.shadowBlur = 0;
if(colorby == 'area'){
var colorScale = d3.scaleLinear()
.domain([0, 0.9*hexarea, 0.98*hexarea,
hexarea,
1.02*hexarea, 1.1*hexarea, 100000]) // area
.range([(palette.accnt1+"bb"), (palette.accnt1+"99"), (palette.accnt1+"66"),
(palette.base+"33"),
(palette.accnt2+"66"), (palette.accnt2+"99"), (palette.accnt2+"bb")])
}else{
var colorScale = d3.scaleLinear()
.domain([0,0.01*r_max,0.05*r_max,200]) // dist
.range(["#ffffff00",
(palette.accnt1+"66"),
(palette.accnt1+"bb"),
(palette.accnt1+"bb")])
}
var maxDist = 0;
var minArea = w*h*2;
var maxArea = 0;
for (let i = 0; i < n; i += 2) {
const cell = voronoi.cellPolygon(i >> 1);
const cellClipped = polygonClip(cell.reverse(), unionPolygon.reverse());
if (cell === null) continue;
const x0 = points[i], y0 = points[i + 1];
var [x1, y1] = d3.polygonCentroid(cellClipped);
points[i] = x0 + (x1 - x0) * omega;
points[i + 1] = y0 + (y1 - y0) * omega;
const dist = Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2));
maxDist = Math.max(maxDist, dist);
var NN = cellClipped.length;
var AA = 0;
for (var ii=0; ii<(NN-1); ii++){
AA += (cellClipped[ii][0]*cellClipped[(ii+1) % NN][1] -
cellClipped[(ii+1) % NN][0]*cellClipped[ii][1])/2
}
AA = Math.abs(AA);
minArea = Math.min(minArea, AA);
maxArea = Math.max(maxArea, AA);
context.beginPath();
context.strokeStyle = color_cellLines;
if(colorby == 'area'){
context.fillStyle = colorScale(AA);
}else if(colorby == 'movement'){
context.fillStyle = colorScale(Math.abs(dist));
}else{
context.fillStyle = "#ffffff00"
if(colorby == 'nothingContrast'){
context.fillStyle = palette.base+"ff";
context.strokeStyle = palette.dark;
}
}
var myline = d3.line()
.curve(d3.curveLinear)
.x(d => d[0])
.y(d => d[1])
.context(context);
//myline(cellClipped.slice((isGooey) ? 1 : 0));
//myline(removeDupes(cellClipped));
var deduped = removeDupes(cellClipped);
var chaikinpoly = chaikin(deduped, chaikinIterations);
chaikinpoly.push(chaikinpoly[0]);
myline(chaikinpoly);
//myline(chaikin(removeDupes(cellClipped), 3))
context.lineWidth = 3;
context.fill();
context.stroke();
context.lineWidth = 2;
if(centroids){
context.beginPath();
context.arc(points[i], points[i+1], 3, 0, 2 * Math.PI);
context.fillStyle = color_cellLines;
context.fill();
}
}
// if we good,
if(progress){
context.fillStyle = color_cellLines;
context.textAlign = 'left';
context.font = "30px Arial";
if (maxDist>0.02){
context.fillText("⏩", 10, 30);
}else{
context.fillText("⏹", 10, 30);
}
if ((minArea>(.9999*hexarea))&(maxArea<(1.0001*hexarea))){
context.fillText("👍", 50, 30);
}else{
context.fillText("👎", 50, 30);
}
}
if (credits){
context.textAlign = 'end';
context.fillStyle = color_hexLines;
context.font = "bold 14px Arial";
context.fillText("@mattdzugan", w-10, h-10);
context.fillText("@relaxagons", w-10, h-28);
}
yield context.canvas;
voronoi.update();
} // end time loop
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.