Skip to main content
SimilarExport ZIP
100%

Customising Axes

✓ Published1🌍 Public
Jjhofang
Last edited Jan 6, 2020
Created on Jan 5, 2020
Forked from Making a Bar Chart

A horizontal bar chart shows the ten most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for the scales, and d3.axisBottom and d3.axisLeft for the axes. The x-axis labels are formatted with d3.format, and the y-axis gridlines and domain line are removed, while the x-axis domain is also removed. A custom axis label and title are added as SVG text elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Customising Axes

A horizontal bar chart displays the ten most populous countries using data from a CSV file. Population values are formatted with D3's `format` shorthand, converting gigabytes to billions (e.g., "1.41B"). The chart uses `scaleLinear` for the x-axis and `scaleBand` for the y-axis. D3's `axisBottom` and `axisLeft` generate custom axes, with grid lines and tick styling, all rendered as SVG.

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

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, with populations displayed in billions using a custom tick format. The chart uses d3.scaleLinear and d3.scaleBand to map population values and country names, while d3.axisBottom and d3.axisLeft render the axes. Key customizations include removing domain lines, adding gridlines via tickSize, and appending an axis label. Data is loaded from a CSV file with d3.csv, and the visualization is rendered as SVG with D3 v5.

CChampCham
95% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the ten most populous countries, using a linear scale for population and a band scale for country names. The axes are customized with a filtered y-axis, a formatted x-axis that converts billions to "B", and a title. Built with D3 v5, it loads data from a CSV and renders SVG rectangles, removing domain lines and tick marks for a cleaner look.

DDhaval Potdar
95% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the population of the ten most populous countries, using CSV data loaded with `d3.csv`. The chart customizes its axes with `d3.axisBottom` and `d3.axisLeft`, applying a `d3.format` tick formatter that converts values from G to B. `d3.scaleLinear` and `d3.scaleBand` position the bars, while gridlines are created by extending x-axis ticks with a negative tick size. The y-axis’s domain and tick lines are removed for a cleaner look.

1123fischer
95% match
Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the ten most populous countries, using population data loaded from a CSV file via `d3.csv`. The chart emphasizes custom axes: the y-axis removes domain and tick lines, while the x-axis applies a custom tick format that abbreviates numbers and converts 'G' to 'B' for billions. D3's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` construct the scales and axes, with tick sizes extended across the chart for gridlines. SVG rendering handles the visual output.

RRohit K Bharadwaj
94% match
Loading thumbnail…

Customizing Axis

A horizontal bar chart displays the ten most populous countries, with population values along the x-axis and country names on the y-axis. The chart uses d3.scaleLinear and d3.scaleBand to map data, while d3.axisBottom and d3.axisLeft render axes with customized tick formatting that abbreviates large numbers (e.g., converting "G" to "B" for billions). Axis lines and ticks are selectively removed using D3 selections, and the data is loaded from a CSV file with populations multiplied by 1,000.

Mmmustafau
94% match