Cheminformatics, Graph, Network, D3.js, CC BY 4.0
Public
Edited
Aug 11, 2018
1 star
// Basic version
basic = {
const cellWidth = 10;
const cellHeight = 10;
const rows = 30;
const cols = 40;
const generations = 600;
const genTime = 0.1; // Seconds
d3.select('#glfield')
.attr('width', cellWidth * cols)
.attr('height', cellHeight * rows);
function update(selection, data) {
const cells = selection
.selectAll("rect").data(data);
cells.exit().remove();
cells.enter().append("rect")
.attr('width', cellWidth)
.attr('height', cellHeight)
.merge(cells)
.attr('x', d => d[0] * cellWidth)
.attr('y', d => d[1] * cellHeight)
.style("fill", "black");
}
let gen = pattern
const end = generations * genTime * 1000;
const interval = genTime * 1000;
d3.select('#glfield').call(update, gen);
// return
const t = d3.interval(elapsed => {
if (elapsed > end || !gen.length) t.stop();
gen = tick(gen);
d3.select('#glfield').call(update, gen);
}, interval);
}
// Show spawning cells (red) and despawning cells (blue)
transition = {
const cellWidth = 10;
const cellHeight = 10;
const rows = 30;
const cols = 40;
const generations = 60;
const genTime = 1; // Seconds
d3.select('#glfield2')
.attr('width', cellWidth * cols)
.attr('height', cellHeight * rows);
function update(selection, data) {
const cells = selection
.selectAll("rect").data(data, d => `${d[0]}_${d[1]}`);
cells.exit()
.style('fill', 'blue')
.style('opacity', 1)
.transition()
.duration(genTime * 500)
.style('opacity', 0)
.on('end', function () {
d3.select(this).remove();
});
cells.enter().append("rect")
.attr('x', d => d[0] * cellWidth)
.attr('y', d => d[1] * cellHeight)
.attr('width', cellWidth)
.attr('height', cellHeight)
.style('fill', 'red')
.transition()
.duration(genTime * 500)
.style("fill", "black");
}
let gen = pattern
const end = generations * genTime * 1000;
const interval = genTime * 1000;
d3.select('#glfield2').call(update, gen);
// return
const t = d3.interval(elapsed => {
if (elapsed > end || !gen.length) t.stop();
gen = tick(gen);
d3.select('#glfield2').call(update, gen);
}, interval);
}
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.
