n=1800
parent_view = {
const parent = DOM.element('div');
return parent;
}
svg = {
return d3.select(parent_view).append("svg")
.attr("width", width)
.attr("height", height);
}
databind(data)
databind = function(data) {
let colourScale = d3.scaleSequential(d3.interpolateSpectral).domain(d3.extent(data, d => d.value));
var join = svg.selectAll('.rect').data(data);
console.log(join);
var enterSel = join.enter()
.append('rect')
.attr('class', 'rect')
.attr("x", (d, i) => {
console.log("x");
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(500)
.attr('width', layout.cellSize)
.attr('height',layout.cellSize)
.attr('fill', (d) => colourScale(d.value) );
var exitSel = join.exit()
.transition(500)
.attr('width', 0)
.attr('height', 0)
.remove();
}
console.log(custom.node())
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=200
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.
