Skip to main content
SimilarExport ZIP
100%

自定义坐标轴

✓ Published1🌍 Public
HHillKinsh
Last edited Dec 19, 2020
Created on Dec 19, 2020
Forked from 自定义坐标轴

This example displays a horizontal bar chart of population data for several countries, with a custom-formatted x-axis. It uses D3 v5 scales (d3.scaleLinear, d3.scaleBand), axes (d3.axisLeft, d3.axisBottom), and the d3.csv loader to read from data.csv. The y-axis labels are stripped of their domain lines, and the x-axis tick format converts large numbers using d3.format with a custom replacement. Bars are rendered as SVG rectangles with a steelblue fill.

AI-generated description

A bare chart of d3js. HTML page demonstrating use of CSS and JavaScript

MIT Licensed

Similar vizzes

Loading thumbnail…

自定义坐标轴

This example shows horizontal bar charts ranking the top ten most populous countries, with a custom-styled axis and clear visual encoding of population size. Using d3.csv to load the data, it applies a linear scale for the x-axis and a band scale for the y-axis, with bars rendered as SVG rectangles. The code customizes the axes by removing default domain lines, adding a labeled axis title, and formatting tick labels with d3.format (converting values to billions). It also leverages d3.axisLeft and d3.axisBottom for tick generation and layout.

HHillKinsh
93% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data for ten countries, sourced from a CSV file, with a heavily customized axis layout. The chart uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisLeft with d3.axisBottom to render the axes. The x-axis tick labels are formatted using d3.format to abbreviate large numbers (e.g., "1.41B"), and the axes are manually positioned within an SVG using margin offsets and a transform attribute.

LLichenYang
88% 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
87% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population figures for nine countries, with a customized x-axis that uses abbreviated tick labels (e.g., “1.50M”). The chart is rendered as SVG using D3 v5, with data loaded from a local CSV file. The code employs `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format` to position bars and axes. The y-axis lists country names, while the x-axis range is set from zero to the maximum population value.

LLonwabo11
87% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays population data for 27 countries, with bars extending from a linear scale and country names on a band scale. The example demonstrates customizing axes by applying D3’s `axisLeft` and `axisBottom` within a margin-based layout, using `scaleLinear` and `scaleBand` from D3 v6. Data is loaded from a CSV file via `d3.csv`, with population values multiplied by 1000. The SVG rendering uses steelblue rectangles, with axis text styled via CSS at 1.4em.

HHan Jinseok
87% 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
87% 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
87% match
Loading thumbnail…

Customising axes

A horizontal bar chart displays population data for ten countries, with custom tick formatting abbreviating numbers by converting "G" to "B" for billions. The example uses d3.csv to load data, d3.scaleBand and d3.scaleLinear for scales, and d3.axisBottom with d3.axisLeft for axes. Custom styling removes default domain lines and adds a centered axis label and title, while tick lines extend across the chart using d3.axisBottom’s tickSize.

Eevapavlinek
86% match