Skip to main content
SimilarExport ZIP
100%

ice6

✓ Published0🌍 Public
Vvedasrivarma13@gmail.com
Last edited Mar 20, 2024
Created on Mar 20, 2024

This example visualizes the distribution of students across the four Hogwarts houses using a bar chart. It shows that Gryffindor and Slytherin have the highest counts (56 and 57, respectively), while Ravenclaw and Hufflepuff have slightly lower numbers. The chart is built with plain HTML and CSS, using flexbox for layout and fixed heights for bars. It relies on inline styles for bar dimensions and CSS classes for house-specific colors, with no JavaScript libraries or data-fetching involved. The x- and y-axes are manually constructed with styled divs.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
92% match
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
82% 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
77% match
Loading thumbnail…

test

This example visualizes the fictional Hogwarts student dataset from the Palmer Penguins-derived template, plotting the distribution of student hobbies across four houses and seven school years. The visualization uses a stacked bar chart, with each bar representing a school year and segments colored by hobby, encoded via the d3-scale-chromatic categorical color scheme. The chart highlights the frequency of each hobby, such as Wizard chess and Potion brewing, across houses and years, emphasizing patterns like the prevalence of Magical creatures in Gryffindor or the concentration of Wizard chess among second-years. The author demonstrates how to parse categorical and quantitative fields—Roll Num as a number, Year as a quantitative axis—and map them to visual channels. The original data is attributed to the Harry Potter fandom and is licensed under MIT.

Vvedasrivarma13@gmail.com
74% match
Loading thumbnail…

ICE-6 Assignment

This horizontal bar chart displays the percentage of international students across university-hosting countries, with bars sorted descending from highest to lowest. Using React and D3 v5, the visualization maps countries to a band scale on the y-axis and percentages to a linear scale on the x-axis, rendering bars as SVG rectangles. Data loads from a CSV via d3.csv, with y-axis labels manually positioned to accommodate varying country name lengths.

Ssagamreddy929@gmail.com
69% match
Loading thumbnail…

ICE-6 Assignment

A horizontal bar chart ranks universities by the percentage of international students, with countries listed on the y-axis and the percentage on the x-axis. The visualization loads data from a CSV file and uses React hooks to manage state, while D3’s `scaleBand`, `scaleLinear`, and axis functions handle the chart’s scales and ticks. The bars are drawn as SVG rectangles, and the data is sorted in descending order before rendering.

Vvinodreddysagam929@gmail.com
69% match
Loading thumbnail…

Ice-6 DV marks and channels

A horizontal bar chart ranks the ten universities with the highest 2015 admission counts, using grey bars whose lengths are proportional to the admission numbers. The chart is built with React and D3 v5, using `d3.csv` to load the data from a GitHub Gist, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the quantitative x-axis. The SVG output includes axis ticks and labels, rendered via React components mapping over the scale domains.

PPallaviManupati
68% match
Loading thumbnail…

ICE 6: Scientific Data Visualization

This example visualizes the total marks of 17 students in a semester as a horizontal bar chart. The SVG rendering uses React and D3 v5, with data loaded from a CSV file via `d3.csv`. Scales include `scaleBand` for student names on the y-axis and `scaleLinear` for marks on the x-axis, while `xScale.ticks()` generates gridlines, and colored rectangles represent each student’s score.

Nnagarajuobbineni
67% match