Skip to main content
Log in
U

ucsclk

@ucsclk·4 public vizzes

Loading thumbnail…

Customizing Axes

This bar chart visualizes node insertion distances from a dataset, showing both absolute and relative distances across node IDs. The chart uses dual y-axes: a left axis for node distance and a right axis for relative distance, with red circles overlaid on bars to highlight relative values. Built with D3 v5, the code demonstrates customizing axes through `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `axisBottom`, with `.tickFormat` and `.tickSize` controls. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering includes labeled axes and a title.

Jun 4, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries, with node distance on the x-axis and node ID on the y-axis, based on a 2018 United Nations population estimate. It demonstrates customizing D3 v5 axes, including tick formatting, tick sizes, removing axis lines, and adding an axis label. The visualization uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render an SVG with custom styles for ticks, labels, and titles. The data source is the United Nations World Population Prospects 2017.

Jun 2, 2020
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, presented as horizontal bars with population values on the x-axis. It demonstrates customized axes in D3.js: the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “B” for billions), while the y-axis is a band scale for country names, with grid lines and axis labels styled via CSS. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render the SVG chart.

Jun 1, 2020
Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries using 2018 data from the United Nations World Population Prospects, presented as horizontal bars with population values on the x-axis. It demonstrates customized axes in D3.js: the x-axis uses a linear scale with tick labels formatted in abbreviated units (e.g., “B” for billions), while the y-axis is a band scale for country names, with grid lines and axis labels styled via CSS. The code uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft to render the SVG chart.

Jun 1, 2020