// URL: https://observablehq.com/@mbostock/fullscreen-canvas
// Title: Fullscreen Canvas
// Author: Mike Bostock (@mbostock)
// Version: 104
// Runtime version: 1
const m0 = {
id: "fe9ad230801481be@104",
variables: [
{
inputs: ["md"],
value: (function(md){return(
md`# Fullscreen Canvas
The trick is to make the cell’s *container* element go fullscreen, not the cell’s content. Here I’m reaching through the DOM to find the container element of the following cell, which also prevents the button from re-rendering reactively.`
)})
},
{
name: "fullscreen",
inputs: ["htl"],
value: (function(htl){return(
htl.html``
)})
},
{
name: "canvas",
inputs: ["width","screen","htl","d3"],
value: (function*(width,screen,htl,d3)
{
const n = 200;
const height = Math.ceil(width * screen.height / screen.width);
const margin = 60;
const svg = htl.svg`