Aaron Guillen

@aaronguillen·3 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries, with bars colored by country and labeled along a bottom axis. The chart uses D3.js scales (`scaleLinear`, `scaleBand`, `scaleOrdinal`) to map population values and country names, while `d3.axisLeft` and `d3.axisBottom` render the axes. Population data is loaded from a CSV file via `d3.csv`, multiplied by 1000 in the code, and rendered as SVG rectangles. The visualization highlights D3’s core data-binding and SVG generation workflow.

May 26, 2020

Loading thumbnail…

Let's Make a Face with D3.js

A smiling face built from SVG circles and an arc appears on a blue background. The left eye is static, while the right eye slides downward over two seconds using a D3 transition on the `y` attribute. The mouth is drawn with `d3.arc()` inside a `<g>` element, positioned via a translate transform. The example uses D3 v3 selections and appends shapes to an SVG canvas with explicit width and height attributes, rendering entirely through animated vector graphics.

May 26, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and paths—styled with both inline attributes and CSS classes. Using React, the markup renders in an SVG element with inherited fill, stroke, and stroke-width properties for grouped shapes. The `lines` class in an external stylesheet applies black strokes, while a path overrides this with red and a round line join. Scaling and translation transforms position the shapes within a 960×500 viewport.

May 25, 2020