viewof screenshot = {
let canvas = DOM.canvas(width * window.devicePixelRatio, 50);
canvas.style.cursor = "pointer";
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillStyle = "#4196B4";
ctx.textAlign = "center";
ctx.fillText(
"Click here to capture a screenshot!",
canvas.width / 2,
canvas.height / 2
);
// Request media
const capture = () => {
navigator.mediaDevices
.getDisplayMedia()
.then(stream => {
// Grab frame from stream
let track = stream.getVideoTracks()[0];
let capture = new ImageCapture(track);
capture.grabFrame().then(bitmap => {
// Stop sharing
track.stop();
// Draw the bitmap to canvas
canvas.width = bitmap.width;
canvas.height = bitmap.height;
canvas.getContext('2d').drawImage(bitmap, 0, 0);
// Grab blob from canvas
canvas.toBlob(blob => {
// Do things with blob here
canvas.value = blob;
canvas.dispatchEvent(new CustomEvent("input"));
});
});
})
.catch(e => console.log(e));
};
canvas.addEventListener('click', capture);
canvas.style.width = width + "px";
return canvas;
}
colorscheme = d3.schemeSpectral[11]
// color
color = d3.scaleOrdinal(d3.range(11),colorscheme)
legend_color = d3.scaleOrdinal(legend_array, colorscheme.slice(1, 11))
legend_array = {
var empty = []
for (var i = 0; i < 10; i++) {
if (nodes[i].host_name === "") {
empty[i] = (i + 1) + " – No Name"
} else {
empty[i] = (i + 1) + " – " + nodes[i].host_name
}
}
return empty
}
legend = d3Legend.legendColor()
.shape("path", d3.symbol().type(d3.symbolSquare).size(100)())
// Try commenting shapePadding() to see the difference
.shapePadding(15) // cell padding
.labelOffset(10) // label offset from the shape
.scale(legend_color)
x = d3.scaleLinear()
.domain([0, 1])
.range([chart_param.margin.left, chart_param.width - chart_param.margin.right]);
y = d3.scaleLinear()
.domain([0, 1])
.range([chart_param.height - chart_param.margin.bottom, chart_param.margin.top]);
r = d3.scaleLinear()
.domain(data_range)
.range([.01, .5]);
// x, y and r taken from https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-how
revenue_array = [parseFloat(d3.min(data, d => d.revenue)),parseFloat(d3.max(data, d => d.revenue))]
data_range = d3.scaleSequential(revenue_array).range()
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.
