s6 — VizHub

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.

84% match

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.

82% match

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.

81% match

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.

78% match

Data analysis

The visualization displays survey data from a class, plotting each student’s programming skills against their visualization skills in a scatter plot, while a bar chart shows their average rating across all skills. The bar chart is grouped by hobbies, and clicking a bar or circle highlights the corresponding student in both views. The code uses D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the charts, with `scaleOrdinal` for categorical colors. Data is loaded from a CSV file and rendered as SVGs.

SSsbThatsMe

Interactive Scatter Plot for Boston Housing Dataset

This interactive scatter plot explores correlations among variables in the Boston Housing Dataset, with dropdown menus to select X and Y axes. Points encode Charles River proximity via color and pupil-teacher ratio via size. Hovering over legend items filters and highlights matching points by adjusting opacity (20%, 50%, 80%). Built with React and D3 v5, it uses `scaleLinear` for positioning and size, `scaleOrdinal` for color, and SVG rendering. Data is loaded via `d3.csv` from a GitHub-hosted CSV file.

Yyuzhang21

Cchamarthisreenivasvarma@gmail.com

Fork of Reusable scatterplot

This example uses Chart.js to render a scatter plot of the official colors associated with various college sports teams. The x-axis positions each team in sequence, the y-axis shows the rank of each color within that team’s palette, and each point is filled with its corresponding hex value from the CSS Named Colors CSV data. The visualization reveals the color sequences and frequencies across different universities.

Hello VizHub

A scatterplot maps the popularity of seven JavaScript frameworks, plotting years in use against GitHub stars, with circle size representing fork counts. The visualization is divided into four quadrants by reference lines, labeling categories like "In Fashion" and "Rock Stars." Built with D3 v5 and React, the code uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG elements rendered via `d3.select` and data joins. Static HTML, CSS, and a pre-bundled JavaScript file load the chart.

JJoker-tr