Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
Jjcintolo
Last edited Jul 17, 2020
Created on Jul 17, 2020
Forked from Making a bar chart

This bar chart displays the in-universe bounties of Yonko and Worst Generation pirates from *One Piece*, with values formatted in billions using `d3.format`. It demonstrates custom axis styling by removing default domain lines, adding rotated axis titles, and applying tick marks with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a CSV file and rendered as SVG rectangles using `d3.scaleLinear` and `d3.scaleBand`.

AI-generated description

This bar chart shows the current (7/15/2020, Wano Arc) bounties of the Yonko & Worst Gen pirates

Source One Piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the current bounties of the Straw Hat Pirates from One Piece, with each pirate’s portrait replacing the traditional y-axis labels. The d3.csv function loads bounty data, while d3.scaleLinear and d3.scaleBand position the bars. Customized axes include a formatted x-axis using d3.format with a custom tick formatter, and a y-axis created via d3.axisLeft with the default text removed and images appended. The chart also includes axis titles and data labels, with bars rendered as SVG rectangles.

Jjcintolo
90% match
Loading thumbnail…

Customizing Axes

This bar chart displays the current bounties of the Straw Hat Pirates from One Piece, with each pirate’s portrait replacing the traditional y-axis labels. The d3.csv function loads bounty data, while d3.scaleLinear and d3.scaleBand position the bars. Customized axes include a formatted x-axis using d3.format with a custom tick formatter, and a y-axis created via d3.axisLeft with the default text removed and images appended. The chart also includes axis titles and data labels, with bars rendered as SVG rectangles.

Jjcintolo
90% match
Loading thumbnail…

Fork of Customizing Axes

A horizontal bar chart displays the largest One Piece bounties, ranking pirates from Gol D. Roger's 5.56 billion down to Urouge's 108 million. The chart uses the `d3.scaleLinear` and `d3.scaleBand` APIs from D3 v5, with `d3.axisLeft` and `d3.axisBottom` for axes. The x-axis tick labels use `d3.format` with a custom replacement of 'G' with 'B' to convert billions. The data is loaded from a CSV file using `d3.csv`, and bars are rendered as SVG rectangles filled in steel blue.

Jjohnson-tolo
88% match
Loading thumbnail…

Making a bar chart

This bar chart displays the current bounties of the Straw Hat Pirates from the One Piece manga, with each pirate’s bounty represented as a horizontal bar. The chart uses d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, with axes rendered via d3.axisLeft and d3.axisBottom. Data is loaded from a CSV file using d3.csv, and all elements are drawn as SVG rectangles in steelblue.

Jjcintolo
81% match
Loading thumbnail…

Customizing Axes

This example displays the populations of the world’s top billionaires as a horizontal bar chart, using data from a sample CSV with United Nations estimates. It builds on a basic bar chart by customizing both axes: the left y-axis labels are cleaned of tick lines and the domain, while the bottom x-axis uses `scaleLinear` and `axisBottom` with a custom tick format that converts billions to "B". The chart is rendered in SVG using D3 v5, with margins and labels styled via external CSS.

Ddavid-fon
73% match
Loading thumbnail…

customizing the axes

This example shows a bar chart of population data for the top 11 countries, with a customized y-axis that removes its domain line and tick marks, and an x-axis that uses a formatted tick label converting values to billions (e.g., "1.42B"). The chart is rendered using SVG and D3 v5, with `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` to generate the axes. Data is loaded from a CSV and the tick format is applied via `format('.3s')`.

Tthebeef5
73% match
Loading thumbnail…

Customizing Axes

This example presents a horizontal bar chart of opera type counts from a CSV file, demonstrating custom D3 axis styling. The y-axis removes domain and tick lines for a cleaner look, while the x-axis applies a custom tick formatter using `d3.format` to abbreviate large numbers and replaces "G" with "B". The code uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, with SVG rendering and CSS controlling tick, label, and title appearance.

JJasonXQH
72% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of ten countries in millions, with axes customized to improve readability. The y-axis labels are cleanly positioned without tick lines, while the x-axis uses abbreviated number formatting, converting values like “1.42B” from gigabytes notation to billions. SVG rendering leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with tick formatting via `d3.format`. Data loads from a CSV file, and both axis domains and tick marks are selectively removed for a minimalist presentation.

Kkb1ngram4
72% match