Skip to main content
SimilarExport ZIP
100%

Customizing AxesTest

✓ Published2🌍 Public
Wweird_danger
Last edited Sep 7, 2024
Created on Sep 7, 2024

This bar chart displays the population of ten countries, ordered alphabetically, with horizontal bars scaled linearly to population size. Built with D3 v7, it uses `scaleBand` for categorical y-axes and `scaleLinear` for quantitative x-axes, formatting large numbers with the `format` function. The SVG renders axes with `axisLeft` and `axisBottom`, and the data comes from a CSV file parsed via `d3.csv`.

AI-generated description

The Penguins Dataset, loaded and parsed as CSV.

Fork and modify this template to import your data to VizHub and export it for use in other vizzes! To do that:

  • Fork this viz
  • Clear out the README
  • Update the README with details about your dataset (including original source)
  • Replace data.csv with your own data
  • Replace the parsing logic in index.js with your own
  • Set the custom URL so you can import from it easily

Challenge

  • Find 3 datasets on a topic you are interested in
  • For each of those, fork this viz and replace the data
  • Parse the quantitative attributes into numbers
  • Update README.md to indicate the original data source
MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of ten countries, using horizontal bars ordered by country name. The example demonstrates customizing D3 axes by formatting population ticks with the `format('.3s')` API (abbreviating values like “1.41B”) and removing default axis lines. It also applies gridlines via `tickSize` and uses `scaleLinear` and `scaleBand` for scales. Data loads from a CSV file, and the visualization renders as SVG elements with styles from an external stylesheet.

Ttgrex6
89% match
Loading thumbnail…

Customizing axes

A horizontal bar chart displays the populations of ten countries, with bars extending from left to right. The example demonstrates customizing chart axes using D3 v5. Population values are scaled with `scaleLinear`, while country names use `scaleBand` for categorical positioning. The code uses `axisLeft` and `axisBottom` to generate axes, formats tick labels with `format('.3s')` to abbreviate large numbers, and removes default axis lines for a cleaner look. Data is loaded from a CSV file and rendered as SVG rectangles.

Ssara17585
89% match
Loading thumbnail…

Customizing Axes

This horizontal bar chart displays the populations of ten countries, with bars sorted by value and customized axes. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for positioning, and d3.axisLeft plus d3.axisBottom for ticks. Axis customization includes removing domain lines, adding gridlines via tickSize, and formatting tick labels with d3.format to abbreviate values (e.g., converting G to B). A title and axis label are appended as SVG text elements.

Mmagua
89% match
Loading thumbnail…

Customizing Axes - 072019

This bar chart displays the populations of ten countries, with bars ordered alphabetically along the vertical axis and population values on the horizontal axis. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data from a CSV file, and `axisBottom` with a custom tick format that abbreviates numbers (e.g., converting gigabytes to billions). The SVG rendering includes a left axis stripped of domain and tick lines, while the bottom axis removes its domain line, creating a clean, minimal appearance with steelblue bars.

Sshallowater
89% match
Loading thumbnail…

Cutomizing Axes

A horizontal bar chart displays population figures for ten countries, using a linear scale for bar lengths and a band scale for country labels. The code customizes the x-axis tick format with `d3.format` to abbreviate large numbers, converting 'G' to 'B' for billions. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`.

Rryandebattista
89% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of ten countries, sorted by size, using D3 v5. The chart customizes axes by removing domain lines and tick lines, and formats population labels with the `format('.3s')` API, converting billions to "B". Data loads from a CSV file with `d3.csv`. The bars use a linear scale, with a labeled axis and title rendered as SVG text.

Ccyro666
89% match
Loading thumbnail…

Customizing Axes

A bar chart ranks ten countries by population using horizontal bars, with a custom margin and axis layout. The code loads CSV data and uses D3 v5 scales (`scaleLinear`, `scaleBand`) and axes (`axisBottom`, `axisLeft`) to position bars and ticks. The x-axis applies a `format("s")` tick formatter to abbreviate large numbers, while SVG `rect` elements render the bars in steelblue.

Uumihito
89% 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
88% match