Customizing Axes

100%

Customizing Axes

✓ Published0🌍 Public

Last edited Nov 22, 2020

Created on Nov 20, 2020

This bar chart tracks new confirmed COVID-19 cases in Alameda County by date, using data from a local public health dataset. The visualization emphasizes the customizable nature of D3 axes, with rotated date labels, a formatted time axis, and horizontal gridlines extending from the y-axis. Built with D3 v5, it uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` with custom tick formatting via `timeFormat`. The SVG rendering includes an axis label, a rotated title, and blue bars sized by `xScale.bandwidth()`.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Customising Axes

A bar chart displays new COVID-19 cases by English region on August 12, 2020, using data from coronavirus.data.gov.uk. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` and `scaleBand` to map case counts and region names, while `axisLeft` and `axisBottom` generate the chart’s axes. Rectangles are appended via a data join, with a custom Xanh Mono and Roboto Mono font styling and dotted green outlines on each bar.

Bbicyclecode

83% match

Loading thumbnail…

Customizing Axes

This bar chart displays COVID-19 infection rates per 100,000 people for the most affected U.S. counties, with values sourced from Statista (2020). It shows how cases are distributed among ten counties, using a custom-formatted x-axis that abbreviates large numbers with a capital "K". The visualization uses d3.scaleLinear and d3.scaleBand for axes, and d3.axisLeft/d3.axisBottom for custom tick marks and labels. The code removes default axis lines, adds custom tick styling with d3.format, and annotates the chart with a title and axis label. Bars are rendered as SVG rectangles with a blue fill.

Mmla341

81% match

Loading thumbnail…

Customizing Axes

This bar chart shows the incubation distribution of cases over days, with a linear x-axis for case numbers and a banded y-axis for day values. It demonstrates custom axis styling by removing domain lines, adding rotated and formatted labels, and using a custom tick format that abbreviates large numbers. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering SVG rectangles from `data2.csv` with steelblue fills and customized tick text.

LLakshmi9666

81% match

Loading thumbnail…

Customized bar chart

This example presents a customized bar chart of COVID-19 case counts by U.S. jurisdiction, using data from August 2020. It displays the top ten locations ordered along the vertical axis, with horizontal bar lengths encoding total cases. The visualization is built with React and D3 v5, leveraging `scaleBand` for categorical positioning, `scaleLinear` for quantitative scaling, and `csv` for data loading. SVG rendering produces the bars, axes, and tick labels, with D3’s `format` function abbreviating large numbers (e.g., converting billions to “B”).

Rrsulli4

78% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart visualizes total COVID-19 cases across eleven countries, using a horizontal layout with a blue-pink gradient fill for bars. The visualization customizes both axes: the y-axis removes tick lines and domain, while the x-axis formats values using D3’s `format` function (e.g., converting to compact notation) and includes a labeled axis title. Data is loaded from a CSV file using `d3.csv`, with scales created via `scaleLinear` and `scaleBand`. Text elements also feature gradient fills, and margins are explicitly set to position the chart within an SVG canvas.

RRohit-2710

76% match

Loading thumbnail…

customising axes

This horizontal bar chart displays the 7-day incidence of COVID-19 per 100,000 population across German federal states as of March 2, 2021, with data from the Robert Koch Institute. The visualization highlights state rankings from Thuringia (125) down to Schleswig-Holstein (50). Using D3 v5 with SVG rendering, the code employs `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Custom axis formatting applies `format('.3s')` to tick labels and removes domain lines, while `axisLeft` and `axisBottom` generate the axes.

JJames Malvern

76% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

This bar chart displays COVID-19 total cases per country, with countries listed on the y-axis and case counts on the x-axis. Each bar is filled with a purple-to-pink linear gradient, and the axis labels use a separate gradient for text styling. The visualization is built with D3 v6, using `scaleLinear` and `scaleBand` to map the data, which is loaded from a CSV file. The code customizes the axes and text appearance through CSS rules, including tick label colors and font sizes.

DDmitrii

76% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for eleven countries, using a linear gradient fill and customized axes. The visualization employs D3 v6 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, while tick labels use a text gradient and formatted numbers via `d3.format`. Data comes from a CSV file containing country names and case totals. The chart includes a title and axis labels, with gridlines removed from the axes.

YYash_Mistry

76% match