Fork of SharanyaSriram

100%

Fork of SharanyaSriram

✓ Published0🌍 Public

Last edited Mar 10, 2023

Created on Mar 10, 2023

This chart shows the number of weeks each of the top 15 tennis players has played, ranked vertically with horizontal green bars. It uses React for component state and rendering, while D3 v5 handles CSV data loading and scales (`d3.csv`, `scaleBand`, `scaleLinear`). The SVG output includes custom gridlines and axis labels drawn manually via React elements, with a fixed 960×500 viewport. Data originates from a remote CSV file listing player names and weeks.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

SharanyaSriram

A horizontal bar chart shows the number of weeks each of the top 15 tennis players competed, sorted by name. The visualization loads player data from a CSV file using `d3.csv`, then renders green SVG rectangles scaled with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, with axes drawn manually and tick labels positioned via React components and D3’s selection utilities.

SSharanyaSriram

92% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Sports List

A horizontal bar chart displays the popularity of sports in 2021, ranking eleven sports by match counts from a CSV dataset. The visualization uses React with D3 v5, employing `d3.csv`, `scaleBand`, and `scaleLinear` to map data to SVG rectangles. Purple bars represent match totals, with axes drawn using `xScale.ticks()` and manual tick text. The chart renders client-side, fetching data from a GitHub gist URL.

SSaiSree0122

73% match

Loading thumbnail…

Fork of company List

This visualization displays sports-related data from a CSV file as a horizontal bar chart, ranking the top 11 entries by their 2021 match counts. The chart uses React for component-based rendering and D3 v5 for data loading and scale construction. Specifically, it employs `d3.csv` for data fetching, `scaleBand` for the categorical y-axis, and `scaleLinear` for the numeric x-axis. The SVG rectangles are colored purple and rendered directly within a React component, with axes and tick labels generated manually using D3's scale methods.

NNaimisha-M

73% match

Loading thumbnail…

Fork of Fork of Fork of Sports List

A horizontal bar chart displays the popularity of sports in 2021, ranking eleven sports by match count. The visualization uses React with D3.js v5, loading data from a CSV file and rendering the chart as an SVG. D3's `csv` function parses the data, while `scaleBand` and `scaleLinear` position bars and axes. The bars themselves are SVG rectangles filled with purple, and the chart includes axis ticks and labels generated with D3's `scaleLinear` and `scaleBand` methods.

NNaimisha-M

73% match

Loading thumbnail…

Fork list

A horizontal bar chart displays the popularity of eleven sports in 2021, with purple bars representing match counts on a blue grid. The visualization loads data from a CSV file using `d3.csv` and renders an SVG via React. It employs `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with `d3.max` determining the domain, while axis ticks are manually generated from the scales.

Ppavan0828

72% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Sports List

This visualization presents a ranked bar chart of popular sports in 2021, sourced from a CSV dataset and rendered as an SVG via React. The code uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for positioning, and d3.max for domain calculation. Horizontal bars display each sport’s match count, with axis ticks and labels generated manually using d3.ticks. The chart is built with React hooks (useState, useEffect) and ReactDOM rendering, with D3 selections integrated for scaling and formatting.

NNaimisha-M

72% match

Loading thumbnail…

Victory!

A bar chart ranks tennis players by total weeks spent as the world's number one, using data from a CSV file. The React component loads the data with d3's `csv` function inside a `useEffect` hook. Victory Charts' `VictoryChart` and `VictoryBar` render the ranked bars, with the x-axis listing player names and the y-axis showing weeks, and gender is included in the data but not visually encoded.

RRakshith

72% match

Loading thumbnail…

Fork of CSCE-5320 ICE-6

This example shows a horizontal bar chart of the top ten cricket players by total runs, with green gridlines and labeled axes. It loads CSV data from a GitHub gist, slices the dataset to the first ten rows, and renders the bars as SVG rectangles using React. The visualization uses `scaleBand` for the player categories and `scaleLinear` for the run values, with `axisBottom` and `axisLeft` omitted in favor of manual tick generation via `xScale.ticks()`. Styling is applied through inline SVG attributes and CSS in the HTML file.

Cchandrakalavanukuri

72% match