{"id":18973558,"url":"https://github.com/anishmprasad/react-circular-graph","last_synced_at":"2026-05-01T04:35:24.272Z","repository":{"id":98776988,"uuid":"155250275","full_name":"anishmprasad/react-circular-graph","owner":"anishmprasad","description":" A react component to render knowledge circular rotational graph","archived":false,"fork":false,"pushed_at":"2023-01-10T18:32:06.000Z","size":43,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T09:03:44.902Z","etag":null,"topics":["animated","circular","nodes","react-redux","reactjs","redux"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anishmprasad.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-29T17:08:58.000Z","updated_at":"2023-01-10T18:32:10.000Z","dependencies_parsed_at":"2023-06-07T21:45:25.245Z","dependency_job_id":null,"html_url":"https://github.com/anishmprasad/react-circular-graph","commit_stats":{"total_commits":27,"total_committers":2,"mean_commits":13.5,"dds":0.2962962962962963,"last_synced_commit":"7018cd58bbdb10f4bdcfb2ad9d09d33681e46387"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Freact-circular-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Freact-circular-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Freact-circular-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anishmprasad%2Freact-circular-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anishmprasad","download_url":"https://codeload.github.com/anishmprasad/react-circular-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239970677,"owners_count":19727014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","circular","nodes","react-redux","reactjs","redux"],"created_at":"2024-11-08T15:12:30.036Z","updated_at":"2026-04-07T23:30:16.481Z","avatar_url":"https://github.com/anishmprasad.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-circular-graph\n\nA react component to render animated circular rotational knowledge graph\n\n## API\n\n1. `selectedNode` returns selected node details\n2. `selectedProjectChanged` returns a flag for selected project status\n\nExample selected node object\n\n```json\n\n{\n    \"data\" : {\n      \"id\": \"tensorflow\",\n      \"name\": \"TensorFlow\",\n      \"summary\": \"TensorFlow is a fast, flexible, and scalable open source machine learning library for research and production\",\n      \"iconUrlSmall\": \"https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ1HC13sEyluXwZoYWC2w2i9qsPjQ\u0026sqp=-oaymwEICEwQTCAAUAEIttCMygU\",\n      \"iconUrlMedium\": \"https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ7IXg35u8B_D41kSCIRrHjJYcfng\u0026sqp=-oaymwEKCIwBEIwBIABQAQi20IzKBQ\",\n      \"primaryColor\": \"#E26026\",\n      \"startsWith\": \"t\",\n      \"fallbackColor\": \"#34A853\",\n      \"RGB\": {\n        \"r\": 226,\n        \"g\": 96,\n        \"b\": 38\n      }\n    },\n    ...\n}\n\n```\n## Usage\n\n`index.scss`\n\n```css\n\n.react-cirular-graph{\n  position:relative\n}\n\n```\n\n`circularTemplate.scss`\n\n```css\n\n.explore-projects{\n    opacity:0;\n    padding:0 0 80px 0;\n    transition:opacity .5s ease-out;\n    position: relative;\n}\n.explore-projects.loaded{opacity:1}   \n.error h5{margin-top:60px}   \n.explore-container{position:relative}   \ncanvas{\n    display:block;\n    margin:0 auto;\n    -webkit-user-select:none;\n    -moz-user-select:none;\n    -ms-user-select:none;\n    user-select:none\n}   \n.selected-project{\n    -webkit-animation:none;\n    animation:none;\n    background:hsla(0,0%,100%,0);\n    border-radius:50%;\n    height:340px;\n    left:50%;\n    margin:-170px 0 0 -170px;\n    opacity:0;\n    overflow:hidden;\n    position:absolute;\n    text-align:center;\n    top:50%;\n    width:340px\n}   \n.selected-project a{opacity:0}   \n.selected-project.active,    \n.selected-project.active a {\n    -webkit-animation:fade-in .4s ease-in-out forwards;\n    animation:fade-in .4s ease-in-out forwards;\n    cursor:pointer\n}   \n.selected-project .project-summary{height:260px}   \n.selected-project .project-summary img{width : 60px;height:60px}   \n.selected-project a,.selected-project h5,.selected-project p{margin:0 15px 15px 15px}   \n.selected-project .icon{max-height:60px}\n.selected-project img{margin:30px auto 0 auto}\n.selected-project p{font-size:14px;line-height:18px;max-height:145px;overflow:hidden}   \n.page{\n    -webkit-animation:fade-in 2s ease-in-out 1s forwards;\n    animation:fade-in 2s ease-in-out 1s forwards;\n    // background:url(/assets/images/chevron-dark.svg) 0 0 no-repeat;\n    cursor:pointer;\n    height:15px;\n    left:10px;\n    margin:-15px 0 0 0;\n    opacity:0;\n    overflow:hidden;\n    position:absolute;\n    text-indent:-9999px;\n    top:50%;\n    -webkit-transform:rotate(90deg);\n    transform:rotate(90deg);\n    -webkit-transform-origin:center;\n    transform-origin:center;\n    transition:-webkit-transform .1s ease-in;\n    transition:transform .1s ease-in;\n    transition:transform .1s ease-in,-webkit-transform .1s ease-in;\n    width:20px\n}  \n.page.next{left:auto;right:10px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}   \n.page:hover{-webkit-transform:rotate(90deg) scale(1.4);transform:rotate(90deg) scale(1.4)}   \n.page.next:hover{\n  -webkit-transform:rotate(-90deg) scale(1.4);transform:rotate(-90deg) scale(1.4)\n}\n@-webkit-keyframes fade-in{\n    0%{opacity:0}\n    50%{opacity:0}\n    to{opacity:1}\n}\n@keyframes fade-in{\n    0%{opacity:0}\n    50%{opacity:0}\n    to{opacity:1}\n}\n\n```\n\n`CircularTemplate.js`\n\n```jsx\n\nimport React,{ Fragment } from 'react';\nimport { connect } from \"react-redux\";\nimport './CircularTemplate.scss'\n\n\nclass CircularTemplate extends Component{\n  render(){\n    if (this.props.canvas){\n      return(\n        \u003cdiv className={this.props.selectedProjectChanged ? 'selected-project active' : \"selected-project unactive\"}\u003e\n          \u003cdiv className=\"project-summary\"\u003e\n            \u003cimg src={`${this.props.canvas.iconUrlMedium}`} alt=\"logo\" /\u003e\n            \u003ch5\u003e{this.props.canvas.name}\u003c/h5\u003e\n            \u003cp\u003e{this.props.canvas.summary}\u003c/p\u003e\n          \u003c/div\u003e\n          \u003ca className=\"text-btn\" href={`${this.props.canvas.projecturl}`}\u003e\n              View Project\n          \u003c/a\u003e\n        \u003c/div\u003e\n      )\n    }else{\n      return null\n    }\n  }\n}\nfunction mapStateToProps(state) {\n  return {\n    canvas: state.Canvas \u0026\u0026 state.Canvas.data,\n    selectedProjectChanged: state.Canvas \u0026\u0026 state.Canvas.isProjectChanged\n  }\n}\n\nexport default connect(mapStateToProps, null)(CircularTemplate);\n\n```\n\n```jsx\nimport React,{ Fragment } from 'react';\nimport ReactCircularGraph from 'react-circular-graph';\nimport CircularTemplate from './CircularTemplate';\n\nvar config = {\n    \"ENABLE_ERROR_REPORTING\": true,\n    \"LIST_PAGE_SIZE\": 48,\n    \"EXPLORE_PAGE_SIZE\": 80,\n    \"MOBILE_WIDTH\": 720,\n    \"COLORS\": {\n      \"GREEN\": \"#34A853\",\n      \"RED\": \"#EA4335\",\n      \"BLUE\": \"#4285F4\",\n      \"YELLOW\": \"#FBBC05\"\n    }\n}\n\nvar data = [\n    {\n      \"id\": \"tensorflow\",\n      \"name\": \"TensorFlow\",\n      \"summary\": \"TensorFlow is a fast, flexible, and scalable open source machine learning library for research and production\",\n      \"iconUrlSmall\": \"https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ1HC13sEyluXwZoYWC2w2i9qsPjQ\u0026sqp=-oaymwEICEwQTCAAUAEIttCMygU\",\n      \"iconUrlMedium\": \"https://www.gstatic.com/opensource/project-images/tensorflow/logo.png?rs=AGWjSYQ7IXg35u8B_D41kSCIRrHjJYcfng\u0026sqp=-oaymwEKCIwBEIwBIABQAQi20IzKBQ\",\n      \"primaryColor\": \"#E26026\",\n      \"startsWith\": \"t\",\n      \"fallbackColor\": \"#34A853\",\n      \"RGB\": {\n        \"r\": 226,\n        \"g\": 96,\n        \"b\": 38\n      }\n    },\n  ]\n\nReact.render(\n    \u003cdiv className=\"react-cirular-graph\"\u003e\n        \u003cReactCircularGraph\n            width={720}\n            height={720}\n            data = {data}\n            config = {config}\n            selectedNode = {(node)=\u003econsole.log(node)}\n            selectedProjectChanged={(object) =\u003e { this.selectedProjectChanged(object) }}            \n        /\u003e\n        \u003cCircularTemplate /\u003e\n    \u003c/div\u003e, document.body);\n    \n```\n\n\n### Screenshot\n\n![Preview][screenshot]\n\n[screenshot]: https://github.com/Anishmprasad/circular-knowledge-graph/raw/master/src/public/images/screenshot.png \"Preview screenshot\"\n\n\n## Built With\n\n* [React](https://https://reactjs.org/) - A JavaScript library\n\n## Author\n\n- Anish M Prasad (anishmprasad@gmail.com)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/Anishmprasad/circular-knowledge-graph/blob/master/README.md) file for details\n\n**In the words of Martin Luther King Junior:**\n\u003e Hate cannot drive out hate; only love can do that.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Freact-circular-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanishmprasad%2Freact-circular-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanishmprasad%2Freact-circular-graph/lists"}