Skip to main content
SimilarExport ZIP
100%

Fork of Testing D3

✓ Published0🌍 Public
AAdaman32
Last edited Jan 23, 2022
Created on Jan 23, 2022
Forked from Testing D3

This visualization compares students' self-reported collaboration skills (on a 0–10 scale) across different academic majors. It uses a horizontal bar chart with bars colored by major, allowing viewers to see how collaboration levels vary across disciplines. The chart is built with React, using D3's `scaleBand` and `scaleLinear` for axes and `scaleOrdinal` for the color scale. Hovering over the color legend filters the bars to show only the selected major. Data comes from a CSV file of student survey responses.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

This visualization displays a horizontal bar chart comparing student marks, using a dataset loaded from a CSV file and limited to the first 10 students. The chart renders as an SVG, with blue bars representing each student’s score on a linear scale, while a band scale positions the student names on the y-axis. The code combines React hooks for state management and data loading with D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` to compute scales and render tick marks and rectangles.

Kkirangithub23
79% match
Loading thumbnail…

Fork of Fork of bar chart

This interactive bar chart visualizes the average math score for each academic department, derived from a CSV file containing individual student scores. The D3.js v7 code groups the data by department and computes the mean using `d3.group` and `d3.mean`, with bars and axes rendered as SVG elements. The visualization employs a `scaleBand` for the categorical x-axis and a `scaleLinear` for the continuous y-axis, both using standard D3 axis generators. Hovering over a bar triggers a CSS transition, changing its fill color from blue to amber.

Ssainishanthreddyk@gmail.com
78% match
Loading thumbnail…

Fork of bar chart

This visualization shows the average math scores of students grouped by their academic department, using a simple bar chart to compare performance across Computer Science, Mathematics, Physics, Chemistry, and Biology. The chart is built with D3 v7 and rendered as SVG, loading student data from a CSV file and aggregating it with d3.group and d3.mean. The visualization uses d3.scaleBand for the categorical x-axis and d3.scaleLinear for the continuous y-axis, with bars styled in steelblue that turn orange on hover. Rotated x-axis labels and axis labels generated with d3.axisBottom and d3.axisLeft make the departments readable.

Ssainishanthreddyk@gmail.com
77% match
Loading thumbnail…

D3 Test Fork

This visualization plots student grades against video views in a 2013 HarvardX/MITx course dataset. The scatterplot uses a log scale for the x-axis to accommodate data spread, with D3 v5’s `scaleLog` and `scaleLinear`. Built with React and rendered as SVG, the code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components. Dots are initially colored a fixed red, though the author notes an intention to color by institution, as seen in the `colorValue` variable and `schemeCategory10` import.

RRoquelaur77
77% match
Loading thumbnail…

Fork of bar_test

This visualization displays university ranking data as an interactive stacked bar chart, showing scores across teaching, research, citations, industry income, and international outlook for each institution. Users select a sorting metric and order from dropdown menus, which reorders bars and changes the stacking priority. The chart uses D3 v4 with `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `stack` to render SVG rectangles, while the `dropdownMenu` module handles menu interactions. Data comes from a local CSV file with Times Higher Education rankings.

Ddaniel
77% match
Loading thumbnail…

Fork of Fork of scatter plot

This scatter plot visualizes the relationship between math and science scores for 50+ students, with each dot colored by academic department. It uses d3.csv to load the dataset, d3.scaleLinear for x and y axes, and d3.scaleOrdinal with d3.schemeSet2 for color encoding. Interactive tooltips appear on hover via appended title elements, while a manually constructed SVG legend identifies department categories. The visualization employs d3.axisBottom and d3.axisLeft to render axes, with SVG circles serving as the primary glyphs.

Ssainishanthreddyk@gmail.com
76% match
Loading thumbnail…

Fork of Fork of Project 10/31

This interactive scatter plot displays the relationship between college majors and the male workforce share, with each circle representing a major. Users can toggle between earning and labor force attributes via a dropdown menu, while a categorical color legend filters the data by major category. The visualization animates circle positions using D3 transitions and includes a tooltip for on-hover details. Built with D3 v5, the SVG uses `scalePoint` and `scaleLinear` for axes, and `scaleOrdinal` for color mapping. Data comes from a CSV file summarizing FiveThirtyEight’s college-majors dataset.

NNarayana Reddy
76% match