Published
Edited
Nov 16, 2019
1 fork
3 stars
n=800
parent_view = {
const parent = DOM.element('div');
return parent;
}
first_call = {
databind(data);
var t = d3.timer((elapsed) => {
draw();
if (elapsed > 300) t.stop();
});
}
canvas = {
return d3.select(parent_view).append("canvas")
.attr("width", width)
.attr("height", height);
}
context= {
return canvas.node().getContext('2d');
}
draw = function() {
context.clearRect(0, 0, width, height);
var elements = custom.selectAll('custom.rect');
elements.each( (d,i, l) => {
var node = d3.select(l[i]);
context.fillStyle = node.attr('fillStyle');
context.fillRect(node.attr('x'), node.attr('y'), node.attr('width'), node.attr('height'));
});
}
databind = function(data) {
let colourScale = d3.scaleSequential(d3.interpolateSpectral).domain(d3.extent(data, d => d.value));
var join = custom.selectAll('.rect').data(data);
var enterSel = join.enter()
.append('custom')
.attr('class', 'rect')
.attr("x", (d, i) => {
var x0 = Math.floor(i / 100) % 10;
var x1 = Math.floor(i % 10);
return layout.groupSpacing * x0 + (layout.cellSpacing + layout.cellSize) * (x1 + x0 * 10);
})
.attr("y", (d, i) => {
var y0 = Math.floor(i / 1000);
var y1 = Math.floor(i % 100 / 10);
return layout.groupSpacing * y0 + (layout.cellSpacing + layout.cellSize) * (y1 + y0 * 10);
})
.attr('width', 0)
.attr('height', 0);
join
.merge(enterSel)
.transition(900)
.attr('width', layout.cellSize)
.attr('height',layout.cellSize)
.attr('fillStyle', (d) => colourScale(d.value) );
var exitSel = join.exit()
.transition(900)
.attr('width', 0)
.attr('height', 0)
.remove();
}
custom = {
var customBase = document.createElement('custom');
return d3.select(customBase);
}
layout = ({
groupSpacing: 4,
cellSpacing: 2,
offsetTop: height / 5,
cellSize: Math.floor((width - 11 * 4) / 100) - 2
})
data = d3.range(n).map(d=> {
return {"value": d};
})
height=340
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
