Skip to main content
SimilarExport ZIP
100%

D3

✓ Published1🌍 Public
KKyllVis
Last edited May 16, 2020
Created on May 15, 2020
Forked from D3

A horizontal bar chart displays population estimates for ten countries, sorted from China to Mexico, with bars extending from a linear scale and country names on a band scale. Data is loaded from a CSV and multiplied by 1,000 to reflect full population figures. The SVG is rendered using D3 v5, employing `d3.scaleLinear`, `d3.scaleBand`, and axes with custom tick formatting that abbreviates large numbers (e.g., “1.42B”). Grid lines and axis labels are styled via CSS and D3’s `axisBottom` and `axisLeft`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

d3 bar chart

This example presents a horizontal bar chart of population figures for ten countries, using data from a CSV file where values are scaled by ten thousand. The visualization ranks countries from China to Mexico by their population, with each bar’s length proportional to its value. Built with D3 v5, the code uses `d3.csv` for data loading, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` to render axes. Bars are drawn as SVG rectangles with a steelblue fill, appended to a group translated by specified margins.

Ggoogoogoo
91% match
Loading thumbnail…

D3

This example shows a horizontal bar chart of population by country, from a CSV file listing country names and populations. It uses D3 v5 with an SVG layout created from a `scaleLinear` for the x-axis and a `scaleBand` for the y-axis. The rendering approach appends `rect` elements, calls `axisLeft` and `axisBottom` for the axes, and enriches the data by multiplying population values by 1000 before scaling. Styling is handled via CSS.

KKyllVis
90% match
Loading thumbnail…

D3 Axes

This bar chart ranks the ten most populous countries, from China to Mexico, using horizontal bars scaled by population. The chart labels each country on the y-axis and formats population values in billions on the x-axis. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and loads data from a local `data.csv` file. The x-axis gridlines extend across the chart, with the country names and title styled via CSS.

Ddileep73
90% match
Loading thumbnail…

D3 Axes

This bar chart ranks the ten most populous countries, from China to Mexico, using horizontal bars scaled by population. The chart labels each country on the y-axis and formats population values in billions on the x-axis. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and loads data from a local `data.csv` file. The x-axis gridlines extend across the chart, with the country names and title styled via CSS.

Ddileep73
90% match
Loading thumbnail…

D3 Axes

This bar chart ranks the ten most populous countries, from China to Mexico, using horizontal bars scaled by population. The chart labels each country on the y-axis and formats population values in billions on the x-axis. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for scales, `d3.axisBottom` and `d3.axisLeft` for axes, and loads data from a local `data.csv` file. The x-axis gridlines extend across the chart, with the country names and title styled via CSS.

Ddileep73
90% match
Loading thumbnail…

D3-2: Bar chart

A horizontal bar chart displays population figures for the ten most populous countries, with China leading at over 1.4 billion. The chart uses D3 v7 with an SVG rendering, employing `scaleLinear` for the x-axis population values and `scaleBand` for the categorical country labels on the y-axis. Data is loaded from a CSV file using `d3.csv`, and axes are generated via `axisLeft` and `axisBottom` with custom tick formatting that abbreviates large numbers.

Bbkopruluoglu3
89% match
Loading thumbnail…

Untitled

A horizontal bar chart displays population estimates for ten countries, ranked from China to Mexico. The bars vary in length according to population values, with country names on the y-axis and population counts on the x-axis. Built with D3 v6, the chart uses `scaleLinear` and `scaleBand` for scales, `axisLeft` and `axisBottom` for axes, and SVG rectangles for bars. Data loads from a CSV file via `d3.csv`, with values multiplied by 1,000. Dotted outlines style the bars against a black background.

Bbicyclecode
89% match
Loading thumbnail…

Bar chart with D3.js

A horizontal bar chart displays population estimates for ten countries, using a CSV dataset loaded via D3's `csv` method. The visualization ranks countries from China to Mexico along a linear x-scale, with a band scale positioning each categorical bar. SVG rectangles are appended to a grouped `<g>` element, with axes generated using `axisLeft` and `axisBottom`. D3 v5's `scaleLinear`, `scaleBand`, and `max` utilities handle the data mapping, while margin conventions and transform attributes position the chart within a 960×500 SVG viewport.

PPotikorn
89% match