Skip to main content
SimilarExport ZIP
100%

Marcus' bar chart with axis formatting

✓ Published1🌍 Public
Mms-aus
Last edited Aug 31, 2019
Created on Aug 19, 2019

This example shows a horizontal bar chart ranking the world’s 10 most populous cities by metro population, with formatted axis labels and gridlines. Data is loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, `d3.axisBottom` with a custom `.tickFormat` to abbreviate numbers (e.g., converting G to B), and `d3.axisLeft`. Bars are rendered as SVG `rect` elements with a pink background and steelblue fill.

AI-generated description

Population of 10 most populous cities

MIT Licensed

Similar vizzes

Loading thumbnail…

Marcus' bar chart with axis formatting

This example shows a horizontal bar chart ranking the world’s 10 most populous cities by metro population, with formatted axis labels and gridlines. Data is loaded from a CSV file via `d3.csv`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map values, `d3.axisBottom` with a custom `.tickFormat` to abbreviate numbers (e.g., converting G to B), and `d3.axisLeft`. Bars are rendered as SVG `rect` elements with a pink background and steelblue fill.

Mms-aus
100% match
Loading thumbnail…

Marcus' bar chart exercise

This example shows the population of the 10 most populous cities as a horizontal bar chart, with city names on the y-axis and population counts on the x-axis. The visualization is rendered as an SVG using D3 v5, and the code imports specific modules (`select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`) from the D3 library. Population data is loaded from a local CSV file and converted from strings to numbers. The chart uses a band scale for the categorical axis and a linear scale for the quantitative axis, with axes generated via `axisLeft` and `axisBottom`. A pink background and steelblue bars style the output.

Mms-aus
90% match
Loading thumbnail…

Marcus' scatter plot #1

This visualization displays the populations of the world’s 10 most populous cities as a horizontal bar chart, with metro population on the x-axis and city names on the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to render axes, with tick formatting via d3.format. Bars are drawn as SVG rectangles within a grouped element, and the chart includes custom labels for the title and axes, rendered with a pink background.

Mms-aus
90% match
Loading thumbnail…

Making a Bar Chart/Customizing Axis

This example displays a horizontal bar chart of the top 10 most populous countries, using population data loaded from a CSV file. The chart customizes its axes, removing domain lines and using a D3 formatter to abbreviate large population numbers, such as converting billions to "B". The code relies on D3 v7 modules including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`. SVG rectangles are drawn to represent each bar, with the chart rendered entirely through D3’s data join and SVG manipulation.

Aadelgrosso
78% match
Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the world’s ten most populous countries, with population values labeled in billions and a steel-blue fill for each bar. It uses D3 v5’s `csv` loader to import data, `scaleLinear` and `scaleBand` for positioning, and `axisBottom` with a custom tick formatter that converts G to B. The SVG rendering includes margins, a title, and an axis label, demonstrating core DOM manipulation through `select` and `append`.

Nnouralkhoury
77% match
Loading thumbnail…

Making a bar chart. Customizing the axis.

This example shows a horizontal bar chart ranking the ten most populous countries, with each bar’s length representing population in thousands and a customized bottom axis displaying abbreviated tick labels (e.g., “1B” for billions). The chart uses d3.csv to load the data, then applies scaleLinear and scaleBand for positioning, while axisBottom and axisLeft generate the axes. Grid lines are drawn via tickSize(-innerheight), and the axis labels and title are manually added as SVG text elements. The y-axis ticks are stripped of their default lines and domain for a cleaner look.

XX. N. Chu
77% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of six global cities, ordered by name on the y-axis and scaled linearly on the x-axis. It uses D3 v7’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting that abbreviates millions to "m". Horizontal gridlines are drawn via negative tick lengths, while the y-axis domain and tick lines are removed. The chart is rendered as SVG, with population data loaded from a CSV file.

Ssheafallick
77% match
Loading thumbnail…

Customising axes

This example visualizes the ten most populous countries as horizontal bars, with country names on the y-axis and population on the x-axis, using a bar chart rendered as SVG. The code uses d3’s `csv` loader, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to build the chart, with custom tick formatting that converts values from millions to billions (e.g., 'G' to 'B'). A title and axis label are added, and the chart is styled via CSS with steelblue bars and custom tick and label fonts.

MMarko Puza
77% match