Skip to main content
SimilarExport ZIP
100%

Fork of ICE6.1

✓ Published0🌍 Public
Vvedasrivarma13@gmail.com
Last edited Mar 21, 2024
Created on Mar 21, 2024
Forked from 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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

s6

This scatter plot maps Hogwarts house names to numeric hobby values, showing the distribution of hobby associations across Gryffindor, Hufflepuff, Slytherin, and Ravenclaw. The visualization uses an SVG rendered through React, with D3 v6’s `scalePoint` for the categorical x-axis and `scaleLinear` for the y-axis. Circles represent individual data points, positioned via `x()` and `y()` scale functions. Axis labels and a title are added using SVG text elements, while the chart is styled with CSS for a light blue background and tomato-red dots.

Vvedasrivarma13@gmail.com
84% 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
83% 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
82% 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
81% match
Loading thumbnail…

ice6-bargraph

This bar chart displays the number of Hogwarts students in each of the four houses, using the Chart.js library with canvas rendering. It shows Gryffindor, Slytherin, Ravenclaw, and Hufflepuff in their canonical colors, with counts derived from a CSV file. The code fetches the data via the fetch API, processes it by counting house occurrences, and draws the chart with explicit axis titles and a hidden legend.

Vvedasrivarma13@gmail.com
80% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, or virginica). The code loads CSV data via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to compute domains. Circles are rendered as SVG elements with `d3.selectAll` and `data().join()`, while axes are added using `d3.axisLeft` and `d3.axisBottom`. Axis labels are drawn with SVG `text` elements.

Ssai snehith nadipally
80% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position and label the points, with SVG circles drawn via `selectAll` and `join`. The data loads from a CSV using `d3.csv`, and the viewport fills the browser window. The code also applies an unusual `rx` and `ry` attribute to each circle, though the fixed radius of 5 overrides their visual effect.

NNikitha123171
80% match
Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis, with points colored by species (green, violet, red). It loads data from a CSV via `d3.csv`, parses numeric fields, and renders SVG circles using D3 v6. The code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create scales and axes, while a `switch` function assigns colors. Axis labels are added with rotated SVG text, and the visualization fills the full browser window.

VVineela Reddy
79% match