Skip to main content
SimilarExport ZIP
100%

Fork of Making a barchart

✓ Published0🌍 Public
MMartin Casey
Last edited Feb 22, 2021
Created on Feb 22, 2021
Forked from Making a barchart

This example demonstrates a horizontal bar chart ranking the populations of ten countries. It uses D3 v5’s `csv` to load data from a CSV file, then employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes within an SVG. The chart is rendered by appending `rect` elements to a group, with a steelblue fill and population values scaled by 1000.

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 a Barchart

This horizontal bar chart ranks the populations of the ten most populous countries, using D3’s `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. The SVG render loads data from `data.csv`, multiplies each population value by 1000, and draws steelblue rectangles via D3’s `selectAll` and `enter`. Axis ticks are generated with `axisLeft` and `axisBottom`.

VVineela Reddy
92% match
Loading thumbnail…

Fork of Making a barchart

This bar chart displays the population of ten countries, using horizontal bars sorted by population in descending order. The visualization is built with D3 v5 and rendered as SVG elements. It loads data from a CSV file, converts population values to absolute numbers, and uses `d3.scaleLinear` and `d3.scaleBand` to map values to positions. Axes are added with `d3.axisLeft` and `d3.axisBottom`, while bars are drawn as SVG rectangles.

PPiotr Paszek
91% match
Loading thumbnail…

Making a barchart

This example builds a horizontal bar chart comparing the populations of the ten most populous countries, using data loaded from a CSV file. The page renders SVG bars and axes with D3.js, employing `d3.scaleLinear` for the population values, `d3.scaleBand` for country categories, and the `axisLeft` and `axisBottom` components for tick marks. The chart uses a fixed SVG canvas of 960 by 500 pixels, with margins defined around the plotting area.

MMartin Casey
91% 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
91% 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
91% match
Loading thumbnail…

Making a barchart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values read from a CSV file and displayed on a linear scale while country names appear on a band scale. It demonstrates fundamental D3.js DOM manipulation by selecting the SVG, appending a group for margins, and binding data to rectangle elements. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the chart with steel-blue bars and labeled axes.

RRiccardo Pressiani
91% match
Loading thumbnail…

Fork of Making A Bar Chart

This example shows a horizontal bar chart ranking the populations of ten countries, from China and India down to Mexico. It uses D3 v7 with an SVG renderer, loading data from a CSV file via `d3.csv` and scaling values with `d3.scaleLinear` and `d3.scaleBand`. The chart renders axes using `d3.axisLeft` and `d3.axisBottom`. The bars are drawn as `rect` elements with a steelblue fill, and the population values are multiplied by 1000 during preprocessing.

JJoshua Arnold
90% match
Loading thumbnail…

Making a Barchart

This example shows a horizontal bar chart of population counts for 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 vertical band positions with a band scale. The code relies on D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering the bars and axes as SVG elements. Styling is applied through CSS, with bars filled in steel blue and axis text enlarged.

Rryandebattista
90% match