Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited Jan 4, 2021

Created on Jan 4, 2021

Forked from Let's make a face with D3.js!

This horizontal bar chart displays the count of contributions per GitHub login, sorted by the login name. It uses D3 version 5 APIs including `scaleBand` and `scaleLinear` to map the data, and `axisLeft` for the y-axis. The chart reads from a CSV file, and the bars are rendered as SVG rectangles filled with steelblue using the `svg.append` method. The data is parsed to convert string counts to numbers before the chart is generated.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Github API Visualisation

This bar chart visualizes mutual following counts among GitHub users, ranking each contributor by the number of mutual connections they share. The data is loaded from a CSV file, with counts parsed as numbers and rendered as horizontal bars. Using D3 v5, the visualization employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisBottom` and `axisLeft` for tick marks. The SVG output styles bars in steelblue, with axes and labels generated programmatically from the data.

Ddabreadman (YI XIANG TAN)

83% match

Loading thumbnail…

D3 Bar Chart

This bar chart displays the number of contributions per author from a local CSV file, with values multiplied by 1,000 for scaling. The visualization uses D3 v5 to load the data, apply a linear scale for the x-axis and a band scale for the y-axis, and render steel-blue bars in an SVG. Axes are added using `axisLeft` and `axisBottom`, while styling is handled through an external stylesheet.

MMJR1997

79% match

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

78% match

Loading thumbnail…

Fork of Making a Bar Chart

This example shows the scores of individual students as horizontal bars, using a linear x-scale for the score values and a banded y-scale for the student names. The chart is rendered as an SVG with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the axes, while `format` customizes the tick labels. The data is loaded from a local `score.csv` file, and the bars are drawn as `rect` elements with a fixed steelblue fill.

NNikith Reddy

78% match

Loading thumbnail…

Fork of Making bar chart

This example presents a horizontal bar chart ranking countries by population, using a fork of a D3 bar-chart template. It shows the data from `data.csv` with D3 v5, mapping population values to bar lengths and country names to vertical bands. The visualization is rendered as an SVG, with a linear scale for the x-axis and a band scale for the y-axis. It utilizes `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the chart, gridlines, and labels, styled via CSS with custom tick and title fonts.

HHassan Abdullah

78% match

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

77% match

Loading thumbnail…

Bar Chart

This bar chart displays the number of contributions made by each author, sourced from a CSV file. The chart renders as steelblue rectangles via SVG. The code uses d3’s `select`, `csv`, `scaleLinear`, and `max` functions to load the data and map the maximum contribution count to the scale’s domain, though the current implementation sets a fixed rectangle size rather than scaling the bars to their data values.

MMJR1997

77% match

Loading thumbnail…

Fork of Untitled

This bar chart displays the daily earnings of individuals, with each person’s name on the x-axis and their corresponding amount on the y-axis. The visualization uses D3 v6 to load CSV data asynchronously via `d3.csv`, then binds it to SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The chart is rendered as static purple bars within an SVG canvas, with axis labels positioned manually via HTML divs.

VVineela Reddy

77% match