Skip to main content
SimilarExport ZIP
100%

Fork of Customizing Axes

✓ Published0🌍 Public
Jjohnson-tolo
Last edited Mar 2, 2021
Created on Mar 2, 2021
Forked from 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.

AI-generated description
MIT Licensed

Similar vizzes

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
88% 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
86% 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
86% 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
82% match
Loading thumbnail…

Fork of Customizing Axes

A horizontal bar chart displays the top 10 most populous countries from 2018 United Nations data, with a custom x-axis that formats population numbers in abbreviated units (e.g., "1.42B"). Using D3 v5 with SVG rendering, the example extends a basic bar chart by applying `scaleLinear`, `scaleBand`, and `axisBottom` with a custom tick format via `format('.3s')`, while removing axis domain lines and styling labels. The y-axis uses `axisLeft` with all ticks removed, and bars are sized using `xScale` and `yScale`.

NNoobSaiyan
70% match
Loading thumbnail…

Fork of Customizing Axes

This example displays a horizontal bar chart of the populations of the ten most populous countries, using data from a CSV file. The chart ranks countries from largest to smallest, with bars colored steelblue and clear axis labels. It uses D3 v6 APIs such as `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. The code customizes axes by removing domain lines, adding grid lines, and formatting tick labels to show values in billions.

MMajaha21
68% match
Loading thumbnail…

Fork of Customizing Axes

This bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The visualization uses D3 v5 with `d3.csv` to load data, `scaleLinear` and `scaleBand` for scaling, and `axisBottom` and `axisLeft` for axes. Data originates from a CSV file, rendered as SVG rectangles with custom tick formatting that converts billions to "B" notation.

WWaffleSlayer69
68% match
Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the populations of the top 10 countries featured in One Piece episodes, based on 2019 data loaded from a CSV file. The visualization shows horizontal bars with blue grid lines, where each bar’s length encodes population magnitude using a linear scale. The React application uses `useState` and `useEffect` to fetch and parse the data, then renders the SVG elements directly with JSX, while D3’s `scaleBand`, `scaleLinear`, and `max` utilities handle the layout and scaling calculations.

Ssaidhiraj16
68% match