Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
Jjcintolo
Last edited Jul 18, 2020
Created on Jul 17, 2020
Forked from 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.

AI-generated description

This bar chart shows the current (7/15/2020, Wano Arc) bounties of the Strawhat 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
100% match
Loading thumbnail…

Customizing Axes

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`.

Jjcintolo
90% 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
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
86% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top six Dota 2 teams by earnings, using custom tick formatting that abbreviates large numbers with an “s” prefix and then converts “G” to “B” to show values in billions. The chart removes axis domains and gridlines from the y-axis while adding a custom axis label and title. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering as SVG. The data comes from a local CSV file with team names and earnings.

PPushkov Fedor
71% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, sourced from a CSV file, with a heavily customized axis layout. The chart uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisLeft with d3.axisBottom to render the axes. The x-axis tick labels are formatted using d3.format to abbreviate large numbers (e.g., "1.41B"), and the axes are manually positioned within an SVG using margin offsets and a transform attribute.

LLichenYang
70% 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
70% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, with customized axes. The y-axis displays country names using a band scale, while the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “1.42B”) via d3.format and a custom replace function. The chart is rendered as SVG using d3-scale, d3-axis, and d3-selection, with data loaded from a CSV file and styled through external CSS.

MMarrnj2
70% match