Customizing axes

100%

Customizing axes

✓ Published1🌍 Public

Last edited Jun 21, 2020

Created on Jun 21, 2020

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.

AI-generated description

This bar chart shows intelligence of the heroes from my HeroWars game.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart displays the Intelligence attribute for nine heroes from the HeroWars game, with each hero’s name on the y-axis and a steelblue rectangle representing their intelligence value on the x-axis. The chart uses D3 v5 with the `csv` method to load the data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to render the axes as SVG. The code explicitly parses the Intelligence column as numeric before drawing the rectangles.

AAmol Kulkarni

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

80% match

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of Alpha Team ratings by soldier role, with scores normalized from a CSV dataset. The visualization demonstrates customizing D3 axes by removing default domain lines and tick lines, adding an axis label, and applying custom styling via CSS. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, d3.axisBottom, and d3.axisLeft, with data loaded via d3.csv.

JJimmyDiGioia

79% match

Loading thumbnail…

Customizing Axes

This visualization uses a horizontal bar chart to display the critic ratings of 25 popular video games, sourced from a Kaggle dataset. The chart emphasizes custom axis styling, including formatted tick labels on the x-axis, removed y-axis gridlines, and custom labels. The code uses D3 v5 APIs, including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, to create the layout and custom axes. The SVG rendering is styled with a custom font and color scheme.

EEmma Schaale

79% 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

77% match

Loading thumbnail…

Fork of Customizing Axes

This visualization presents a comparative analysis of player performance in a gaming context, featuring both a bar chart and an interactive scatter plot. The bar chart displays aggregated performance metrics per agent, while the scatter plot allows users to explore correlations between different statistics like kills, deaths, and assists. Users can dynamically switch which metric is displayed on the bar chart and both axes of the scatter plot via dropdown menus. The visualization is built using D3 version 7, leveraging APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG elements and manage the interactive updates. The data is loaded from CSV files containing player match statistics.

Ddaniel

77% match

Loading thumbnail…

Customizing Axes

This horizontal bar chart shows the populations of nine countries, ordered by country name and scaled linearly by population. The example demonstrates how to customize axis ticks, converting the default numeric labels from billions to abbreviated values with the suffix 'B'. Built with D3 v5, the code uses `d3.scaleBand` and `d3.scaleLinear` to map data, and `d3.axisLeft` and `d3.axisBottom` to render the axes. The `axisBottom` is formatted using `d3.format` with a custom replacement to display values in billions. The data is loaded from a CSV file and rendered in an SVG.

LLonwabo11

76% 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

76% match