Skip to main content
SimilarExport ZIP
100%

In-Depth Axis Styling

✓ Published1🌍 Public
Aadventuresenglish.info@gmail.com
Last edited May 18, 2024
Created on Jan 30, 2024
Forked from HTML Starter

This example shows a United States GDP bar chart with a stylized y-axis label rendered as HTML inside a `foreignObject` element. The chart uses `d3.scaleTime` and `d3.scaleLinear` with `d3.axisBottom` and `d3.axisLeft`, while bars are created via `join("rect")` and formatted with `d3.format`. Data is fetched asynchronously from a Free Code Camp GitHub repository, and the SVG includes an image background, custom tooltip with mouseover/mouseout handlers, and a rotated axis title.

AI-generated description

This is one of my projects working towards the Free Code Camp Data Visualization Certificate

You can see the the use of forgein object in this project to create a stylized y axis.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js Bar Chart with FCC Data

This example visualizes United States GDP data from FreeCodeCamp, rendering a bar chart in SVG where each bar represents quarterly GDP values. The chart uses D3.js v4 with a linear y-scale and an x-axis showing years, fetched from a remote JSON source. The code employs `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to map data to bar heights and positions, with bars styled via CSS classes.

SSubliminal_[var]
76% match
Loading thumbnail…

Customizing Axes

This example demonstrates a racing bar chart that ranks the top 10 countries by GDP each year, with bars and labels animating to reflect changing positions. The visualization uses D3.js (v5) and SVG, with bars vertically reordering via a linear scale based on rank, while the horizontal axis uses a linear scale for GDP values. Data is loaded from a CSV file using `d3.csv`, and transitions are animated with `transition.duration`. The bar heights are set via `d3.scaleBand`, and the axis is customized with a tick formatter that converts numbers to billions.

Iinroadings
75% match
Loading thumbnail…

Customizing Axes

This example demonstrates customized chart axes with an SVG bar chart of country populations loaded from a local CSV file. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to create the plot, applying a custom tick formatter that abbreviates large numbers with `format('.3s')` and replaces ‘G’ with ‘B’. The x-axis is styled as a full-length gridline, while the y-axis removes its domain and tick lines for a cleaner look.

IIan
75% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
75% match
Loading thumbnail…

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

SSophia Murage
75% match
Loading thumbnail…

Untitled

This example visualizes U.S. Gross Domestic Product data from 1947 to 2015 as a bar chart, with each bar representing a quarterly GDP value. The code fetches JSON data from a freeCodeCamp repository and uses D3 v7 scales, axes, and selection methods to render an SVG directly to the page. Bars are colored navy, with tooltips showing the date and value, while the x-axis displays dates and the y-axis shows GDP amounts. The visualization fills the entire browser window and dynamically scales based on viewport dimensions.

Aadventuresenglish.info@gmail.com
75% match
Loading thumbnail…

Customizing Axis (own)

This example shows a horizontal bar chart of country populations using D3 v5, with a custom-styled y-axis and numeric labels for each bar. The chart loads population data from a CSV file, scales the values to a linear x-axis and a banded y-axis, and renders filled steel-blue rectangles via SVG. It uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with margins and a translated group element to position the axes and bars.

JJustinS1209
75% match
Loading thumbnail…

Axis Styling

This example demonstrates how to customize the appearance of axes created with the d3-axis API in D3 v4, rendering SVG output. The chart shows a time-based scale on the x-axis spanning 2010–2012 and a linear scale on the y-axis ranging from 0 to 2 million. Customization is achieved through post-selection, where the code modifies generated axis elements by removing the domain path, styling tick lines with dashed strokes and gray color, and adjusting tick text positioning. A custom tick format prefixes the first value with a dollar sign and appends “million” while others use narrow non-breaking spaces. The code uses `d3.axisBottom`, `d3.axisRight`, `d3.scaleTime`, and `d3.scaleLinear`.

Mmbostock
74% match