coconan

@coconan·2 public vizzes

Customizing Axes

This example shows the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate as a horizontal bar chart, using population values multiplied by 1,000. It highlights how to customize D3 v5 axes, including removing axis frames, adjusting tick marks, and formatting tick labels to convert G (giga) to B (billion) with `format('.3s')`. The chart is rendered as SVG using `d3.scaleLinear` and `d3.scaleBand`, with styles for tick text, lines, and title defined in CSS.

Aug 11, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can automatically respond to changes in the browser window size. A green X-shaped pair of lines is always drawn to fill the entire viewport, with the SVG’s width and height updated dynamically on every resize event. The code reads the `clientWidth` and `clientHeight` of a fixed-position container div, then uses those values to set the SVG attributes and redraw the lines via a custom `redraw` function. It uses D3 v5 for SVG selection, data binding, and element merging.

Aug 11, 2019