[!NOTE] This is one of 214 standalone projects, maintained as part of the @thi.ng/umbrella monorepo and anti-framework.

🚀 Please help me to work full-time on these projects by sponsoring me on GitHub. Thank you! ❤️

• About
• Status
• Installation
• Dependencies
• API
  • Linguistic variable visualization
  • Instrument a DefuzzStrategy
• Authors
• License

About

Visualization, instrumentation & introspection utils for @thi.ng/fuzzy.

Status

STABLE - used in production

Search or submit any issues for this package

Installation

yarn add @thi.ng/fuzzy-viz

ESM import:

import * as fv from "@thi.ng/fuzzy-viz";

Browser ESM import:

<script type="module" src="https://esm.run/@thi.ng/fuzzy-viz"></script>

JSDelivr documentation

For Node.js REPL:

const fv = await import("@thi.ng/fuzzy-viz");

Package sizes (brotli'd, pre-treeshake): ESM: 1023 bytes

Dependencies

• @thi.ng/api
• @thi.ng/fuzzy
• @thi.ng/hiccup
• @thi.ng/hiccup-svg
• @thi.ng/math
• @thi.ng/strings
• @thi.ng/text-canvas

Note: @thi.ng/api is in most cases a type-only import (not used at runtime)

API

Generated API docs

Linguistic variable visualization

Generate an SVG visualization of all fuzzy sets defined in a linguistic variable:

import { invSigmoid, sigmoid, trapezoid, variable } from "@thi.ng/fuzzy";
import { varToSvg } from "@thi.ng/fuzzy-viz";
import { writeFileSync } from "node:fs";

// temperature sets (in celsius)
const temp = variable([-20, 40], {
    freezing: invSigmoid(0, 2),
    cold: trapezoid(-1, 2, 16, 20),
    warm: trapezoid(15, 20, 30, 34),
    hot: sigmoid(32, 2),
});

// generate & write SVG file
writeFileSync("temperature.svg", varToSvg(temp, { samples: 200 }));

See VisualizeVarOpts for further options to configure the visualization.

Instrument a DefuzzStrategy

instrumentStrategy() is an higher order function. It takes an existing DefuzzStrategy and an instrumentation function. Returns new DefuzzStrategy which first executes original strategy, then calls instrument with the same args AND the computed result obtained from strategy. Returns result of original strategy.

The instrumentation function is intended to perform side effects (e.g. debug outputs) and/or produce secondary results (e.g. visualizations). The latter can be obtained through the IDeref mechanism implemented by the returned function. Since defuzz() might call the strategy multiple times (i.e. if there are multiple output vars used), .deref() will always return an array of secondary results.

Note: The secondary results from the instrumentation function will persist & accumulate. If re-using the instrumented strategy for multiple defuzz() invocations, it's highly recommended to clear any previous results using .clear().

import { centroidStrategy, gaussian } from "@thi.ng/fuzzy";
import { fuzzySetToAscii, instrumentStrategy } from "@thi.ng/fuzzy-viz";

const strategy = instrumentStrategy(
    centroidStrategy({ samples: 1000 }),
    fuzzySetToAscii({ width: 40, height: 8 })
);

// apply strategy as normal (well, usually done via defuzz())
strategy(gaussian(5, 2), [0, 10]);
// 4.995

strategy.deref().forEach((viz) => console.log(viz));
// .................▄▆█|█▆▄.................
// ...............▅████|████▅...............
// .............▄██████|██████▄.............
// ...........▂▇███████|███████▇▂...........
// ..........▅█████████|█████████▅..........
// .......▁▅███████████|███████████▅▁.......
// .....▃▆█████████████|█████████████▆▃.....
// ▃▄▅▇████████████████|████████████████▇▅▄▃
//                     ^ 5.00

// cleanup (optional)
strategy.clear();

Using fuzzySetToHiccup()/fuzzySetToSvg() visualizations like below can be created following the same pattern as above:

Authors

• Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-fuzzy-viz,
  title = "@thi.ng/fuzzy-viz",
  author = "Karsten Schmidt",
  note = "https://thi.ng/fuzzy-viz",
  year = 2020
}

License

© 2020 - 2026 Karsten Schmidt // Apache License 2.0