DOCSEARCHbyAlgolia
Submit Docs

UpSet.js Documentation

website·Indexed 29 days ago

https://upset.js.org/

A JavaScript library for visualizing set intersections. It includes a Jupyter Widget library (version 1.6.0) via the upsetjs_jupyter_widget package, R integrations for creating UpSet set structures and diagrams, and support for PowerBI and Tableau extensions. The library provides components for rendering set intersections, including a Karnaugh Map variant.

Tokens
87.7K
Snippets
595
Records
876
Agent score
61%

What's inside UpSet.js

  1. Overview of UpSet.js for set visualization

    UpSet.js is a JavaScript library used to create interactive set visualizations for more than three sets. It is a re-implementation of UpSetR and UpSet. The core library is built with React as a pure functional component that depends on provided properties, but it also offers bundle editions for use in plain JavaScript environments.

  2. Overview of the @upsetjs/model package

    The @upsetjs/model package is a helper library within the UpSet.js ecosystem. It provides the core data definitions and model methods, such as extractSets, which are used across different UpSet.js implementations to handle data processing.

  3. UpSet.js API Overview

    The upset.js library provides a comprehensive set of tools for visualizing set intersections and overlaps. The API is organized into several key areas:

    • Rendering Functions: renderUpSet, renderKarnaughMap, and renderVennDiagram (and their corresponding skeleton versions) are used to generate the visualizations.
    • Data Transformation: Functions like fromDump, toDump, extractCombinations, and generateCombinations handle the conversion between raw data and the formats required by the library.
    • Addons: Specialized visualization extensions such as boxplotAddon, categoricalAddon, and their aggregated versions.
    • Scaling: Scale factories including bandScale, linearScale, and logScale for axis management.
    • Querying: Utility functions like queryOverlap and queryElemOverlap for analyzing set intersections.

  4. KarnaughMapPropsG Interface Overview

    The KarnaughMapPropsG interface defines the properties and methods available for configuring a Karnaugh Map component. It is a complex interface that extends several other property sets including KarnaughMapDataProps, KarnaughMapLayoutProps, KarnaughMapStyleProps, KarnaughMapThemeProps, KarnaughMapElementProps, and UpSetSelectionProps.

  6. VennDiagramFullPropsG Interface Overview

    The VennDiagramFullPropsG interface defines the full set of properties and methods available for configuring a Venn Diagram component in upset.js. It is a composite interface that inherits from several other property sets, including data, layout, style, theme, and element properties, as well as selection properties.

  7. VennDiagramElementProps Interface Overview

    The VennDiagramElementProps interface defines the properties and methods available for Venn diagram elements in upset.js. It extends UpSetBaseElementProps<C, N>, where C represents the style object type and N represents the type returned by the style factory.

  8. UpSetFromStaticDumpFullCombination Interface Definition

    The UpSetFromStaticDumpFullCombination interface defines the structure of a set combination record when using a static dump in UpSet.js. It contains metadata about the combination, including its size, identifier, and the specific sets involved.
    interface UpSetFromStaticDumpFullCombination {
  cardinality: number;
  name: string;
  sets: readonly number[];
  type: SetCombinationType;
}

  9. Integrate UpSet.js with Web Frameworks

    UpSet.js provides dedicated adapters for popular web frameworks to simplify integration. Available adapters include React, Vue.js, and a generic Vanilla adapter that only requires a DOM element for initialization.

  10. Use the UpSetAddonHandlerInfo interface

    The UpSetAddonHandlerInfo interface provides metadata about an addon handler in upset.js. It contains read-only properties for identification and value representation.
    interface UpSetAddonHandlerInfo {
  readonly id: string;
  readonly name: string;
  readonly value: {
    toString(): void;
  };
}

  11. Render set intersections using the Karnaugh Map variant in UpSet.js

    UpSet.js provides a Karnaugh Map variant specifically designed for rendering set intersections in a dense matrix format, offering an alternative visualization to the standard UpSet plot.

  12. Understand UpSet.js architecture and integration options

    UpSet.js is built on four core design principles to ensure flexibility and interoperability across different environments:

    • Statelessness: The library has no internal state logic and depends entirely on provided input. For example, selections are managed externally; the component receives the currently selected set and a callback listener for user interactions, ensuring synchronization with external updates.
    • Framework Integrations: UpSet.js provides dedicated wrappers for popular frameworks: @upsetjs/react for React and @upsetjs/vue for Vue.js. It is also compatible with data science tools like R, Python Jupyter, PowerBI, Tableau, and Observable HQ.
    • Single Core Implementation: To prevent redundant code, UpSet.js maintains one primary implementation in React (@upsetjs/react). A framework-agnostic bundled version (@upsetjs/bundle) is provided to allow integration into any web environment without framework dependencies.
    • Shareability: Plots can be exported as PNG or SVG images, as Vega-lite specifications, or as a JSON format compatible with the UpSet.js embedded app viewer.