react-circular-graph
A react component to render animated circular rotational knowledge graph
API
selectedNode
returns selected node detailsselectedProjectChanged
returns a flag for selected project status
Example selected node object
Usage
index.scss
circularTemplate.scss
@- 50%}@ 50%}
CircularTemplate.js
import React Fragment from 'react';import connect from "react-redux";import './CircularTemplate.scss' { if thispropscanvas return <div => <div ="project-summary"> <img = ="logo" /> <h5>thispropscanvasname</h5> <p>thispropscanvassummary</p> </div> <a ="text-btn" => View Project </a> </div> else return null } { return canvas: stateCanvas && stateCanvasdata selectedProjectChanged: stateCanvas && stateCanvasisProjectChanged } mapStateToProps nullCircularTemplate;
import React Fragment from 'react';import ReactCircularGraph from 'react-circular-graph';import CircularTemplate from './CircularTemplate'; var config = "ENABLE_ERROR_REPORTING": true "LIST_PAGE_SIZE": 48 "EXPLORE_PAGE_SIZE": 80 "MOBILE_WIDTH": 720 "COLORS": "GREEN": "#34A853" "RED": "#EA4335" "BLUE": "#4285F4" "YELLOW": "#FBBC05" var data = "id": "tensorflow" "name": "TensorFlow" "summary": "TensorFlow is a fast, flexible, and scalable open source machine learning library for research and production" "iconUrlSmall": "https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ1HC13sEyluXwZoYWC2w2i9qsPjQ&sqp=-oaymwEICEwQTCAAUAEIttCMygU" "iconUrlMedium": "https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ7IXg35u8B_D41kSCIRrHjJYcfng&sqp=-oaymwEKCIwBEIwBIABQAQi20IzKBQ" "primaryColor": "#E26026" "startsWith": "t" "fallbackColor": "#34A853" "RGB": "r": 226 "g": 96 "b": 38 React;
Screenshot
Built With
- React - A JavaScript library
Author
- Anish M Prasad (anishmprasad@gmail.com)
License
This project is licensed under the MIT License - see the LICENSE.md file for details
In the words of Martin Luther King Junior:
Hate cannot drive out hate; only love can do that.