Customising Axes

100%

Customising Axes

✓ Published0🌍 Public

Last edited Jan 8, 2021

Created on Jan 8, 2021

Forked from Untitled

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.

AI-generated description

data from https://coronavirus.data.gov.uk/details/download

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This chart displays new COVID-19 cases on August 12th, 2020, for nine regions of England, using horizontal bars whose lengths encode case counts. Built with D3 v6, it loads data from a local CSV file via `d3.csv`, scales values with `scaleLinear` and `scaleBand`, and renders SVG rectangles. Axis ticks are generated using `axisLeft` and `axisBottom`. The data originates from the UK government’s coronavirus dashboard.

Bbicyclecode

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

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

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

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

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

82% match

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

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

81% match