Skip to main content
SimilarExport ZIP
100%

Data analysis

✓ Published1🌍 Public
SSsbThatsMe
Last edited Feb 10, 2023
Created on Jan 27, 2023
Forked from D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 testing2

A D3.js bar chart visualizes a single student’s self-assessed skills across five categories: programming, computers, art, communication, and collaboration. Each category is rendered as a fixed-width rectangle, with bar heights scaled by multiplying the numerical skill value by ten. The chart uses SVG rectangles appended directly to a hardcoded, static data object, with no axes or scales defined. Interactive tooltips appear on hover, implemented via D3 mouseover, mousemove, and mouseleave event handlers that dynamically update an HTML div’s opacity and position.

PPere Ginebra Solanellas
79% match
Loading thumbnail…

Testing D3

This visualization displays survey responses from students, showing each participant’s self-assessed collaboration skill as a horizontal bar chart. The bars are sorted in descending order by collaboration score, with aliases displayed along the vertical axis. Built with React and D3 v7, the example uses `d3.csv` to load data from a CSV file, and `scaleBand` and `scaleLinear` to map aliases and collaboration values to screen coordinates. The SVG rendering updates dynamically as the data loads, with a loading message shown initially.

AAdaman32
78% match
Loading thumbnail…

Student Scores Bar Chart

This bar chart displays the scores of twelve students, with each horizontal bar representing an individual’s score from 10 to 99. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and SVG `rect` elements with a hover effect that reduces opacity. Data is loaded from an external CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`.

Pprudhvi
77% match
Loading thumbnail…

Fork of Student Scores Bar Chart 2

This bar chart displays student scores from a CSV file, using a horizontal layout with student names on the y-axis and score values from 0 to 100 on the x-axis. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric scale, and d3.axisLeft and d3.axisBottom to render the axes. Each rectangle’s width is proportional to the score, with a purple fill and hover effect that reduces opacity. The chart is rendered as SVG within a 960×450 pixel viewport, with margins applied to position the plot area.

Pprudhvi
76% match
Loading thumbnail…

Online Sales Bar Chart

This bar chart displays student scores from a local CSV file, with each student's name on the y-axis and their score as the bar length on a linear scale from 0 to 100. The visualization uses D3 v5’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `axisBottom` and `axisLeft` to render the axes. The purple bars are drawn as SVG `<rect>` elements appended to the chart, and hovering over a bar triggers a CSS opacity change.

MManideeprenikindi
76% match
Loading thumbnail…

Fork of Student Scores Bar Chart

This horizontal bar chart displays student exam scores from a CSV file, with each bar representing an individual student’s score on a scale from 0 to 100. The visualization uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data and render an SVG with purple bars that become semi-transparent on hover. Student names appear on the y-axis, while the x-axis shows score values, with the chart laid out within a 960-by-450-pixel SVG canvas.

Oolddb
76% match
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
75% match
Loading thumbnail…

Interactive Bar Chat

This interactive bar chart displays survey percentages for ten programming languages, each bar labeled with its corresponding value. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map categorical data to the SVG coordinate system, with `axisBottom` and `axisLeft` providing labeled axes. Data is parsed from an embedded JSON structure, and grid lines are generated using `axisLeft` with custom tick sizing. The chart is rendered as an SVG within a fixed-width container, with colors and styling applied through CSS classes.

Hhireign
75% match