Skip to main content
SimilarExport ZIP
100%

ICE-6 ScatterPlot

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

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Hasini Scatterplot

This scatter plot displays the highest individual score for each player in a dataset, with points colored by the player’s Hogwarts house. The x-axis uses a categorical band scale for player names, rotated for readability, while the y-axis linearly maps scores. Built with React and D3 v7, the visualization uses `d3.csv` for data loading, `scaleBand` and `scaleLinear` for axes, and SVG circles for marks. Data is aggregated to show each player’s maximum score, with tooltips revealing details.

Hhasinipriyad7@gmail.com
87% match
Loading thumbnail…

Fork of ICE-6 Hasini Scatterplot

This scatter plot displays the highest individual score for each player, with points colored by Hogwarts house. The visualization uses a band scale for player names on the x-axis and a linear scale for scores on the y-axis. Built with React and D3 v7, the code employs `scaleBand`, `scaleLinear`, and `csv` to fetch and process remote data, rendering circles as SVG marks with rotated labels for readability.

Ssushmitha bungatavula
86% 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
85% 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
84% match
Loading thumbnail…

Fork of ICE6.1

This visualization displays student data from Hogwarts, mapping roll numbers against hobby categories as colored dots. It uses D3 v6 to load a CSV file, scales the data linearly, and renders circles colored by house (Gryffindor, Hufflepuff, Slytherin, Ravenclaw) via an SVG. The code uses `d3.csv`, `scaleLinear`, `extent`, and axis functions (`axisLeft`, `axisBottom`) to create the scatterplot. Labels for "Petal Length" and "Sepal Length" are added, though the data fields are roll number and hobby.

Vvedasrivarma13@gmail.com
82% match
Loading thumbnail…

ICE-6

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.

Hhasinipriyad7@gmail.com
80% match
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
80% match
Loading thumbnail…

ICE-6 Scatter Plot

This example presents an ICE-6 scatter plot, a static visualization that displays individual data points as circles within a bounded area. The plot uses D3.js (v7) to create the visualization, with the code defining scales for positioning, axes for orientation, and SVG elements for rendering. The data appears to be plotted without any encoding for size or color, suggesting a focus on spatial distribution rather than multidimensional analysis. The implementation relies on standard D3 methods like `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, and the visualization is contained in a simple HTML file with a single container div.

Nneeharika2023@gmail.com
80% match