constellation-3d
constellation-3d is for data visualization, it looks like constellations in the sky. Demo is here.
About this component
I created constellation-3d because I use it to show my skills in my portfolio site. Like this:
[picture]
[picture]
I think it is suitable for displaying data in which the data nodes have a loose relationship, such as all the hosts on the Internet, some of them have a connection with others, but some else haven't.
It is based on three.js and d3-force-3d.
Features
- 3D
constellation-3d uses a 3d engine three.js, that means you can view the data in 3d space.
- Support HTML/CSS + JSX
You can write HTML/CSS to change the appearance of constellation-3d. In order to let the user write HTML/CSS in js file, I use React 's JSX as a template engine, for more information about JSX, check document here. To define the appearance of nodes in constellation-3d, the code is like this:
<div style= backgroundColor : 'red' width : '100px' height : '100px' borderRadius : '50%' > nodename</div>
Install
with NPM
npm install --save constellation-3d
with HTML
NOTE, to use constellation-3d in html file, you need to surround the js code with script tag which type is 'text/babel', thats because we need write JSX in code.
API
Settings for behaver and appearance of the component:
Setting | Type | Default | Description |
---|---|---|---|
container | DOM object | none | the DOM div element to mount the component/canvas, e.g. document.getElementById('container') |
isAnimated | boolean | true | if true, then there is an animation when it shows up |
backgroundPicture | URL | none | background picture URL, support PNG, JPEG |
backgroundPictureRepeatHorizontal | number | none | how many time the picture will be repeated in the horizontal direction on the background |
backgroundPictureRepeatVertical | number | none | how many time the picture will be repeated in the vertical direction on the background |
lineColor | number | 0x000000 | the color of the line between two nodes |
lineDistance | number | 80 | the distance of the line between two nodes |
textType | 'CSS' | 'THREE' | 'CSS' | if textType = 'CSS', use CSS+HTML to render the nodes, if = 'THREE', use Three.js 3d model to render the nodes |
width | number | none | the width of the component |
height | number | none | the height of the component |
isTextDirectionFixed | boolean | true | if true, the text of nodes will always keep facing to the camera |
isAutoRotated | boolean | false | if true, the component will rotate automatically |
autoRotationSpeed | number | 1 | the speed of rotation, the larger the value, the faster the speed |
cameraType | 'orbit' | 'perspective' | 'orbit' | 'orbit': the camera will rotate around the constellations; 'perspective' : the constellation will rotate around the camera |
cameraPerspectivePositionX | number | none | valid in perspective mode, indicates the x-axis coordinates of camera |
cameraPerspectivePositionY | number | none | valid in perspective mode, indicates the y-axis coordinates of camera |
cameraPerspectivePositionZ | number | none | valid in perspective mode, indicates the z-axis coordinates of camera |
cameraPerspectiveAngleX | number | none | valid in perspective mode, the rotation angle of the camera around the x-axis |
cameraPerspectiveAngleY | number | none | valid in perspective mode, the rotation angle of the camera around the y-axis |
cameraPerspectiveAngleZ | number | none | valid in perspective mode, the rotation angle of the camera around the z-axis |
cameraObitPositionX | number | none | valid in orbit mode, indicates the x-axis coordinates of camera |
cameraObitPositionY | number | none | valid in orbit mode, indicates the y-axis coordinates of camera |
cameraObitPositionZ | number | none | valid in orbit mode, indicates the z-axis coordinates of camera |
cameraObitFrustmSize | number | none | in orbit mode, distance from nodes to camera |
strengthPushAllAway | number | none | strength pushing all nodes away |
strengthPullToX | number | none | strength pulling all nodes to X coordination |
strengthPullToY | number | none | strength pulling all nodes to Y coordination |
strengthPullToZ | number | none | strength pulling all nodes to Z coordination |
strengthToBounceOtherAway | number | none | strength bouncing all nodes away |
textCSS | React component | none | pass into a react component as the template to display a node |
textMesh | Three.js model | none | pass into a Three.js model as the template to display a node |
data | JSON | none | the data to display, see below for detail |
Data format
To display some data, should give constellation-3d a JSON object, the format looks like below:
name : 'nameA' weight : 2 children : name : 'childA' weight : 1 name : 'childB' wight : 1 name : 'nameB' weight : 3
description:
name : the name of this data node
weight : the weight of current node, range is [1-10]
children : children array