Skip to main content
SimilarExport ZIP
100%

ICE-5 Hasini

✓ Published0🌍 Public
Hhasinipriyad7@gmail.com
Last edited Oct 5, 2025
Created on Oct 3, 2025
Forked from HTML Starter

This example presents a two-part visualization of Harry Potter Quidditch data. It loads and parses a CSV file using `d3.csv` and `fetch`, displaying total row and column counts, column names, file size, and the first ten records in a table. It then uses D3’s `selection.append` to render a simple SVG graphic of a Golden Snitch with a gold circle and two white wing paths. The data comes from a GitHub gist and is rendered with D3 v7 and SVG.

AI-generated description
MIT Licensed

Similar vizzes

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 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
81% 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
79% 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
79% 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
78% match
Loading thumbnail…

veda_ice5

This example summarizes the Hogwarts dataset by displaying key statistics about the loaded CSV file, including row and column counts and estimated file size. It uses D3.js v7 to fetch the data from a remote GitHub repository and compute these metrics. The page also features a decorative wand with a sparkle animation and an embedded SVG triangle image, rendered with inline SVG markup. The visualization focuses on presenting a simple data summary alongside playful, Harry Potter-themed visual elements, all styled with custom CSS.

Vvedasrivarma13@gmail.com
76% match
Loading thumbnail…

veda_ice5

This example summarizes a Hogwarts-themed dataset using D3.js version 7, loading CSV data from a GitHub repository. The visualization displays the dataset’s structure by computing and presenting row and column counts, along with an estimated file size in kilobytes, in an HTML summary panel. The page also features a hand-coded SVG illustration of a wand with an animated sparkle effect, created with CSS keyframes, alongside a simple geometric triangle composition rendered directly in SVG. The code uses D3’s `csv` method to fetch and parse the data, then dynamically updates the Document Object Model (DOM) elements to show the calculated metadata.

Vvedasrivarma13@gmail.com
76% match
Loading thumbnail…

ICE-7 Hasini Pie Chart

This pie chart visualizes the distribution of Quidditch house points from a CSV dataset, aggregated by house and displayed with labeled slices and an HTML legend. It uses D3 v6’s `d3.pie` and `d3.arc` generators to compute angles and paths, while a `d3.scaleOrdinal` assigns house colors. The SVG renders slices and text labels, and a separate legend div shows total points and percentages.

Hhasinipriyad7@gmail.com
76% match