React component for visualizing graph data

Overview

react-graph-viz-engine

An out-of-the-box React component for visualizing graph data.

Key features:

  • An easily embeddable React component to render force-directed graphs.
  • Integrated translation into library specific formats from a unified standard (GraphQL).
  • A straightforward way to add (rule-based) styling and interactions to your visualizations.
  • Support for multiple renderers & graph layouts.

React component for visualizing graph data.

Getting Started

TLDR - Try the Online Demo!

This project wraps the library in a Storybook UI. More information on Storybook here.

The Storybook provides examples for each of the functionalities this library provides. For each of these examples, you can:

  • Change the config parameters in the "Controls" tab and see how they affect the visualization ;
  • Get the corresponding JSX definition of the React component

JSX definition in Storybook

Run the storybook locally

To run the storybook on a local machine, clone the repo. Then:

yarn install
yarn start

A web browser will open with the storybook definitions for the component.

Using the component in your own apps

To use this component in your own React app, first install the library:

npm install react-graph-viz-engine
  • or -
yarn add react-graph-viz-engine

Then, you can include the component anywhere inside your app:

import GraphVisualization from 'react-graph-viz-engine'
import React from "react";

export const App = () => {
return <GraphVisualization
        data={...}
        graphqlUrl={...}
        graphqlQuery={...}
        renderer="cytoscape"
        layout="graph"
        showNavigator={false}
        style = {},
        interactions = {} />
}

The Storybook contains examples on what to use in the fields of the GraphVisualization component.

Extending the library

This library can be extended with your own graph renderers and customizations. See src/component/renderer/cytoscape and src/component/renderer/react-force-graph for examples.

After cloning this repository, install and run the storybook:

yarn install
yarn start
# yarn build

Each component (src/component/renderer/) should contain the following five files:

renderer.tsx:       The react component that renders the visualization.
formatter.ts:       Code responsible for translating the generic data object into a visualization-specific data format.
config.ts:          A place for generic config variables for the visualization.
config-mapper.ts:   Code responsible for translating the generic configuration object into visualization-specific style config.
style.css:          CSS styling to apply to the React component.

Don't forget to extend src/component/graph/Graph.tsx to include your custom component.

Feature Requests / Issues

This is an experimental release of the library. If you have any questions, please reach out to the maintainers of this project. Feedback is much appreciated.

You might also like...
A anime discovery, streaming site made with NextJs and TailwindCSS. Uses AniList API and video data from GogoAnime. No ads and no vpn required
A anime discovery, streaming site made with NextJs and TailwindCSS. Uses AniList API and video data from GogoAnime. No ads and no vpn required

Animeflix - Watch animes online The open-source anime streaming service made with NextJs and TailwindCSS. It lets you search, watch animes without any

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.
General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

Boilerplate for creating React component libraries, bundled with Rollup.js to ES6 Modules, React Styleguidist, Typescript

A react library to convert react jsx svg component to image dataurl.

Jsx To Png A react library to convert react jsx svg component to image dataurl. Motivation I wrote many react-svg components. Practically, I need to c

React-quizlet-flashcard - A replica of quizlet's flashcard component built with react and typescript
React-quizlet-flashcard - A replica of quizlet's flashcard component built with react and typescript

react-quizlet-flashcard A replica of quizlet's flashcard component built with ty

A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.
A Cool VSCode extension that lets you create react component files/folders instantly with boilerplate code. It also handles imports/exports on its own.

React Component Generator v1.0.0 A cool VSCode extension that lets you create your component's files/folders instantly with boilerplate code. Also aut

Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.
Test concept that contains a simple layout to try out a basic react component composition by using technologies such as Vite and Tailwindcss.

Football squad stats Comments This is a conceptual test aimed at trying out technologies such as: React (TypeScript). Vite Tailwindcss daisyUI Install

Warp `TinyMCE` into `React Component`

mb-react-tinymce Online DEMO Try to deal with: Warp TinyMCE into React Component Also provides a hackable EditorToolbar Component Basic Usage You can

A CLI and toolbox to extract information from React component files for documentation generation purposes.

react-docgen react-docgen is a CLI and toolbox to help extracting information from React components, and generate documentation from it. It uses ast-t

Comments
  • explicitly set content-type header for GraphQL request

    explicitly set content-type header for GraphQL request

    I ran into some cases where the content-type header in the GraphQL request was set to text/plain instead of application/json. This PR explicitly sets the content-type header to application/json for every GraphQL request.

    opened by johnymontana 1
Owner
null
React-sus - Minimal Suspense-based data-fetching for react

(Currently in development and not production-ready) react-sus npm i react-sus Mi

Henry Gressmann 1 Feb 2, 2022
StarHackIt: React/Native/Node fullstack starter kit with authentication and authorisation, data backed by SQL.

StarHackIt StarHackIt is a fullstack starter kit composed of: React web frontend Node backend React native mobile app Infrastructure as code with GruC

FredericH 1.3k Dec 9, 2022
Step-by-step guide to setting up and launching a TypeScript/React web app querying Ethereum blockchain data in standard querying language (GraphQL)

Your first Web3 dApp: React app reading real Ethereum blockchain database Step-by-step guide to setting up and launching a TypeScript/React web app qu

null 30 Jun 1, 2022
A front end project using react js, html and CSS to fetch data from the pokemon API.

A front end project using react js, html and CSS to fetch data from the pokemon API. The web application searches for Pokemon characters and displays their stats and images.

Vincent Nyapuodi 1 Nov 1, 2021
New Coins and Active Coins List with react-redux and recive data with API

New Coins and Active Coins List **This is my react project **First of all I used react and redux **Project will create a list for new coins and active

Atilla Taha Kördüğüm 3 Apr 10, 2022
Shouldiplay - A React app that combines data from HowLongToBeat and OpenCritic

Should I Play This? Website allows users to search for games and the results mer

Faiz-ur Rahman 43 Dec 16, 2022
Reactjs-server-side-table - A React module that can be used for rendering tables with dynamically paginated data

ReactJs Server Side Table A React module that can be used for rendering tables w

Ploud Technology 2 Jan 31, 2022
React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

pascal de creator 11 Oct 21, 2022
Rohan Kokkula 101 Dec 25, 2022
Solidjs-meteor-data - Helpers for combining SolidJS and Meteor reactivity

solidjs-meteor-data This package provides helper functions for combining the rea

Erik Demaine 13 Nov 11, 2022