GunMoLee

@TomboY90·2 public vizzes

Customizing Axes

This example presents a horizontal bar chart detailing the populations of the ten most populous countries. The chart emphasizes its custom axes: a bottom x-axis shows population figures, reformatted from thousands to billions using D3's `format` and a custom tick function, while the left y-axis displays country names with its domain and tick lines removed. The chart, rendered as SVG, uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to construct the scales and axes. Data is loaded from a CSV file using `d3.csv`; grid lines are created by extending the x-axis ticks, and the chart is annotated with axis and title labels.

Feb 9, 2020

Loading thumbnail…

D3 Visualization tutorial

This example shows a bar chart of population counts for ten countries, with the United States and China dominating the visual scale. Built with D3 v5 and React, the visualization loads tabular CSV data and renders it as SVG rectangles. The code uses D3’s `csv` parser, `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to draw tick marks. Population values are converted from thousands to raw counts before mapping to pixel widths.

Feb 9, 2020