kb1ngram4

@kb1ngram4·4 public vizzes

Customizing Axes

A horizontal bar chart displays the populations of ten countries in millions, with axes customized to improve readability. The y-axis labels are cleanly positioned without tick lines, while the x-axis uses abbreviated number formatting, converting values like “1.42B” from gigabytes notation to billions. SVG rendering leverages D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, with tick formatting via `d3.format`. Data loads from a CSV file, and both axis domains and tick marks are selectively removed for a minimalist presentation.

Aug 5, 2020

Loading thumbnail…

Choropleth Map with Interactive Filtering

A world choropleth map colors countries by economic classification, with a linked legend that filters the map when a category is clicked. Hovering over the legend dims non-matching countries to 10% opacity, while the selected category is highlighted. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for panning, alongside a custom ordinal `scaleOrdinal` with the `schemeSpectral` range. Map data comes from the World Atlas TopoJSON and TSV files.

Aug 3, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 SVG visualization can automatically adjust its size to fill the browser window. A green X spanning the full chart area is drawn with two `<line>` elements, and both the SVG’s width and height are updated on every window resize event. The code reads the container’s `clientWidth` and `clientHeight` properties to drive the redraw, using `d3.select` to append the SVG and a `resize` event listener to trigger the update.

Aug 3, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face entirely from SVG shapes created with D3.js, including a circular head, eyes, and an arc-based mouth. It demonstrates fundamental DOM manipulation with selections and attribute setting. The two rectangular eyebrows animate by moving up and down using chained `transition().duration()` calls, which shift the eyebrow group’s transform. The code uses d3’s `select`, `arc`, and transition methods to construct and animate the face, calculating positions relative to the SVG’s width and height.

Aug 3, 2020