CyberGraph is a 3D-graph based, user based social connection explorer

Related tags

Data Visualization CyberGraph
Overview

CyberGraph

CyberGraph

Live Site

About this project

CyberGraph is a 3D-graph based, user based social connection explorer. It has some cool features like 3d node graph, dynamic loading bar, immersive user experience, cyber mode(10-hops friendship network display) and focus mode(aggregated connection display).

This project is inspired from Gitcoin Scheduling Point Virtual Hackathon contest submissions which is making a social explorer with cyberconnect on Web3.


Technologies We Used


About Gitcoin Hackathon

CyberGraph is still well under improvement with many features in the pipeline. This is a perfect scenario for the whole community to join us and BUIDL together. Please see more information on Gitcoin Grants Round 13 Hackathon CyberConnect Task 1


We invite the community to experiment with it and add innovative features or make constructive product suggestions. A few examples that sprung to our mind: adding node visual effects to make it easier to read user info; differentiating connection & nodes visually, maybe on the basis of connection types, connection quantity, etc, and in terms of color, brightness, distance, etc; enabling continuous exploration where users can track their path of connections; adding subgroups; enabling exploring the connections between two queried nodes; optimizing graph filtering and visualization so to balance between UX and informative efficiency.

Sub-tasks

  • POAP Fetching & NFT Fetching
  • Following & Follower List Display
  • Innovative Features & Product Suggestions (Like adding node visual effects features to make it easier to read user information)

Welcome to discuss and learn in our discord Hackathon channel and make your submission. CyberConnect team welcomes anyone who wants to join Web3 world and is happy to transfer development knowledge.

Participants from Gitcoin SPVH hackathon and other contributors please contact [email protected] to append to the list. We are looking forward to more people's participation!


Run the App

Set the following variables in .env

Then run:

yarn install

yarn run dev

Open the browser, open Localhost and you will see the UI of the project.

Follow Us

You might also like...

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs β€”

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs β€”

p5.js Welcome! πŸ‘‹ πŸ‘‹πŸΏπŸ‘‹πŸ½πŸ‘‹πŸ»πŸ‘‹πŸΎπŸ‘‹πŸΌ p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for a

Jan 1, 2023

:bar_chart: A D3-based reusable chart library

c3 c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications. Follow the link for more information: http

Jan 2, 2023

πŸ”₯ JavaScript Library for HTML5 canvas based heatmaps

πŸ”₯ JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Jan 2, 2023

A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

Jan 3, 2023

Powerful data visualization library based on G2 and React.

Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Jan 3, 2023

:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

:bar_chart: Re-usable, easy interface JavaScript chart library based on D3.js

billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+. The name "billboard" comes from the famous billboard chart whic

Jan 1, 2023

πŸ“Š Data visualization library for React based on D3

πŸ“Š Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

Dec 31, 2022

A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

Feb 5, 2021

C7 is a canvas-based UI toolkit.

C7 is a canvas-based UI toolkit.

C7 C7 is a canvas-based UI toolkit. δΈ­ζ–‡η‰ˆ Introduction C7 re-implements the key technology of modern front-end development based on HTML canvas (witho

Oct 22, 2021
Comments
  • feat: add more visual effects

    feat: add more visual effects

    This PR adds a some visual effects to the galaxy, so that it looks more legendary:

    • [x] bloom effect.
    • [x] link label.
    • [x] highlighted nodes and links after clicking.
    • [x] optimize the performance of animation, it should be smoother.

    Preview: sc

    opened by Soptq 4
  • feat: Find your node

    feat: Find your node

    • Show a "You" text for your node instead of a sphere so that you can more easily see your node
    • Added a "Find your node" button in the bottom-right corner that will bring your node into the camera view

    Screen Shot 2022-03-15 at 2 23 34 PM

    opened by robyn3choi 2
  • feat: show NFTs and POAPs in user panel

    feat: show NFTs and POAPs in user panel

    • Displays NFTs in a scrollable list
    • Hover over an NFT to see its name
    • Click an NFT to open a modal with its name, description, and OpenSea link
    • I used Moralis's NFT API to fetch NFTs, so you'll need these 2 environment variables:
      • NEXT_PUBLIC_MORALIS_APP_ID
      • NEXT_PUBLIC_MORALIS_SERVER_URL

    Screenshots:

    Screen Shot 2022-03-29 at 4 21 40 PM

    Screen Shot 2022-03-29 at 4 21 57 PM

    opened by robyn3choi 1
  • Adds following/followers list and NFT fetching

    Adds following/followers list and NFT fetching

    Added

    Added following/followers list

    • Click on the followers/following counter to open
    • Shows top 50 followers/following
    • See each follower/following ENS and address
    • Clicking on follower avatar opens them in cyber connect

    Added NFT counter to user panel Added NFT gallery

    • Click on the NFT counter on the user panel to open
    • Shows header with a counter of how many NFTs with images were found
    • Displays all NFTs with images in a gallery style
    • Click on an NFT to open an info menu
    • If an NFT fails to load it will show an error image and let you open it in a new tab (usually happens due to the file being an mp4 instead of an image or GIF)

    Added help menu

    • Shows the description of the app and controls

    Tweaked

    Tweaked the β€œEXPLORE ME!” button

    • Now opens user on cyber connect instead of previously not working

    Tweaked UserPanel opacity

    • Reduced user panel opacity to make it easier to navigate the graph

    Tweaked loading bar behavior on the landing page

    • Only on the loading page loading bar is moved onto the β€œLet’s jump in” button and the button is disabled while loading to reduce confusion

    Tweaked balance counter

    • Now when clicked opens eth balance tracker (just like the eth balance tracker icon on the bottom)

    Fixed

    Fixed grammar issues

    • Changed β€œfollowings” to following
    • Added β€œthe” prefix to metaverse on the landing page
    • Removed all caps from graph mode select
    opened by markosneiders 1
Owner
CyberConnect
Building on web3
CyberConnect
GitHub cyber-graph.vercel.app
A JavaScript library dedicated to graph drawing

sigma.js - v1.2.1 Sigma is a JavaScript library dedicated to graph drawing, mainly developed by @jacomyal and @Yomguithereal. Resources The website pr

Alexis Jacomy 10.3k Jan 3, 2023
a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Christian Swinehart 2.6k Dec 19, 2022
Gephi - The Open Graph Viz Platform

Gephi - The Open Graph Viz Platform Gephi is an award-winning open-source platform for visualizing and manipulating large graphs. It runs on Windows,

Gephi 5.1k Jan 4, 2023
3D graph viewer powered by WebGL (three.js)

Graphosaurus A three-dimensional static graph viewer. (click the image to try it out) Demos EVE Online map Add nodes incrementally Documentation JSDoc

Corey Farwell 362 Dec 4, 2022
Simple tiny dependency graph engine, MobX inspired

?? Quarx Simple tiny dependency graph engine, MobX inspired Introduction In less than 200 lines of code and zero dependencies Quarx supports most of M

Dmitry Maevsky 22 Nov 2, 2022
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation

Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.

Nathan S. Santos 39 Jan 5, 2023
Typr is a full-stack web application designed for new developers to improve their typing skills. User Authentication, Multiplayer, and Statistics included.

Typr Typr is a full-stack web application designed for new developers to improve their typing skills. It includes Javascript, Ruby and Python typing p

Connor Mullin 5 May 12, 2022
Automatic chart generator from user input using CharGPT.

Chart GPT A platorm for generate chart with ChatGPT ??️ ChatGPT Generator is under development. Features Light/dark mode toggle Live previews Fullscre

Ehsan Ghaffar 6 May 5, 2023