Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published1🌍 Public
PPushkov Fedor
Last edited Jul 5, 2020
Created on Jul 5, 2020
Forked from Making a Bar Chart

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A scatter plot displays the total earnings of the top six Dota 2 teams, encoding each team’s name on the y-axis and its earnings on the x-axis. Circles are sized to half the bandwidth of the categorical scale. Built with d3.csv, d3.scaleLinear, and d3.scaleBand, the chart uses axes created via d3.axisLeft and d3.axisBottom, and renders SVG circles with formatting via d3.format.

PPushkov Fedor
81% match
Loading thumbnail…

Customizing axes

This bar chart displays the intelligence stat for eight heroes from the HeroWars game, with values scaled to thousands and a custom tick format that converts large numbers into abbreviated forms like “G” for billions. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, along with custom tick sizes to draw gridlines. Data is loaded from a CSV file and rendered as SVG rectangles, with axes customized by removing domain paths and adding a rotated axis label.

AAmol Kulkarni
80% match
Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart comparing esports teams by their total earnings, using a CSV dataset loaded from `data.csv`. The visualization renders as SVG, with each team represented by a steelblue rectangle sized according to its earnings value. The code imports specific D3 v5 modules—`csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to parse the data, map earnings to a linear x-scale and team names to a banded y-scale, and generate the corresponding axes. Margins and an inner plotting area are defined to position the chart within a 960×500 SVG canvas.

PPushkov Fedor
80% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the ten most populous countries, with populations scaled in thousands from a CSV file. The chart uses D3 v5 to build linear and band scales and axis generators, then customizes the axes by removing domain lines and default grid lines, adding a rotated x-axis label, and formatting tick labels to abbreviate large numbers (e.g., "1.42B"). The SVG rendering includes a title and styled tick marks, axis labels, and bars in steel blue.

PPioustu
79% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the populations of the ten most populous countries, with population values transformed from raw numbers into abbreviated labels like "1.42B" using d3.format. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with custom tick formatting and axis labels applied via d3.axisBottom and d3.axisLeft. Data comes from a CSV file, rendered as SVG rectangles with gridlines and a title, all styled through external CSS.

Rruubi0807@gmail.com
78% 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
78% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart shows the top 10 most populous countries, with population values on the x-axis. The chart customizes the x-axis to format large numbers as billions (e.g., "1.42B") and removes the default axis lines and domain. It uses D3's `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to handle scales, ticks, and number formatting. Data is loaded from a CSV file, and the SVG rendering is set up in `index.html` with `styles.css` controlling visual styling.

Zzlastefcia
78% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populated countries, with population values scaled in billions and abbreviated tick labels. The chart customizes its axes by removing domain lines and tick marks from the y-axis, while the x-axis uses a custom tick format that converts G (giga) to B (billion). Built with D3 v7, the visualization loads data from a CSV file and renders to SVG, using scales like `scaleLinear` and `scaleBand` alongside `axisLeft` and `axisBottom` to position bars and labels.

Ddaniel
78% match