Skip to main content
SimilarExport ZIP
100%

自定义坐标轴

✓ Published1🌍 Public
Lluojiandan
Last edited Apr 18, 2020
Created on Apr 18, 2020
Forked from 柱状图

This bar chart displays the 2019 population of global regions, with a custom y-axis and a horizontal bar layout. The chart uses D3 v5’s `scaleBand` and `scaleLinear` to map regions and population values, while `axisBottom` and `axisLeft` render the axes. Population labels are formatted with the `format` function, replacing "G" with "B" for billions. The data is loaded from an external CSV file, and the visualization is rendered as SVG elements, with gridlines and a title styled via CSS.

AI-generated description

柱状图测试，引用数据来源于各州2019的人口数据

format参考资料： [http://bl.ocks.org/zanarmstrong/05c1e95bf7aa16c4768e]

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
86% match
Loading thumbnail…

自定义坐标轴

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.

HHillKinsh
85% match
Loading thumbnail…

柱状图

This bar chart displays population estimates for six global regions in 2019, with horizontal bars ordered by region name. The visualization uses D3 v5 with SVG rendering, leveraging `scaleLinear` for the population axis and `scaleBand` for categorical region placement. Data is loaded from a CSV file via `d3.csv`, and population values are multiplied by 1000 before mapping to bar widths. Axes are generated with `axisLeft` and `axisBottom`, while rectangles represent each region’s population, styled with steelblue fill.

Lluojiandan
85% match
Loading thumbnail…

Customizing Axis

This example displays a bar chart of the top 10 most populous countries using 2018 population estimates from the World Population Prospects 2017 dataset. It emphasizes customized axes, with a bottom axis labeled "Population" and a left axis using abbreviated tick labels (e.g., "1.4B") via `d3.format`. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with grid lines generated by `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV file and rendered as SVG rectangles.

Lliyaxuanliyaxuan
83% match
Loading thumbnail…

Customizing Axes

This bar chart displays the 2018 populations of the top 10 most populous countries, using data from World Population Prospects 2017. It uses `d3.scaleLinear` and `d3.scaleBand` for positioning, with `d3.axisLeft` and `d3.axisBottom` for axes. The x-axis tick format converts numbers to abbreviated forms like “B” via `d3.format`, and grid lines are created by setting `tickSize` to the full chart height. Countries are ordered by population with bars rendered as SVG rectangles in steelblue.

SShuyu Zheng
82% match
Loading thumbnail…

Customising axes

A horizontal bar chart displays the 25 most populous countries in 2020, with population values read from a CSV file and multiplied by 1,000. D3’s `scaleBand` and `scaleLinear` position the bars, while `axisLeft` and `axisBottom` generate axes; the bottom axis uses `tickFormat` to convert values like "1.43G" to "1.43B". The y-axis labels are kept, but its domain lines and tick marks are removed, and the chart adds a title and population axis label.

SSimon Wongsuwarn
82% match
Loading thumbnail…

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, using a horizontal layout with steel-blue bars. The axes are customized: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick formatter via `d3.format` to abbreviate values (e.g., converting “G” to “B”) and includes grid lines extending across the chart. Built with d3.v5 and SVG, the code employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. Population data is read from a CSV file and multiplied by 1000 to reflect actual counts.

MMateus Farias
82% match
Loading thumbnail…

Customizing Axis

This bar chart displays the population of the top 10 most populous countries, using a horizontal layout with steel-blue bars. The axes are customized: the y-axis removes its domain line and tick lines, while the x-axis uses a custom tick formatter via `d3.format` to abbreviate values (e.g., converting “G” to “B”) and includes grid lines extending across the chart. Built with d3.v5 and SVG, the code employs `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. Population data is read from a CSV file and multiplied by 1000 to reflect actual counts.

MMateus Farias
82% match