Fork of Bar chart with D3.js

100%

Fork of Bar chart with D3.js

✓ Published0🌍 Public

Last edited Apr 20, 2021

Created on Apr 20, 2021

This fork of a D3.js bar chart visualizes funnel volumes across seven stages of a student admissions process, from inquiries to matriculants, based on data from Stack Overflow, 2019. The chart uses `d3.scaleLinear` for the y-axis, `d3.scaleBand` for the categorical x-axis, and `d3.axisLeft`/`d3.axisBottom` to render axes and gridlines. Hovering over a bar triggers an animated `transition` that highlights the bar, draws a dashed limit line, and displays the percentage divergence between each bar’s value and the hovered bar’s value.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making a Bar Chart 3

This bar chart visualizes student test marks, with each bar’s length representing a score from 1 to 100. Built with D3 v5, it uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical student labels, and `d3.axisBottom` with a custom tick formatter that abbreviates numbers. The SVG renders steel-blue rectangles, and the chart includes axis labels and a title. Data is loaded from a CSV and multiplied by 1,000 during preprocessing.

TtreasurehunterAP

77% match

Loading thumbnail…

Fork of Fork of Student Scores Bar Char

This horizontal bar chart displays student scores from a CSV file, with each student’s name on the y-axis and their score on the x-axis from 0 to 100. Purple rectangles represent the scores, and hovering over a bar reduces its opacity. The visualization uses D3 v5 with `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render the SVG. The chart is titled “Bar Chart of Student Scores” and includes labeled axes with a fixed margin layout.

Oolddb

76% match

Loading thumbnail…

Fork of Bar chart

A horizontal bar chart displays the average grade achieved for a list of university module codes, sorted by grading scale. The visualization emphasizes the distribution of marks across many modules, using a color gradient from steelblue to grey to represent low to high scores. Built with D3 v5, it uses `scaleLinear` for the x-axis and color scale, `scaleBand` for y-axis categories, and `axisBottom` with custom tick formatting. SVG rectangles render the bars with `transition` animation over a duration of 1000ms, transitioning their width and fill. The data is loaded from a CSV file via `csv` and parsed for numeric marks.

NNarayana Reddy

76% match

Loading thumbnail…

Fork of Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart visualizes student marks by name, with data drawn from estimated UN population statistics. Users can select a year and the number of top countries to display via dropdown menus. The visualization uses React with D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, which are animated on load using the `<animate>` element. Bars are stylized with linear gradients, drop shadows, and continent-based coloring, while tooltips appear via `<title>` elements.

Cchandrakalavanukuri

76% match

Loading thumbnail…

Fork of Student Scores Bar Chart

This bar chart visualizes student scores as horizontal bars, with each bar’s length representing a score value. The chart is rendered as an SVG using D3 v5, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. It loads data from a CSV file and applies an axis layout. The bars are styled purple and become semi-transparent on hover via CSS.

Ppemmasaniprudhvinadh

76% match

Loading thumbnail…

Fork of Fork of Bar chart with D3.js

A static bar chart visualizes survey data on language proficiency across ten languages, with values represented as percentages. Built with D3.js v5 and rendered as SVG, the chart uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. Interactive mouse events trigger transitions that highlight a selected bar, display divergence labels relative to the hovered value, and draw a dashed threshold line using `d3.select` and `.transition()`. The visualization is styled with an Open Sans font and a dark blue background, with grid lines generated via `d3.axisLeft` and `.tickSize`.

NNaimisha-M

76% match

Loading thumbnail…

Fork of Bar chart with D3.js

A forked bar chart displays the popularity percentages of ten programming languages from Stack Overflow's 2019 survey. Using D3.js v5 with SVG, the chart renders horizontal gridlines, axes, and value labels. On mouseenter, a dashed reference line appears and text labels show the percentage divergence between the hovered bar and every other bar. The code applies d3.scaleBand and d3.scaleLinear with d3.axisLeft and d3.axisBottom, plus transitions for opacity changes.

Aall-over-yet

76% match

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

A horizontal bar chart displays student enrollment across ten computer science courses, with purple bars sorted from highest to lowest by the number of enrolled students. The visualization uses D3.js v7’s `scaleLinear` and `scaleBand` to map enrollment counts and course names, while `axisLeft` and `axisBottom` generate the categorical and numerical axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes rotated axis labels for courses and enrollment counts.

MMeghanaArepalli

76% match