Relation Graph

Functional Overview

This example demonstrates how to create hand-drawn style graph visualizations through custom node rendering and SVG filters. Users can choose different border styles (rough, pencil, thick) and background textures (paper, hatch, grid, dots), giving charts an artistic and human touch.

Implementation of Key Features

Hand-Drawn Node Component

Create the HandDrawnBox component for hand-drawn border effects:

<HandDrawnBox variant={node.data.nodeBorderStyle} texture={node.data.nodeBackgroundStyle}>
    {nodeContent}
</HandDrawnBox>

The component applies different SVG filters and styles based on selected variants and textures.

Style Toggle Control

Provide multiple dropdown options to control hand-drawn effects:

<SimpleUISelect data={[
    { value: 'rough', text: 'Rough' },
    { value: 'pencil', text: 'Pencil' },
    { value: 'thick', text: 'Thick' }
]} currentValue={nodeBorderStyle} onChange={setNodeBorderStyle} />

<SimpleUISelect data={[
    { value: 'none', text: 'None' },
    { value: 'paper', text: 'Paper' },
    { value: 'hatch', text: 'Hatch' },
    { value: 'grid', text: 'Grid' },
    { value: 'dots', text: 'Dots' }
]} currentValue={nodeBackgroundStyle} onChange={setNodeBackgroundStyle} />

Users can independently control border style and background texture.

Dynamic Style Update

Update all nodes’ styles through updateNodeData:

const changeNodeHandDrawnStyle = async () => {
    graphInstance.getNodes().forEach(node => {
        graphInstance.updateNodeData(node, {
            nodeBorderStyle,
            nodeBackgroundStyle
        });
    });
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            lineShape: enableHandDrawn ? RGLineShape.Curve8 : RGLineShape.StandardStraight
        });
    });
    await graphInstance.sleep(50);
    graphInstance.moveToCenter();
    graphInstance.zoomToFitWithAnimation();
};

After style changes, re-layout ensures nodes display correctly.

Conditional Rendering

Choose different node components based on whether hand-drawn mode is enabled:

<RGSlotOnNode>
    {({ node }) => {
        const nodeContent = <div>{/* node content */}</div>;
        if (enableHandDrawn) {
            return <HandDrawnBox variant={node.data.nodeBorderStyle} texture={node.data.nodeBackgroundStyle}>
                {nodeContent}
            </HandDrawnBox>;
        } else {
            return <MyNodeContentBox>
                {nodeContent}
            </MyNodeContentBox>;
        }
    }}
</RGSlotOnNode>

This allows users to switch between hand-drawn and standard styles.

SVG Filter Application

Use SVG filters to create hand-drawn effects:

<MySvgFilters />
<div className={`${enableHandDrawn ? 'node-filter-hand-drawn' : ''}`}>
    <RelationGraph />
</div>

CSS classes apply SVG filters to nodes, creating rough edges and hand-drawn line effects.

Hand-Drawn Line Offset

Add random offsets to lines to simulate hand-drawn irregularity:

myJsonData.lines.forEach(line => {
    line.fromJunctionPointOffsetX = Math.random() * 10;
    line.fromJunctionPointOffsetY = Math.random() * 10;
    line.toJunctionPointOffsetX = Math.random() * 10;
    line.toJunctionPointOffsetY = Math.random() * 10;
    line.junctionOffset = Math.random() * 20 - 10;
    line.endMarkerId = 'my-hand-drawn-arrow-end';
});

Random offsets make connection lines look more hand-drawn.

Creative Use Cases

Educational and Training Materials

Create friendly, informal learning materials. Hand-drawn style makes complex charts more approachable and reduces learning pressure.

Creative Presentations

Use hand-drawn style in presentations to add creativity and personality. Particularly suitable for design, art, or creative industry presentations.

Sketching and Prototyping

Quickly create concept sketches or design prototypes. Hand-drawn style conveys “this is preliminary work” and encourages feedback and iteration.

Child-Friendly Interfaces

Create friendly interfaces for children’s education apps. Hand-drawn style better matches children’s aesthetic and cognitive habits.

Storyboarding and Scene Planning

Use hand-drawn style graphs in storyboards or scene planning, maintaining sketch consistency and visual coherence.

Whiteboard and Collaboration Tools

Digital collaboration tools that simulate real whiteboard experience. Hand-drawn style makes users feel like they’re using an actual whiteboard.

Creative Writing and Brainstorming

Use hand-drawn style mind maps in creative writing or brainstorming sessions to stimulate creativity.

Incomplete and Work-In-Progress

Use hand-drawn style to represent ongoing or incomplete work, conveying this is a sketch rather than a final product.

Personalized Branding

Create unique brand materials with a personal touch. Hand-drawn style can make brands seem more approachable and human.

Data Visualization Art

Elevate data visualization to art. Hand-drawn style adds human touch and artistic feel to cold data.

Hand Drawn Style

Hand-Drawn Style Visualization with SVG Filters