Skip to main content
SimilarExport ZIP
100%

Making a bar chart

✓ Published0🌍 Public
Yyogichoudhary
Last edited Jun 3, 2020
Created on Jun 3, 2020
Forked from Making a bar chart

This dashboard displays survey responses about whether university students have ever consulted a psychiatrist, with counts for each response category. It uses D3.v5’s `csv` loader to read `data.csv` and `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering bars as SVG `<rect>` elements. The chart is titled “Regarding Mental health issue in students” and uses axis generators from D3 v5 (`axisBottom`, `axisLeft`).

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Exploring survey data interactively - y-axis

An interactive bar chart explores survey data by visualizing aggregated values for different student interest groups. A dropdown menu lets users select which variable to display on the y-axis, including averages for height, stress, and expenses. Built with D3 v5, the chart updates scales, axes, and bar positions dynamically when the selection changes, while the data preparation module handles filtering and aggregation. The chart uses SVG rendering and data joins to generate the form options and bars.

RRoyCsuka
75% match
Loading thumbnail…

Bar Graph using D3.js

This bar graph displays the final exam marks of students, with each student’s name on the x-axis and their corresponding marks on the y-axis. The visualization loads data from a CSV file using `d3.csv`, then uses `d3.scaleBand` and `d3.scaleLinear` to map the data to SVG rectangles. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart is annotated with a title and axis labels. The code employs D3 v7 in a plain HTML page with an SVG container.

SSamanvitha1
74% match
Loading thumbnail…

Making a bar chart: my grades

A bar chart displays university grades, with each subject on the y-axis and its corresponding score (from 18 to 30) on the x-axis. The chart uses green bars and a readable font size. The implementation relies on D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to position and scale the marks. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering is created through `svg.append('g')` and `selectAll('rect')` calls.

HHilario Calderon
74% match
Loading thumbnail…

Making a bar chart: my grades

This example shows a horizontal bar chart of a student’s final grades in university courses, with each bar’s length proportional to the numeric grade. The chart uses categorical labels on the y-axis and a linear scale on the x-axis. Built with D3 v5, the code loads data from a CSV file using `d3.csv`, creates scales via `d3.scaleLinear` and `d3.scaleBand`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. Bars are appended as SVG rectangles, and the styling is defined in an external CSS file.

DD0no
74% match
Loading thumbnail…

final project

This bar chart displays the average student grades (on a 3-point scale where A=3, B=2, C=1) grouped by self-reported stress level, sorted from highest to lowest average grade. The visualization uses D3 v7’s `d3.csv` to load remote CSV data about student grades and mental health, then applies `d3.group` and `d3.mean` to aggregate values. Rendered as SVG rectangles with a `d3.scaleBand` x-axis and `d3.scaleLinear` y-axis, bars change color on hover via CSS.

Ssarikakannikanti@gmail.com
73% match
Loading thumbnail…

Making a bar chart: my grades - costumizing axis

A horizontal bar chart displays university grades across subjects, with bars sorted by score and a customized axis showing gridlines. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map grades and subjects, while `axisLeft` and `axisBottom` generate axes with removed domain lines. Data from a CSV file is loaded via `d3.csv`, and the SVG rendering includes a title and axis label.

DD0no
73% match
Loading thumbnail…

final project

This bar chart shows the average grades of students grouped by their self-reported stress levels (Low, Medium, High). The visualization uses d3.csv to load a remote dataset, d3.rollup to aggregate the grade means, and d3.scaleBand with d3.scaleLinear to map stress categories and grade averages to the SVG coordinate system. Bars are rendered as SVG `rect` elements, with axis labels and rotated x-axis tick text for readability. The chart highlights the relationship between mental health and academic performance.

Ssarikakannikanti@gmail.com
73% match
Loading thumbnail…

Fork of Bar Chart with Highlighting

This bar chart visualizes survey responses about motivations for playing video games, with average scores for generalized anxiety disorder assessment grouped by gender and reason. It uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, rendering SVG rectangles with colors assigned based on score thresholds. Interactive highlighting is implemented through mouseover and mouseout events, which adjust bar opacity and display a tooltip showing the data values. The chart is built with d3.csv to load the data.csv file and includes axes generated via d3.axisLeft and d3.axisBottom.

GGeorgeVard
73% match