Skip to content

Latest commit

 

History

History
95 lines (54 loc) · 6.29 KB

File metadata and controls

95 lines (54 loc) · 6.29 KB
graph LR
    Base_Geometric_Component["Base Geometric Component"]
    Specific_Geometric_Implementations["Specific Geometric Implementations"]
    Data_to_Visual_Scale_Mapper["Data-to-Visual Scale Mapper"]
    Core_JavaScript_Code_Builder["Core JavaScript Code Builder"]
    D3_js_Selection_Abstraction["D3.js Selection Abstraction"]
    JavaScript_Function_Generator["JavaScript Function Generator"]
    Geometric_Component_Aggregator["Geometric Component Aggregator"]
    Specific_Geometric_Implementations -- "inherits from" --> Base_Geometric_Component
    Specific_Geometric_Implementations -- "depends on" --> Core_JavaScript_Code_Builder
    Specific_Geometric_Implementations -- "depends on" --> D3_js_Selection_Abstraction
    Specific_Geometric_Implementations -- "utilizes scales from" --> Data_to_Visual_Scale_Mapper
    Specific_Geometric_Implementations -- "provides output to" --> Geometric_Component_Aggregator
    Data_to_Visual_Scale_Mapper -- "uses" --> Core_JavaScript_Code_Builder
    Data_to_Visual_Scale_Mapper -- "provides scales to" --> Specific_Geometric_Implementations
    Core_JavaScript_Code_Builder -- "is used by" --> D3_js_Selection_Abstraction
    Core_JavaScript_Code_Builder -- "is used by" --> JavaScript_Function_Generator
    Geometric_Component_Aggregator -- "collects from" --> Specific_Geometric_Implementations
Loading

CodeBoardingDemoContact

Details

The d3py visualization subsystem is designed around a clear separation of concerns, enabling the generation of D3.js-based interactive plots from Python data structures. At its core, the system defines abstract geometric components that serve as blueprints for various visual elements. Concrete implementations of these geometries handle the specific D3.js and CSS code generation. A crucial aspect is the data-to-visual scale mapping, which intelligently translates data ranges into visual properties. All JavaScript code generation is facilitated by a dedicated utility component, ensuring consistency and reusability. Finally, a geometric component aggregator assembles all individual visual elements into a cohesive final output. This modular design allows for flexible extension and robust visualization creation.

Base Geometric Component

Defines the abstract interface and common properties for all geometric shapes. It establishes the contract for how a geometric component should behave, including methods for generating CSS and JavaScript. This component is fundamental as it provides the blueprint for all visual elements.

Related Classes/Methods:

Specific Geometric Implementations

Implement concrete visual representations (e.g., bars, lines, areas). They are responsible for generating the specific D3.js and CSS code required to render their respective shapes, often through _build_css and _build_js methods. These are the actual visual building blocks of any plot.

Related Classes/Methods:

Data-to-Visual Scale Mapper

Analyzes input data (typically from a Pandas DataFrame) to determine appropriate D3.js scale types (e.g., linear, ordinal, time) and their corresponding domains (input data range) and ranges (output visual range, e.g., pixel values). It generates the D3.js code for these scales, which are fundamental for mapping data values to visual attributes like position, size, and color.

Related Classes/Methods:

Core JavaScript Code Builder

Provides core functionalities for building JavaScript code snippets, acting as a utility for other components that need to generate D3.js or general JavaScript. It abstracts the complexities of string concatenation for JavaScript output.

Related Classes/Methods:

D3.js Selection Abstraction

Provides abstractions for D3.js selections, used for DOM manipulation and attribute setting within the generated JavaScript. This component simplifies the interaction with the SVG/HTML elements that D3.js will render.

Related Classes/Methods:

JavaScript Function Generator

Generates D3.js function definitions within the output JavaScript, enabling dynamic behavior and data binding. This allows for more complex and interactive visualizations.

Related Classes/Methods:

Geometric Component Aggregator

Collects and integrates the JavaScript and CSS generated by individual geometric implementations into the overall figure's output. It ensures that all visual components are properly assembled into a cohesive visualization.

Related Classes/Methods: