Skip to main content
SimilarExport ZIP
100%

Customizing Axes

✓ Published2🌍 Public
LLonwabo11
Last edited May 10, 2019
Created on May 9, 2019
Forked from Customizing Axes

This example visualizes the temperature in San Francisco over time using a bar chart, with a custom-styled y-axis and x-axis. The bars represent temperature values, and the axes are configured with D3 v5’s `scaleBand` and `scaleLinear`, alongside `axisLeft` and `axisBottom`. Tick text and lines are styled via CSS classes. The data is loaded from a CSV file using `d3.csv`, and the rendering is done with SVG rectangles.

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…

Customizing Axes

This example visualizes the temperature in San Francisco over time using a bar chart, with a custom-styled y-axis and x-axis. The bars represent temperature values, and the axes are configured with D3 v5’s `scaleBand` and `scaleLinear`, alongside `axisLeft` and `axisBottom`. Tick text and lines are styled via CSS classes. The data is loaded from a CSV file using `d3.csv`, and the rendering is done with SVG rectangles.

LLonwabo11
100% match
Loading thumbnail…

Customizing Axes

This example visualizes daily temperature data from a CSV file of San Francisco weather, plotting temperature against day using a line chart with smooth curves. Customized axes feature tick marks that extend across the plot, rotated labels, and a title. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis`, rendering as SVG. Axis labels and tick styling are applied via CSS classes.

JJake
90% match
Loading thumbnail…

Customizing Axes

This line chart displays temperature measurements over time, with circles marking each data point. The visualization customizes axes by removing the domain lines, adding tick lines that span the full chart height and width, and including rotated axis labels for both the time and temperature scales. Data comes from a CSV of San Francisco temperatures, rendered as an SVG using d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line.

Jjesramyep1263
89% match
Loading thumbnail…

Customizing Axes

This example shows how to customize axes in D3 bar charts, displaying event names on the y-axis and their start years on the x-axis. It uses D3 v5’s `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the chart, with custom tick formatting via `format('.3s')` and removal of default domain lines. The SVG rendering includes axis labels, a title, and grid lines generated by setting negative tick sizes. Data comes from a local CSV file parsed with `d3.csv`.

SShehroze Aamer
83% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of population data, highlighting the customization of axes. The chart uses D3 v6 to load CSV data and render SVG. It applies a linear scale for the x-axis and a band scale for the y-axis, removing default axis lines and gridlines. The x-axis is customized with a tick format that abbreviates numbers (e.g., 'G' replaced with 'B') and a custom axis label, while the y-axis ticks are displayed without lines.

YYanda Qu
83% match
Loading thumbnail…

Temperature in San Francisco

This example visualizes hourly temperature readings in San Francisco as animated bars over time, with a time-based x-axis and linear temperature y-axis. Using D3 v5, it loads CSV data, applies a time scale and linear scale, and renders SVG rectangles that transition their widths over two seconds to reveal the temperature pattern. The chart includes labeled axes, grid lines, and a title, with styling handled through external CSS.

Ffahmijaafar
82% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of country populations, with a custom tick format that abbreviates large numbers from billions (G) to billions (B). It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and axes, with data loaded from a CSV via `d3.csv`. The axis ticks are formatted using D3’s `format` function and the bars are styled with a blue fill in SVG.

LLonwabo11
82% match
Loading thumbnail…

Customizing Axes

This example demonstrates customized chart axes with an SVG bar chart of country populations loaded from a local CSV file. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to create the plot, applying a custom tick formatter that abbreviates large numbers with `format('.3s')` and replaces ‘G’ with ‘B’. The x-axis is styled as a full-length gridline, while the y-axis removes its domain and tick lines for a cleaner look.

IIan
82% match