Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React + D3 Viz Starter

Public visualization

Fork of React + D3 Viz Starter

0 stars0🌍 Public
KKurt Weinheimer
Last edited Jun 1, 2022
Created on May 31, 2022

This example demonstrates a React and D3.js starter template with a configurable SVG container that follows the margin convention. The React component `VizContainer` renders an SVG with optional margin visualization, controlled via the `showMargins` prop. The app fetches profile statistics from the Lens API using the `urql` GraphQL client, querying data such as followers, following, posts, mirrors, and comments for a specified handle. The fetched data is logged to the console, while the visualization area remains empty.

AI-generated description

Boilerplate code for a React + D3 visualization with:

  • CDN links for React, ReactDOM, and D3
  • Basic React boilerplate
  • Variables for dimensions and margins
  • A VizContainer component that:
    • Abstracts SVG/group container elements
    • Follows the margin convention
    • Show the margins, which can be easily removed by deleting the showMargins={true} prop

Comments

Sign in to join the discussion.

MIT Licensed