Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6: rendering Marks and channels with react and D3

Public visualization

ICE-6: rendering Marks and channels with react and D3

0 stars0🌍 Public
TTharun Reddy
Last edited Mar 12, 2023
Created on Mar 11, 2023

This example visualizes the top 100 movies by IMDB rating as a horizontal bar chart, though it currently displays only the first five entries from a CSV dataset. The chart uses React for component state management, with D3 v5 handling scales, axes, and data loading via `d3.csv`. Marks are rendered as SVG `<rect>` elements, with `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and the code draws custom tick labels and gridlines. It encodes movie names and ratings through spatial position and bar length.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed