Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
RRiccardo Pressiani
Last edited Oct 1, 2019
Created on Oct 1, 2019
Forked from Making a barchart

This bar chart displays the populations of the ten most populous countries, with countries on the y-axis and population counts on the x-axis. Built with D3.js v5, it uses `scaleLinear` and `scaleBand` to map data, and `axisBottom` and `axisLeft` for custom axes. Population values from a CSV file are formatted with abbreviations (e.g., 'B' for billions), and the chart removes default axis lines for a cleaner look. All elements render as SVG.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the ten most populous countries, with countries on the y-axis and population counts on the x-axis. Built with D3.js v5, it uses `scaleLinear` and `scaleBand` to map data, and `axisBottom` and `axisLeft` for custom axes. Population values from a CSV file are formatted with abbreviations (e.g., 'B' for billions), and the chart removes default axis lines for a cleaner look. All elements render as SVG.

RRiccardo Pressiani
100% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using D3.js v5 to render SVG. The chart customizes the x-axis to show abbreviated population values in billions by using D3's `scaleLinear`, `scaleBand`, and `axisBottom` with a tick format that replaces "G" with "B". It also removes default axis lines and tick marks on the y-axis, adds a custom axis label, and applies a title. Population data is loaded from a CSV file.

Rratschke
96% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, with countries listed on the y-axis and population values on the x-axis. The chart uses D3 version 5's `scaleLinear` for the x-axis and `scaleBand` for the y-axis. It customizes the x-axis tick labels to abbreviate numbers (e.g., converting billions to "B") via `format('.3s')` and removes default axis lines. Data is loaded from a CSV file using D3's `csv` function, and the chart is rendered as SVG elements.

SSam Lite
95% match
Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the ten most populous countries, using horizontal bars sorted by population. The visualization employs d3.csv to load the data, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the numeric x-axis. Customized axes are drawn with d3.axisBottom and d3.axisLeft, including formatted tick labels that convert large numbers to abbreviated units like "B" for billions. The chart is rendered as SVG, with grid lines created via tickSize and a custom "Population" axis label added to the bottom.

Ccindy203cc
95% match
Loading thumbnail…

Customizing Axes

This bar chart shows the ten most populous countries, ordered by population with a linear x-axis and a categorical y-axis. The visualization customizes both axes by removing their domain lines and tick marks, adding a text label for population, and formatting tick labels to abbreviate millions as “B”. Built with D3 v6, it loads data from a CSV, scales values by 1,000 for display, and uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG.

Iihatelearning
95% match
Loading thumbnail…

Customizing axes

A bar chart displays the population of the ten most populous countries, using horizontal bars scaled linearly by population and sorted by rank. The visualization emphasizes custom axis styling: the y-axis removes its domain line and ticks, while the x-axis uses a custom tick formatter to abbreviate large numbers (e.g., converting billions to 'B') and includes a labeled "Population" axis title. A D3 v7 script loads data from a CSV, applies a band scale for countries and a linear scale for populations, and renders SVG rectangles with margins and gridlines via `axisBottom` and `axisLeft`.

JJuyeonee
94% match
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with countries on the y-axis and population on the x-axis. It uses D3.js v5’s `scaleLinear` and `scaleBand` to map the data, and customizes the axes with `axisLeft` and `axisBottom`, including formatted tick labels that convert billions to a readable format. The visualization is rendered as SVG, with the data loaded from a CSV file.

EEdoardoRegini
94% match
Loading thumbnail…

Customizing Axes

A bar chart displays the top ten most populous countries, with population values on a linear scale and country names on a point scale. Customized axes show gridlines extending across the plot, remove the default domain lines, and format population numbers using `format('.3s')` to abbreviate values like billions. The chart uses d3.scaleLinear, d3.scalePoint, d3.axisBottom, and d3.axisLeft in SVG. Data comes from a CSV file, processed with d3.csv, and rendered with circles instead of bars.

Lliechtia
94% match