Skip to content
Astro Digital Garden

Gnuplot diagram

example of the Gnuplot diagram

Use two fingers to pan and zoom

Example taken here ↗

About

Section titled “About”

Gnuplot ↗ is a graphing utility. The source code is copyrighted but freely distributed (i.e., you don’t have to pay for it). It was originally created to allow scientists and students to visualize mathematical functions and data interactively. It is also used as a plotting engine by third-party applications like Octave. Gnuplot has been supported and under active development since 1986.

Installation

Section titled “Installation”

  1. Install dependencies

    Terminal window
    pnpm add @beoe/rehype-gnuplot

  2. Configure Astro. See note about Rehype Plugins for Code.

    astro.config.mjs
    import { rehypeGnuplot } from "@beoe/rehype-gnuplot";
    

    export default defineConfig({
      markdown: {
        rehypePlugins: [
          [
            rehypeGnuplot,
            {
              strategy: "file",      // alternatively use "data-url"
              fsPath: "public/beoe", // add this to gitignore
              webPath: "/beoe",
            },
          ],
        ],
      },
    });

  3. Add line to .gitignore:

    public/beoe

  4. Optional install dependency for cache

    Terminal window
    pnpm add @beoe/cache

  5. Optional configure cache

    astro.config.mjs
    import { getCache } from "@beoe/cache";
    

    const cache = await getCache();
    

    export default defineConfig({
      markdown: {
        rehypePlugins: [
          [
            rehypeGnuplot,
            {
              strategy: "file",
              fsPath: "public/beoe",
              webPath: "/beoe",
              cache,
            },
          ],
        ],
      },
    });

  6. Optional add pan and zoom for diagrams

Example

Section titled “Example”
```gnuplot alt="Plot of sin(x)"
plot [-10:10] sin(x)
```
Plot of sin(x)

Use two fingers to pan and zoom

Bonus: XKCD-style

Section titled “Bonus: XKCD-style”
example of the Gnuplot diagram in XKCD style

Use two fingers to pan and zoom

Example taken here ↗.

Note: In order for the example to work as SVG, I changed the following lines:

set term postscript eps font 'HumorSans' fontfile 'Humor-Sans.pfa' 22
set output 'xkcd.eps'
set terminal svg enhanced font "HumorSans,Patrick Hand,Chalkboard,Comic Sans MS,18"

You may use any font you like and load if, for example: