Skip to main content
SimilarExport ZIP
100%

Assignment 4: Bar Chart

✓ Published0🌍 Public
Aamrubal
Last edited Apr 25, 2022
Created on Feb 22, 2022
Forked from HTML Starter

This example shows the number of women in five selected STEM majors in a bar chart, with the count of females on the y-axis and the major names on the x-axis. The data is loaded from a CSV file derived from the Corgis graduates dataset. The chart is rendered as an SVG using D3 v7, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes.

AI-generated description

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

See also React Starter.

CSV file has been edited to only include first 5 majors listed in orginal CSV file.

Altered CSV: https://gist.githubusercontent.com/amrubal/c58641421b7e0fbe39a736f8ecf512e9/raw/1b02116a0485727bc64cc0bd6bdf4f020a08c1da/grads.csv

Original CSV: https://corgis-edu.github.io/corgis/csv/graduates/

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 6: Bar Chart with a Sequential Color Scale

This example presents a bar chart showing the number of women in select STEM majors, with each bar colored using a sequential green color scale that encodes the value. The visualization is rendered as an SVG using D3 v7, with a React-based project structure. It loads data from a CSV file, uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential` with `d3.interpolateGreens` for coloring. A legend is added via the d3-legend library to explain the color mapping.

Aamrubal
84% match
Loading thumbnail…

Data Visualization Assignment 3

This interactive scatterplot explores relationships between attributes of college majors, such as total graduates, gender distribution, employment numbers, and median salary. Users select the X and Y axes from dropdown menus or swap them, and hovering over the categorical color legend highlights a specific major category. Built with React and D3 v6, the visualization renders SVG circles positioned by linear scales, with a color legend encoding major categories. Data is loaded from a FiveThirtyEight CSV, which is processed with D3's `csv` function.

HHowardHan99
76% match
Loading thumbnail…

withoutlabel

This example shows grouped bar charts of admission counts by department and gender, with male and female bars side by side for each department. The chart uses a steelblue style and compares counts across six academic departments. The code employs D3.js v4 to load CSV data, process it with `d3.rollups`, and render with `d3.scaleBand` and `d3.scaleLinear`. It generates SVG output, uses `d3.axisBottom` and `d3.axisLeft` for axes, and manually positions bars with a 40-pixel width for each gender.

Mmavercikalvin
75% match
Loading thumbnail…

Fork of Fork of Fork of Gender Distribution Chart

A stacked bar chart displays the gender distribution of students across university modules, with each bar segmented into male and female counts. Radio buttons allow toggling between absolute counts and percentage proportions, animating the bar segments and y-axis scale via transitions. Built with D3.js version 3, the SVG chart uses `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and form inputs to trigger transitions between count and percentage modes. Data comes from a CSV file containing module names and gender counts.

NNarayana Reddy
75% match
Loading thumbnail…

Math Scores Bar Chart

This bar chart visualizes the count of male and female students in a math performance dataset, using two bars to compare the totals. The chart is rendered as an SVG using D3.js v7, with bars drawn via `d3.selectAll` and `rect` elements. Data is loaded asynchronously from a remote CSV file using `d3.csv`, then filtered by gender to compute counts. Axes are generated with `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis, with tick marks added via `d3.axisBottom` and `d3.axisLeft`. The visualization is presented in a 400x400 pixel SVG container, with margins for axis labels.

RRohith Reddy
74% match
Loading thumbnail…

Project 10/31

This scatter plot shows labor force statistics for college graduates across different majors, with each point representing a major and colored by category. Users can switch the y-axis metric via dropdown and click the STEM legend to highlight STEM majors with enlarged, repositioned points. The visualization uses D3 v5 with SVG rendering and animated transitions, pulling data from FiveThirtyEight. Interactive tooltips display major names on hover, while color legends allow filtering by major category and STEM status.

WW9183907
74% match
Loading thumbnail…

Final Project

This example visualizes labor force information for college graduates, filtering the data by major category and STEM status. The main chart is an animated scatter plot, where the y-axis is categorical and the x-axis is a selected numeric measure. Users can interact by changing the x-axis through a dropdown menu and clicking legend items to filter the data and a supporting table. The visualization is built with D3 v5, using SVG and transitions for the animation. Legend selection triggers an update to the data table, and a tooltip appears on mouseover. The rendering also applies a mix-blend mode to the circles, and the dataset is loaded from a CSV file.

YYF
74% match
Loading thumbnail…

Assignment 2 Bar Chart

This example shows a bar chart of student enrollment counts across twelve majors at UNT, with each bar’s height encoding the reported value. The chart is rendered as an SVG using D3 v7, with a linear y-scale for counts and a band x-scale for categorical major labels. Axes are added via `d3.axisLeft` and `d3.axisBottom`, with rotated x-axis tick text. The code uses `d3.scaleLinear`, `d3.scaleBand`, and D3’s selection and data-join methods to bind the hard-coded dataset to `rect` elements.

Cchsaisriharsha@gmail.com
74% match