Skip to main content
SimilarExport ZIP
100%

Making a bar chart

✓ Published1🌍 Public
Jjcintolo
Last edited Jul 17, 2020
Created on Jul 17, 2020

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.

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
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
82% 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
81% 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
Loading thumbnail…

Making Bar chart with D3

A bar chart displays monthly values from a CSV file, using horizontal bars where length encodes value and vertical position encodes date. The visualization is built with D3 v5, using `scaleLinear` for the value axis, `scaleBand` for the categorical date axis, and `axisLeft`/`axisBottom` for tick marks. SVG rectangles are rendered from the loaded data, with axes simplified by removing domain and tick lines.

JJuan David Bolaños Rojas
65% match
Loading thumbnail…

Fork of Making a Bar Chart 3

This bar chart visualizes student test marks, with each bar’s length representing a score from 1 to 100. Built with D3 v5, it uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for categorical student labels, and `d3.axisBottom` with a custom tick formatter that abbreviates numbers. The SVG renders steel-blue rectangles, and the chart includes axis labels and a title. Data is loaded from a CSV and multiplied by 1,000 during preprocessing.

TtreasurehunterAP
64% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population by country, with bars scaled linearly along the x-axis and sorted alphabetically along the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand to compute positions, and d3.axisLeft and d3.axisBottom to render the axes via SVG. The bars are appended as SVG rect elements with a steelblue fill.

Bbattlescarredshogun
64% match