Fork of Making bar chart

100%

Fork of Making bar chart

✓ Published0🌍 Public

Last edited Dec 4, 2021

Created on Dec 4, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making A Bar Chart

This example presents a horizontal bar chart of country populations, with the countries listed in descending order of population. The visualization uses D3 v7, loading data from a CSV file and rendering it as SVG graphics. It employs the `scaleLinear` and `scaleBand` scales to map population values and country names to the plotting area, with `axisLeft` and `axisBottom` generating the corresponding axes.

RRashidi

92% match

Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays population figures for ten countries, with each bar’s length proportional to the population value from a CSV file. The visualization uses D3 v6’s `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis positioning, and SVG `rect` elements for bars. Data is loaded asynchronously via `d3.csv` and multiplied by 1000 before rendering. Axes are generated using `axisLeft` and `axisBottom`, with margins applied through a translated group element.

MMajaha21

90% match

Loading thumbnail…

Fork of Making a Bar Chart

MMajaha21

90% match

Loading thumbnail…

Fork of Let´s make a bar chart!

This example displays a horizontal bar chart ranking countries by population, using data from a local CSV file. The visualization encodes population values with bar widths and country names along the y-axis. Built with D3 v5, it uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to generate SVG elements. The bars are styled with steelblue fills, and axes are rendered with default tick formatting.

MMatiasmedrano66

90% match

Loading thumbnail…

Fork of Making A Bar Chart

This example displays a horizontal bar chart of population figures for the ten most populous countries, with each bar’s length proportional to its population value. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map the data, and renders the chart as SVG elements created with `selectAll` and `enter()`. Population values are loaded from a CSV file and multiplied by 1000, with axes generated using `axisLeft` and `axisBottom`.

FFahad Bin Emran

90% match

Loading thumbnail…

Fork of Making a bar chart

This horizontal bar chart displays population figures for ten countries, using data from a CSV file with populations scaled by a factor of one thousand. The visualization relies on D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with SVG rectangles representing each country’s value. Axes are generated via `axisBottom` and `axisLeft`, while tick labels are formatted using `format` to abbreviate numbers, and gridlines are styled through CSS. The chart includes custom axis titles and a chart title, all rendered as SVG elements.

Llinyyyyyyyyy

90% match

Loading thumbnail…

Fork of Making a Bar Chart

D3.csv loads country population data (in thousands) to create a horizontal bar chart for the top ten most populous countries. D3 scaleBand positions country categories along the y-axis, while d3.scaleLinear maps population counts to bar widths on the x-axis. The chart renders as an SVG with axisBottom and axisLeft, using a custom tick formatter to abbreviate large numbers. No interaction is included; a static red border frames the visualization.

EElouafi87

90% match

Loading thumbnail…

Fork of Making BarChart

This horizontal bar chart displays the population of the ten most populous countries, using a linear scale for population and a band scale for country names. Built with D3 v5, it loads data from a CSV file via `d3.csv` and renders bars as SVG rectangles. The chart includes a formatted x-axis with tick labels shortened using `d3.format`, a title, and removes redundant axis lines. Margins are applied through a transformed group element.

DDhiva21

89% match