d3-react-visualization
v1.0.5
Published
A library for creating visualizations. Uses d3 and React for data processing / maths / incredibly useful functions and for state management, respectively.
Downloads
7
Readme
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}
/>