d3-react-visualization

Visualization

A library for creating visualizations. Uses d3 and React for data processing / maths / incredibly useful functions and for state management, respectively.

Overview

This library is built upon basic SVG primitives and is designed to make it simple to build composites that are made up of both primitives and other composites. Each of the primitives supports the basic shape interfaces (+ text and paths), as well as interfaces designed around a cohesive visualization language.

The primitives are as follows:

Primitive Components

These are based on the basic SVG components:

Grouping

A grouping is used to group together components. It is the g SVG element.

    <Grouping
        className={class}

        width={widthOfGrouping}
        height={heightOfGrouping}

        x={xOffset}
        y={yOffset}
    >
        {... children ...}
    </Grouping>

Line

    <Line
        className={class}

        x1={xDimensionOfStartingPoint}
        y1={yDimensionOfStartingPoint}
        x2={xDimensionOfEndingPoint}
        y2={yDimensionOfEndingPoint}

        color={colorOfLine}
        width={widthOfLine}
    />

Rectangle

    <Rectangle
        className={class}

        x={xDimensionOfTopLeftCorner}
        y={yDimensionOfTopLeftCorner}

        width={widthOfRectangleRightFromTopLeftCorner}
        height={heightOfRectangleDownFromTopLeftCorner}

        // borderWidth={widthOfBorder}
        // borderColor={colorOfBorder}

        color={colorOfRectangle}
    />

Circle

    <Circle
        className={class}

        x={xDimensionOfCenter}
        y={yDimensionOfCenter}

        radius={radius}

        color={colorOfCircle}

        borderWidth={widthOfBorder}
        borderColor={colorOfBorder}
    />

Ellipse

    <Ellipse
        className={class}

        x={xDimensionOfCenter}
        y={yDimensionOfCenter}

        radiusX={xRadius}
        radiusY={yRadius}

        color={colorOfEllipse}

        borderWidth={widthOfBorder}
        borderColor={colorOfBorder}
    />

Arc

    <Arc
        className={class}

        x={xDimensionOfCenter}
        y={yDimensionOfCenter}

        radiusX={xRadius}
        radiusY={yRadius}

        color={colorOfArc}
        width={widthOfArc}
    />

Composite Components

These are based on our primitive components:

Background

A background is just a rectangle with x and y set to 0 and without a border. It's used to fill an entire space with color.

    <Background
        width={widthOfArea} // try window.innerWidth
        height={heightOfArea} // try window.innerHeight
        color={color}
    />