Ryan

@rhuss623·3 public vizzes

Customizing Axes

This example demonstrates a bar chart of the top three most populous countries, with customized axes that remove tick marks and format population values in billions. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars from CSV data. The x-axis labels are formatted using D3’s `format` function, replacing “G” with “B” for readability. The chart also includes a title and applies a steelblue fill to bars via external CSS.

Nov 19, 2019

Loading thumbnail…

Bar Chart!

This bar chart displays the populations of China, India, and the US, derived from a CSV file. It uses D3.js version 5.12.0 to render SVG graphics, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for axes. The bars are styled with a steelblue fill via CSS.

Nov 19, 2019

Loading thumbnail…

Face!

A yellow face with black outlined eyes, animated eyebrows, and a wide open mouth is drawn using SVG. The face is centered in a 960 by 500 pixel viewport, built with D3 selections and shape generators. Eyebrows move up and down through a chain of `transition` calls that alter a `g` element’s `transform`. The mouth uses the `d3.arc` path generator with specified inner and outer radii and angular extents, all rendered as static and animated SVG elements.

Nov 13, 2019