Skip to main content
SimilarExport ZIP
100%

ice6-bargraph

✓ Published0🌍 Public
Vvedasrivarma13@gmail.com
Last edited Mar 21, 2024
Created on Mar 20, 2024
Forked from HTML Starter

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.

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

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.

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
81% 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
80% 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
72% match
Loading thumbnail…

Fork of ICE6

This example shows a bar chart of the number of colors associated with each college sports team, aggregating the data from a flat list of team-color-count entries. It uses the Chart.js library to render the chart onto a canvas element, with team names on the x-axis and the aggregated color counts on the y-axis. The data is processed by first grouping entries by team and summing their counts, then feeding the resulting arrays into a bar chart configuration with a sky-blue background color.

Cchamarthisreenivasvarma@gmail.com
71% 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
70% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels (Bar Chart)

A bar chart displays the 2022 population data for the top three students, using horizontal bars to show marks. It loads CSV data from a GitHub gist via `d3.csv`, then renders an SVG with React. The chart uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.axisBottom` and `d3.axisLeft` are omitted, with custom ticks drawn instead. Purple gridlines and labeled axes are included.

Mmanishcheruku
70% 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
70% match