Skip to main content
100%

ICE-6: Rendering Marks & Channels with "React & D3"

✓ Published0🌍 Public
Ssaijahnaviappineni
Last edited Jun 25, 2022
Created on Jun 25, 2022

This example visualizes the salary estimates for the top 10 data scientist job titles using horizontal bars rendered as SVG rectangles. The React component manages state with `useState` and `useEffect`, loading and parsing CSV data via `d3.csv` while the D3 scales (`d3.scaleBand`, `d3.scaleLinear`) compute bar positions. Each bar’s width maps to salary values, with rendered axis ticks and labels. D3 v5 handles the data loading and scaling, while React elements compose the final SVG output within an HTML page that loads both libraries from a CDN.

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
MIT Licensed

Similar vizzes