Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

React + D3 + useData Viz Starter

Public visualization

Viewing a saved revision (read-only)

cd9a49d8cdc84f8e9a8cbe398e009d51

React + D3 + useData Viz Starter

1 star4🌍 Public
WWaseem Medhat
Last edited Dec 12, 2020
Created on Dec 12, 2020

This example demonstrates a minimal React + D3 starter template for building SVG visualizations with a reusable margin convention. It fetches Hepatitis C data from a CSV URL using a custom `useData` hook built with `useEffect` and `useState`, loading via D3’s `csv` method. A `VizContainer` component abstracts the SVG and group elements, translating the inner group by the specified margins and conditionally rendering gray rectangles to visualize the chart area. The code relies on CDN-loaded React 16, ReactDOM, and D3 v6, with dimensions hardcoded at 960 by 500 pixels.

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
  • useData hook to fetch a CSV URL.
  • 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