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
MMarcus
Last edited Jun 4, 2023
Created on Jun 4, 2023

A line chart tracks IBM’s daily closing stock prices throughout March 2020 using D3.js v6 within a React framework. The visualization loads data from a local CSV, maps dates and closing values to x- and y-axes, and draws a smooth monotone curve. Animated transitions sequentially reveal the line’s stroke, followed by points and text labels that show each day’s price, colored green or red based on daily change. The SVG rendering includes margin containers and axis ticks styled with cornflowerblue, demonstrating a reusable VizContainer component.

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