lokkafufya

@lokkafufya·2 public vizzes

Customizing axes

This example demonstrates how to customize axes in a bar chart showing the top 10 most populous countries, with population values formatted from raw numbers to compact “B” notation. It removes unnecessary axis lines, adds grid lines via tick sizing, and includes a chart title and axis label. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with styles guided by a dataviz style guide. Data comes from a CSV file, rendered as SVG rectangles with custom tick formatting and removed domain lines.

Dec 11, 2019

Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can adapt to browser resizing. It shows a blank SVG canvas that fills the entire viewport, with a hardcoded dataset of two resources awaiting rendering. On every window resize event, the code extracts the container’s dimensions using `clientWidth` and `clientHeight`, then updates the SVG’s `width` and `height` attributes accordingly. The implementation uses d3.js v5 for DOM selection and SVG creation, with pure JavaScript event listeners to trigger the redraw function.

Dec 11, 2019