Customizing Axes

100%

Customizing Axes

✓ Published1🌍 Public

Last edited Jun 21, 2020

Created on Jun 21, 2020

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.

AI-generated description

*Per 100,000 habitants
This bar chart was constructed using data from Elflein (June, 2020) Rates of coronavirus (COVID-19) cases in the most affected U.S. counties. Retrieved from https://www.statista.com/statistics/1109053/coronavirus-covid19-cases-rates-us-americans-most-impacted-counties/

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most COVID-infected countries, using 2018 population estimates from the United Nations World Population Prospects. The visualization uses d3.scaleLinear and d3.scaleBand to map case counts and country names, with d3.axisLeft and d3.axisBottom for custom axes. The code formats tick labels using d3.format, removes default axis lines, and appends custom text labels for the chart title and axis caption.

SSUPERMAN79355

86% 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

83% match

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

82% match

Loading thumbnail…

COVID chart

The bar chart displays the rate of coronavirus cases per 100,000 habitants for nine U.S. counties, ordered from highest to lowest, using a green fill for each rectangle. It uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` to render the axes. Data is loaded from `data.csv` via `csv` and appended as SVG rectangles. The source is Elflein (June 2020) via Statista.

Mmla341

82% match

Loading thumbnail…

Scatterplot

This scatterplot displays COVID-19 case rates per 100,000 people for ten highly affected U.S. counties, ranked along the y-axis with case counts on the x-axis. The visualization uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for positioning, and d3.axisLeft and d3.axisBottom with custom tick formatting. Circles are appended via d3.selectAll and data joins, styled with blue fills and black strokes. The chart includes grid lines and a title, with data sourced from Statista via Elflein (June 2020).

Mmla341

82% match

Loading thumbnail…

Customizing Axes

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()`.

KKatrina Kalantar

81% match

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for ten countries, sorted from highest (USA) to lowest (Argentina). The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the chart. Custom axis formatting converts large numbers using the `format` function, replacing 'G' with 'B' for billions. The bars and tick labels are styled with linear gradients defined in SVG defs, while the x-axis includes a custom label and tick marks that extend across the plot area. Data comes from a CSV file loaded via `d3.csv`.

Ttolik518

80% 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

80% match