Skip to main content
SimilarExport ZIP
100%

Customising Axes

✓ Published1🌍 Public
Bbenholvey
Last edited Jul 23, 2020
Created on Jul 21, 2020

This example shows current Premier League standings as a horizontal bar chart, with teams sorted by points and a custom-styled axis layout. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. The code removes default tick lines and domain paths for the y-axis, adds rotated titles, and uses CSS classes to style tick text and axis labels. The SVG rendering loads data from a CSV file.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot displays the final Premier League standings, plotting each team’s points total along the x-axis against team names on the y-axis using a categorical scale. It uses d3.csv to load the data, d3.scaleLinear for the point values, and d3.scalePoint for team ordering, with axes from d3.axisLeft and d3.axisBottom. Circles are rendered via SVG, with gridlines generated through tickSize, and margin-based positioning via a translated group.

Bbenholvey
80% match
Loading thumbnail…

d3js workshop - bar chart

This bar chart visualizes the English Premier League standings as of February 2015, showing each team’s total points. Using d3.csv to load the league table, it maps team names to horizontal bars whose widths are scaled linearly to the PTS column. The SVG rendering places team point totals at the end of each bar, with a fixed bar height and padding for clarity. The code relies on d3.scale.linear for the x-axis scale and d3 selection/enter/append patterns to construct the chart, though it does not include axes, labels, or interactivity beyond the static bars.

AAlbertFranco
79% 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
79% match
Loading thumbnail…

d3js workshop - bar chart

This bar chart visualizes the Premier League standings as of February 2015, showing each team’s total points as horizontal bars. It displays only the points data, omitting team labels entirely. The visualization uses D3.js v3 to load the CSV data, applies a linear scale (`d3.scale.linear`) to map points to bar width, and renders the chart as SVG rectangles with text labels showing the point values at each bar’s end. The bar height is fixed, with spacing between bars via padding.

BBillyBHWong
79% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of Alpha Team ratings by soldier role, with scores normalized from a CSV dataset. The visualization demonstrates customizing D3 axes by removing default domain lines and tick lines, adding an axis label, and applying custom styling via CSS. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, d3.axisBottom, and d3.axisLeft, with data loaded via d3.csv.

JJimmyDiGioia
78% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of suspicious code lines ranked by ID, with populating data from a CSV file. It demonstrates how to customize D3 axes: the y-axis removes its domain and tick lines, while the x-axis uses a custom tick formatter (format('.3s')) to abbreviate numbers, replacing 'G' with 'B'. Data is loaded via d3.csv and rendered as SVG rectangles using scaleLinear and scaleBand. Axis labels and a title are added with custom styling through styles.css.

KKanagaraj-NN
78% match
Loading thumbnail…

Customizing axes

This example shows a horizontal bar chart of the ten most populous countries, with a custom formatted x-axis and a styled y-axis. The D3 script (v5) loads data from a local CSV file and uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG. It removes default axis lines, customizes tick labels to abbreviate numbers (e.g., "1.43B"), and adds a title and an axis label.

PPeter S
78% match
Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart ranking the population of the top 10 most populous countries, with a customized axis style. The chart uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom to generate the axes. The code removes default axis lines and domain paths, then applies custom styling via CSS for tick labels, grid lines, and a title. The visualization renders to SVG elements.

RRobindj2000
78% match