Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a bar chart with D3.js!

✓ Published0🌍 Public
DDomen Hribernik
Last edited Dec 24, 2020
Created on Dec 24, 2020

This horizontal bar chart displays the populations of the top ten most populous countries, using a D3.js v5 SVG rendering. Data from a CSV file is loaded and scaled linearly for the x-axis and as a banded scale for the y-axis. The code demonstrates fundamental DOM manipulation by appending rectangles and text elements, with axes and labels formatted using D3’s `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` utilities.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Fork of Fork of Making a Bar Chart

This visualization displays the top 10 most populous countries as a horizontal bar chart using SVG rendering. It loads population data from a CSV file via `d3.csv`, scales the values with `d3.scaleLinear` and `d3.scaleBand`, and formats axis ticks with `d3.format`. The chart uses `d3.axisLeft` and `d3.axisBottom` for axes, with custom labels and a steelblue fill for bars.

0057SatvikDamera
91% match
Loading thumbnail…

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

This example shows a horizontal bar chart ranking the populations of ten countries, using data loaded from a CSV file. The visualization maps population values to bar widths via a linear scale and country names to band positions on the y-axis. Built with D3 v7, the code uses `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles and axes. The bars are styled with a steelblue fill, and the chart is drawn within an SVG canvas sized 960 by 500 pixels.

XXzou0011
91% match
Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays the populations of the ten most populous countries, using horizontal bars ordered from largest to smallest. The visualization is built with D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements. It employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to generate the axes. Each rectangle’s height is determined by the band scale’s bandwidth, and the fill color is set through CSS.

NNigel
91% match
Loading thumbnail…

Fork of Making A Bar Chart

This bar chart displays the populations of the ten most populous countries, using horizontal bars ordered from largest to smallest. The visualization is built with D3 v7, loading data from a CSV file via `d3.csv` and rendering SVG elements. It employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to generate the axes. Each rectangle’s height is determined by the band scale’s bandwidth, and the fill color is set through CSS.

NNigel
91% match
Loading thumbnail…

Fork of Making a Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, with population values scaled linearly and sorted by descending size. The chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars and axes, while the `csv` loader imports population data from a local CSV file. Axis labels and a chart title are added via SVG text elements, and population tick labels are formatted using D3’s `format` function with abbreviations for billions.

0057SatvikDamera
91% match
Loading thumbnail…

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

This bar chart displays population estimates for the top ten countries, with each country’s bar length proportional to its population and labels on the vertical axis. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` for rendering axes. Bars are drawn as SVG `rect` elements, styled with a steelblue fill, and the chart is rendered within a fixed 960×500 SVG canvas with margins applied.

JJyothicherukuri
91% match
Loading thumbnail…

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

This bar chart displays population data for ten countries, with horizontal bars extending along a linear population scale and country names listed along the categorical axis. The visualization uses D3.js v7 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes. Population values from the CSV are multiplied by 1000, and bars are styled with a solid steelblue fill.

EEyeonly
91% match