Interactive news developer, specialized in data analysis, visualization and storytelling
Published
Edited
Nov 28, 2019
5 stars
failure = {
const svg = selection.create('svg')
const foreignObject = svg.append('foreignObject')
.attr('width', width)
.attr('height', height);
const canvas = foreignObject.append('canvas')
const node = canvas.node().nodeName
const constructor = canvas.node().constructor.name
try {
const context = canvas.node().getContext('2d')
context.fillStyle = 'blue';
context.fillRect(0, 0, width, height);
} catch (error) {
return { svg, node, constructor, error };
}
}
failure.svg.node()
success = {
const svg = selection.create('svg')
const foreignObject = svg.append('foreignObject')
.attr('width', width)
.attr('height', height);
const canvas = foreignObject.node().appendChild(document.createElement('canvas'));
const node = canvas.nodeName
const constructor = canvas.constructor.name
const context = canvas.getContext('2d')
context.fillStyle = 'blue';
context.fillRect(0, 0, width, height);
return { svg, node, constructor };
}
success.svg.node()
nonIssue = {
const div = selection.create('div')
const canvas = div.append('canvas')
const context = canvas.node().getContext('2d')
// Debugging
const node = canvas.node().nodeName
const constructor = canvas.node().constructor.name
context.fillStyle = 'blue';
context.fillRect(0, 0, width, height);
return { div, node, constructor };
}
nonIssue.div.node()
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.
