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

100%

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

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 6, 2022

Forked from Let's make a Bar Graph with D3.js

This example shows a horizontal bar chart displaying subject marks from a CSV file, with subjects on the y-axis and marks on the x-axis. Built with D3.js v7, it loads data via `d3.csv` and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`, using `d3.axisLeft` and `d3.axisBottom` for labeled axes with rotated text.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This bar chart visualizes the scores of different teams using D3.js (v7) with SVG rendering. It loads CSV data from a GitHub gist and maps team names to the y-axis with a band scale, while a linear scale positions the bar widths based on score values. The code uses `d3.csv`, `scaleBand`, `scaleLinear`, and `axisLeft`/`axisBottom` to construct the chart, with red rectangles and styled text. Axes and margins frame the visualization, which updates dynamically after parsing and converting the numeric score data.

Ssaivinay143

83% match

Loading thumbnail…

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

This bar chart displays country populations from a CSV file, sorted vertically from highest to lowest using D3.js v7. It renders SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`, with axes generated by `d3.axisLeft` and `d3.axisBottom`. The visualization imports specific D3 modules like `select`, `csv`, and `max` to load and process data.

Ssaivinay143

83% match

Loading thumbnail…

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

This example shows a horizontal bar chart of anime titles ranked by view counts, drawn as SVG rectangles. It loads data from `data.csv` using D3’s `csv` function, then maps views to a linear scale and anime names to a band scale for the y-axis. The code uses D3 v7 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render axes and the bars.

MManideepChakilam

82% match

Loading thumbnail…

Fork of Let's make a bar graph

This example displays a horizontal bar chart of country populations using SVG rectangles. It loads data from a local CSV file and renders each bar with D3 v5’s `scaleLinear` for widths and `scaleBand` for vertical positioning. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from the D3 module, fetches the CSV asynchronously, and appends `rect` elements to an SVG. The data values are multiplied by 1,000 to convert population figures.

MMatiasmedrano66

82% match

Loading thumbnail…

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

This example shows a horizontal bar graph of population by country using data from a CSV file. The bars are rendered as SVG rectangles in steel blue, with countries on the y-axis and population values on the x-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` for the x-scale, `d3.scaleBand` for the y-scale, and `d3.axisLeft` and `d3.axisBottom` to draw the axes. Population values are multiplied by 1000 before rendering.

AAishwarya Manjunath

81% match

Loading thumbnail…

Fork of Fork of HTML Starter

A bar chart displays average marks per subject, computed from a CSV dataset of student scores. The visualization uses D3.js v6 to load the data, calculate averages with `d3.mean`, and render SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are added via `d3.axisBottom` and `d3.axisLeft`, with labels and a title. Bars turn orange on hover through CSS, and the chart includes rotated x-axis tick labels and clear axis annotations.

Vvenigallajaanu@gmail.com

81% match

Loading thumbnail…

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

This D3.js v7 bar chart visualizes movie collection totals from a CSV file, with movie names on the y-axis and collection amounts on the x-axis. The SVG rendering uses `scaleLinear` for the quantitative axis and `scaleBand` for the categorical axis, drawing purple rectangles for each movie. Labels for both axes are added via SVG text elements, with the y-axis label rotated 90 degrees. The chart reads data from `data.csv` using the `csv` function and applies a margin-based layout within the 960x500 SVG canvas.

PPriyanka11128

81% match

Loading thumbnail…

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

This bar chart ranks fruit sales in descending order along a vertical band scale, with horizontal bars extending proportionally to each fruit’s sales value. The visualization loads data from a CSV file, multiplies the sales figures by 10, and renders the result as an SVG using D3 v7. It employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and rectangles, with fixed margins and a steely-blue fill for all bars.

RRadhakrishna246

81% match