Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

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

Public visualization

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

0 stars0🌍 Public
TTejaswicmandava
Last edited Mar 11, 2023
Created on Mar 11, 2023
Forked from D3 Starter

This example displays a horizontal bar chart of the top 15 movies by their Metascore, using React to manage the component state and D3 version 5 for data processing and scales. It loads a CSV file from a GitHub Gist, parses the numeric score values, and renders the bars as SVG rectangles. The code uses `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.max` to handle data loading, axis positioning, and scaling, with React’s `useState` and `useEffect` to fetch and store the data before rendering.

AI-generated description

A demonstration of how to start using D3 version 6.

Comments

Sign in to join the discussion.

MIT Licensed