Skip to main content
SimilarExport ZIP
100%

ICE-6

✓ Published0🌍 Public
Hhasinipriyad7@gmail.com
Last edited Oct 18, 2025
Created on Oct 18, 2025
Forked from React Starter

This interactive bar chart visualizes total Quidditch points per player, sorted from highest to lowest. It uses React 19 and D3 v7 to load CSV data, aggregate player scores, and render SVG rectangles as bars with axis labels and value annotations. D3 scales (scaleBand, scaleLinear) and formatting utilities (format) handle the positioning and tick generation, while React manages the component state and DOM updates.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE 6

This horizontal bar chart displays total Quidditch points aggregated per player from a CSV file, sorted from highest to lowest. The visualization uses React to manage state and render SVG marks, while D3 version 7 handles data loading via `d3.csv`, scaling with `scaleBand` and `scaleLinear`, and formatting with `format`. An indigo bar per player encodes point totals on the x-axis, with player names labeled on the y-axis and value labels at each bar’s end. Grid lines and tick labels along the x-axis aid quantitative comparison.

Hhasinipriyad7@gmail.com
96% match
Loading thumbnail…

ICE-6 Hasini

This example visualizes total Quidditch points per player as a horizontal bar chart, with bars sorted from highest to lowest and value labels placed beside each bar. Built with React and D3 v7, it uses a custom CSV parser to load and aggregate player-points data, then renders SVG marks via `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` for domain calculation, with grid lines and formatted tick labels from `d3.format`.

Hhasinipriyad7@gmail.com
93% match
Loading thumbnail…

ICE-6

This horizontal bar chart displays total Quidditch points earned by players from a CSV file, with bars colored by Hogwarts house (Gryffindor, Hufflepuff, Ravenclaw, Slytherin) and labeled with each player's point total. The visualization loads data via `d3.csv`, aggregates points per player using JavaScript's `reduce`, and renders SVG elements through React components. Axis ticks, grid lines, and bar labels are generated using `d3.scaleBand`, `d3.scaleLinear`, and `d3.format`, while the chart layout is defined by explicit margin and size constants.

Hhasinipriyad7@gmail.com
93% match
Loading thumbnail…

ICE-7 Hasini Reusable Scatter Plot

This example shows a reusable scatter plot that compares Quidditch player performance, plotting total points against average points per match. Data is loaded from a gist and aggregated by player before rendering with D3 v6. The visualization uses d3.scaleOrdinal for house colors and symbols, d3.symbolGenerator for point shapes, and d3.axisBottom/Left for axes. Hovering highlights individual points and logs player details to the console, while a legend identifies the four houses.

Hhasinipriyad7@gmail.com
82% match
Loading thumbnail…

ICE-6 Mutli Series Hasini

This visualization of Quidditch match performance combines a dark-green bar chart for goals scored with a gold line and points for snitch catches across successive matches. The data is aggregated from a Gist CSV file, grouped by match number using `d3.group`, and rendered as SVG. The chart features dual y-axes, a left axis for goals and a right axis for snitch catches, generated with `d3.axisLeft` and `d3.axisRight`. The code uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for both y-axes, and `d3.line` for the trend line, within a styled container with a legend.

Hhasinipriyad7@gmail.com
81% match
Loading thumbnail…

ICE-6 ScatterPlot

This interactive scatter plot displays individual match points against total career points for players, with each point’s color corresponding to their Hogwarts house. Built with React and D3 v7, it loads tabular data via `d3.csv` and renders circles as SVG elements. The axes are generated using `d3.axisBottom` and `d3.axisLeft`, while linear scales (`d3.scaleLinear`) map the data domains to pixel ranges. The visualization highlights house-based distributions in the dataset, which is fetched from a GitHub gist.

Hhasinipriyad7@gmail.com
80% match
Loading thumbnail…

ICE-6

This interactive bar chart displays the top 12 bowlers with the most wickets in a calendar year, using a horizontal layout with labeled axes. The visualization loads data from a CSV file via `d3.csv` and renders the chart as an SVG. React manages the component state and lifecycle, while D3's `scaleBand` and `scaleLinear` position the bars and ticks. The code explicitly draws gridlines, axis labels, and rectangles for each data point, with the title "Most Wickets by a Player in a calender Year" displayed above the chart.

AAbhinav-Mullapudi
79% match
Loading thumbnail…

ICE 6: Bar Chart Styling

This visualization displays the length of each game played from a CSV dataset, using a horizontal bar chart where each bar represents a game. The chart is built with React and D3 v5, employing scales from `d3.scaleBand` and `d3.scaleLinear` to map game numbers and lengths to screen coordinates. SVG rectangles are rendered for the bars, while custom tick marks and labels are generated manually using D3’s `scaleLinear.ticks()` and the band scale domain. Data is loaded asynchronously via `d3.csv`, and the chart is styled with green gridlines and blue text.

SSatyaVineeth
79% match