### Draw and Display a Basic Circle on Deno Canvas

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/plasma.ipynb

This example illustrates drawing a simple filled and stroked circle on a Deno canvas. It utilizes `skia_canvas` to create the canvas context, performs drawing operations, and then displays the resulting image using the `display` module. This shows fundamental 2D graphics rendering.

```typescript
const canvas = createCanvas(500, 500);
const ctx = canvas.getContext("2d");

ctx.translate(250,250)

ctx.strokeStyle = 'black';
ctx.lineWidth = 8;

    ctx.beginPath();
    ctx.arc(0, 0, 240, 0, 2 * Math.PI);
    ctx.fillStyle = 'salmon';
    ctx.fill();
    ctx.stroke();


await display(canvas);
```

--------------------------------

### Create Polars DataFrame in TypeScript

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/polars-df.ipynb

Demonstrates how to import the `nodejs-polars` library and initialize a new DataFrame. This snippet populates a DataFrame named `df` with example data, including strings, numbers, and boolean values, preparing it for further operations.

```TypeScript
import * as pl from "npm:nodejs-polars"

let df = new pl.DataFrame({
    fruit: ['Apples', 'Oranges', 'Ooples & Banoonoos'],
    value: [0, 1, 0.5],
    comparability: ["<", ">", "="],
    "< 0.5": [true, false, false]
})

df
```

--------------------------------

### Render Vega-Lite Bar Chart with Tooltip using display.js

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/vegalite.ipynb

This snippet demonstrates how to create and display an interactive bar chart using the Vega-Lite API (`vl`) and the `display` function from `display.js`. It defines a dataset, encodes quantitative and nominal fields for x and y axes respectively, and enables tooltips for data inspection. This requires `display.js` and `vega-lite-api` to be installed and imported.

```TypeScript
import { display } from "../mod.ts";

import vl from 'npm:vega-lite-api';

await display(
    vl.markBar({ tooltip: true })
        .data([
          { a: "A", b: 28 }, { a: "B", b: 55 }, { a: "C", b: 43 },
          { a: "D", b: 91 }, { a: "E", b: 81 }, { a: "F", b: 53 },
          { a: "G", b: 19 }, { a: "H", b: 87 }, { a: "I", b: 52 },
        ])
        .encode(
          vl.x().fieldQ("b"),
          vl.y().fieldN("a"),
          vl.tooltip([vl.fieldQ("b"), vl.fieldN("a")])
        )
)
```

--------------------------------

### Render Markdown Content Using Deno Display.js

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/plasma.ipynb

This snippet demonstrates the capability of the `display` module to render rich text content, specifically markdown. It takes a markdown string and directly displays it, highlighting how `display.js` can be used for more than just canvas output, supporting various MIME types.

```typescript
import { display } from "https://deno.land/x/display@v0.1.1/mod.ts";
display({
  "text/markdown":
    "Get ready for **denotebooks**! ![](https://github.com/denoland.png?size=32)",
});
```

--------------------------------

### Animate Perlin Noise on Deno Canvas with Display.js

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/plasma.ipynb

This snippet demonstrates how to generate and animate a Perlin noise pattern on an HTML canvas using Deno's `skia_canvas` and `simplex-noise` modules. It continuously updates the canvas and displays the animation using the `display` module, showcasing dynamic content rendering in a Deno environment.

```typescript
import { createCanvas } from "https://deno.land/x/skia_canvas@0.5.4/mod.ts";
import { createNoise3D } from "https://cdn.skypack.dev/simplex-noise@4.0.0";
import { display } from "https://deno.land/x/display@v1.0.0/mod.ts";
const sleep = (t) => new Promise((r) => setTimeout(r, t));

const noise3D = createNoise3D();
const canvas = createCanvas(256, 256);
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;

let options = { display_id: crypto.randomUUID() };

await display(canvas, options);

for (let t = 0; t < 100; t++) {
  await sleep(60);
  for (let x = 0; x < 256; x++) {
    for (let y = 0; y < 256; y++) {
      const r = noise3D(x / 16, y / 16, t / 32) * 0.4 + 0.5;
      const g = noise3D(x / 8, y / 8, t / 32) * 0.1 + 0.5;
      const b = (r + g) * 0.9;

      data[(x + y * 256) * 4 + 0] = r * 255;
      data[(x + y * 256) * 4 + 1] = g * 255;
      data[(x + y * 256) * 4 + 2] = b * 255; // Updated blue channel
      data[(x + y * 256) * 4 + 3] = 255;
    }
  }
  ctx.putImageData(imageData, 0, 0);
  await display(canvas, { ...options, update: true });
}
```

--------------------------------

### Display Raw Image Data Directly

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/many-canvas-ways.ipynb

This example shows how to display raw image data, such as a base64 encoded PNG string, directly using the `display` function. The `raw: true` option indicates that the input is already in a displayable format and should be rendered without further processing.

```JavaScript
await display({
    'image/png': canvas.toDataURL().split(',')[1]
}, {raw: true})
```

--------------------------------

### Import display function in TypeScript

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/polars-df.ipynb

Imports the `display` function from a local module (`../mod.ts`), which is crucial for rendering data structures or custom outputs within the `display.js` project. This setup enables modularity and reusability.

```TypeScript
import { display } from "../mod.ts"
```

--------------------------------

### Initialize DOMParser and Import Core Libraries

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/Observable Plot.ipynb

This snippet demonstrates how to set up an in-memory HTML `document` using `linkedom`'s `DOMParser` within a Deno environment. It also imports essential utility libraries like `lodash-es` and the project's `display` module, preparing the environment for further DOM manipulation or rendering tasks.

```javascript
import * as _ from "npm:lodash-es";
import { DOMParser, SVGElement } from "npm:linkedom";
import { display } from "../mod.ts";

const document = new DOMParser().parseFromString(
  `<!DOCTYPE html><html lang="en"></html>`,
  "text/html",
);
```

--------------------------------

### Importing display and $display Functions

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/SimpleTest.ipynb

Demonstrates how to import the `display` and `$display` functions from the local `mod.ts` module, which are essential for enabling rich output capabilities in Deno.

```TypeScript
import { display, $display } from "../mod.ts";
```

--------------------------------

### Create and Display Canvas Image via Jupyter Protocol

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/many-canvas-ways.ipynb

This snippet demonstrates how to create a 2D canvas using Deno's canvas module, draw a purple rectangle, and then make the canvas content displayable in a Jupyter-like environment. It achieves this by implementing the `Jupyter.display` protocol, which provides a PNG base64 representation of the canvas.

```JavaScript
import { createCanvas } from "https://deno.land/x/canvas/mod.ts";
import { display } from "../mod.ts"

const canvas = createCanvas(20, 20);
const ctx = canvas.getContext("2d");

ctx.fillStyle = "#8342d8";
ctx.fillRect(0, 0, 20, 20);

var d = {
    [Symbol.for("Jupyter.display")]: () => ({
        'image/png': canvas.toDataURL().split(',')[1]
    })
}
d
```

--------------------------------

### Displaying Skia Canvas Graphics

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/SimpleTest.ipynb

Illustrates the process of creating a 2D canvas using Deno's `skia_canvas` library, drawing a custom shape (a star), and then rendering the canvas content using the `display` function. This showcases how to integrate graphical output with the display module.

```TypeScript
import {
  createCanvas,
  Path2D,
} from "https://deno.land/x/skia_canvas@0.5.4/mod.ts";

const canvasStar = createCanvas(800, 250);
const ctxStar = canvasStar.getContext("2d");

const star = new Path2D("M 75 0 L 100 200 L 0 75 L 150 75 L 0 200 Z");
ctxStar.fillStyle = "#FFD700";
ctxStar.fill(star);

await display(canvasStar);

// display({
//   'image/png': canvasStar.toDataURL().split(',')[1]
// });
```

--------------------------------

### Displaying Asynchronous Objects with display.js

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/async-example.ipynb

This snippet illustrates how to make a custom class displayable asynchronously in a Jupyter-compatible environment using the `display.js` library. By implementing the `[Symbol.for("Jupyter.display")]` method, an object can define how it should be rendered, allowing for dynamic content generation. The `display` function then processes this object to render its HTML representation.

```TypeScript
import { display } from "../mod.ts"

class AsyncExample {
    async [Symbol.for("Jupyter.display")]() {
        return {"text/html": "<b>Tada!</b>"}
    }
}

await display(new AsyncExample())
```

--------------------------------

### Display Markdown Content in Deno Jupyter

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

Imports the `display` function and uses it to render Markdown content with an embedded image in a Deno Jupyter kernel. The `raw: true` option ensures direct rendering of the provided MIME bundle.

```TypeScript
import { display } from "https://deno.land/x/display/mod.ts";

await display(
  {
    "text/markdown":
      "Get ready for **denotebooks**! ![](https://github.com/denoland.png?size=32)",
  },
  { raw: true },
);
```

--------------------------------

### Display Canvas Object Directly

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/many-canvas-ways.ipynb

This snippet illustrates the simplest way to display a canvas object. By passing the canvas instance directly to the `display` function, the library automatically handles the conversion of the canvas content into a displayable format, such as a PNG image.

```JavaScript
await display(canvas)
```

--------------------------------

### Enabling Object Display with Jupyter.display Symbol

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/SimpleTest.ipynb

Illustrates how to make a plain JavaScript object displayable by implementing the `Symbol.for('Jupyter.display')` method. This approach is compatible with environments like Jupyter, allowing objects to provide a rich MIME representation for rendering.

```TypeScript
{
  [Symbol.for('Jupyter.display')]: () => ({
    'text/markdown': '# Hello from Deno'
  })
}
```

--------------------------------

### Enabling Custom Class Display with $display Symbol

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/SimpleTest.ipynb

Demonstrates how to make instances of a custom class displayable by implementing the `[$display]()` method. This method returns a MIME bundle, allowing the class to define its rich representation when passed to the `display` function.

```TypeScript
class Test {
  [$display]() {
    return { "text/markdown": "We are **live**!" };
  }
}

new Test();
```

--------------------------------

### Visualize Data with Observable Plot and display.js

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/Observable Plot.ipynb

This snippet showcases the creation of a data visualization using Observable Plot, integrated with the `display.js` module for rendering. It generates a stacked dot plot to visualize the age and gender distribution from the `congress` dataset, providing clear labels and a baseline. The `document` object from the first snippet is used for rendering context.

```javascript
import * as Plot from "npm:@observablehq/plot";

await display(Plot.plot({
  aspectRatio: 1,
  x: {label: "Age (years)"},
  y: {
    grid: true,
    label: "← Women · Men →",
    labelAnchor: "center",
    tickFormat: Math.abs
  },
  marks: [
    Plot.dot(
      congress,
      Plot.stackY2({
        x: (d) => 2023 - d.birthday.getUTCFullYear(),
        y: (d) => d.gender === "M" ? 1 : -1,
        fill: "gender",
        title: "full_name"
      })
    ),
    Plot.ruleY([0])
  ],
  document
}));
```

--------------------------------

### Simplified Markdown Display with display Function

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

Shows a more convenient way to display Markdown content using the `display` function provided by the module, simplifying the raw Jupyter display interface for common use cases.

```TypeScript
await display({ "text/markdown": "# Hello from Deno" }, { raw: true );
```

--------------------------------

### Displaying Raw Markdown Content

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/SimpleTest.ipynb

Shows how to render markdown strings directly using the `display` function with the `text/markdown` MIME type and the `raw: true` option. This allows for dynamic generation and display of formatted text.

```TypeScript
await display({ "text/markdown": "_Deno_ time!" }, { raw: true });
```

```TypeScript
await display({ "text/markdown": "# Hello from Deno" }, { raw: true});
```

--------------------------------

### Display Polars DataFrame in Deno Jupyter

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

Illustrates how to display a Polars DataFrame using the `display` function, demonstrating its capability to render structured data as an HTML table in a Deno Jupyter environment by duck-typing.

```TypeScript
import { display } from "https://deno.land/x/display/mod.ts";
import * as pl from "npm:nodejs-polars";

let df = new pl.DataFrame({
  fruit: ["Apples", "Oranges"],
  comparability: [0, 1],
});

await display(df);
```

--------------------------------

### Render Markdown with Tagged Template Literal

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

Imports the `md` tagged template function to directly render Markdown content within a Deno Jupyter cell, offering a convenient syntax for embedding formatted text.

```TypeScript
import { md } from "https://deno.land/x/display/mod.ts";
md`## Hello Deno!`;
```

--------------------------------

### html Tagged Template API Reference

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

A tagged template literal function for conveniently rendering HTML content directly in Deno Jupyter cells.

```APIDOC
html`template_string`: string

Description:
  A tagged template literal that processes the template string as HTML and displays it in the Jupyter output.

Parameters:
  template_string: A string literal containing HTML content, potentially with interpolated expressions.

Return Type:
  string (representing the HTML content, which is then displayed)
```

--------------------------------

### Render HTML with Tagged Template Literal

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

Imports the `html` tagged template function to directly render HTML content within a Deno Jupyter cell, providing a concise way to embed rich web elements.

```TypeScript
import { html } from "https://deno.land/x/display/mod.ts";
html`<h1>Hello Deno!</h1>`;
```

--------------------------------

### md Tagged Template API Reference

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

A tagged template literal function for conveniently rendering Markdown content directly in Deno Jupyter cells.

```APIDOC
md`template_string`: string

Description:
  A tagged template literal that processes the template string as Markdown and displays it in the Jupyter output.

Parameters:
  template_string: A string literal containing Markdown content, potentially with interpolated expressions.

Return Type:
  string (representing the Markdown content, which is then displayed)
```

--------------------------------

### Load and Process CSV Data in Deno

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/Observable Plot.ipynb

This code block illustrates how to read a local CSV file (`us-congress-2023.csv`) using Deno's `Deno.readTextFile` and parse its content with D3's `csvParse` function. It includes a data transformation step to convert `birthday` strings into `Date` objects, making them suitable for date-based operations, and uses `lodash` for a sample operation.

```javascript
import { parse, stringify } from "https://deno.land/std@0.194.0/csv/mod.ts";

import * as d3 from "npm:d3";

let text = await Deno.readTextFile("./us-congress-2023.csv");

let congress = d3.csvParse(text);

congress.forEach((entry) => {
  entry.birthday = new Date(entry.birthday);
});

_.sample(congress);
```

--------------------------------

### Custom Jupyter Display Object Interface

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

Demonstrates the underlying interface for custom object display in Deno Jupyter, using `Symbol.for('Jupyter.display')` to define how an object should be rendered as Markdown. This is the mechanism the `display` function abstracts.

```TypeScript
{
  [Symbol.for('Jupyter.display')]: () => ({
    'text/markdown': '# Hello from Deno'
  })
}
```

--------------------------------

### display Function API Reference

Source: https://github.com/rgbkrk/display.js/blob/main/README.md

The primary function for rendering rich media types in Deno Jupyter notebooks. It can accept a MIME bundle or a duck-typed object that the kernel knows how to represent.

```APIDOC
display(data: Record<string, string> | any, options?: { raw: boolean }): Promise<void>

Description:
  The primary function for rendering rich media types in Deno Jupyter notebooks. It can accept a MIME bundle (object mapping MIME types to content strings) or an object that implements `Symbol.for('Jupyter.display')`, or a recognized duck-typed object (e.g., Polars DataFrame, Canvas, HTMLElement).

Parameters:
  data: The content to display. Can be a MIME bundle (e.g., `{ "text/markdown": "# Hello" }`) or an object that implements `Symbol.for('Jupyter.display')`, or a recognized duck-typed object.
  options: Optional display settings.
    raw: boolean - If true, the data is displayed directly as provided, bypassing duck-typing.

Return Type:
  Promise<void>

Usage Note:
  Must be used as the last expression in a cell until `display_data` is fully supported (see denoland/deno#20591).
```

--------------------------------

### Display Polars DataFrame in TypeScript

Source: https://github.com/rgbkrk/display.js/blob/main/test-notebooks/polars-df.ipynb

Utilizes the previously imported `display` function to render the `df` (Polars DataFrame) to the output. This action is fundamental for visualizing the DataFrame's content and verifying data manipulation results.

```TypeScript
await display(df)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.