Graph Data Visualization With GraphQL & react-force-graph

• force-graph

  2 1,442 5.3 JavaScript

  Force-directed graph rendered on HTML5 canvas

The force-graph JavaScript library can be used to help build interactive data visualizations using a force-directed layout. It uses HTML5 Canvas for rendering and the d3-force layout algorithm. There are also 3D and AR/VR versions of the library, as well as a React flavor, which is what we'll be using.

• lobste.rs-graph

  1 30 9.9 JavaScript

  Importing Lobste.rs data into Neo4j Aura using GitHub Actions

Code is available on GitHub

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• react-force-graph

  6 1,906 7.4 HTML

  React component for 2D, 3D, VR and AR force directed graphs

The react-force-graph package

• Lobsters

  264 3,932 9.5 Ruby

  Computing-focused community centered around link aggregation and discussion

  

In this post we explore building an interactive graph data visualization using GraphQL as our data source, with the Lobsters GraphQL API we built previously. We'll be using Next.js, Vercel, and the react-force-graph library to add a graph visualization of users, tags, and articles posted to Lobste.rs. Previously we saw how to use GitHub Actions and Neo4j Aura to automate the import of Lobsters data into Neo4j, so check out the previous post if you're interested in that part.

Suggest a related project