wsupko

@wsupko·3 public vizzes

Customizing Axes

A horizontal bar chart displays the populations of ten countries, with bars ranked from China down to Mexico. The visualization focuses on axis customization: a band scale positions country labels on the y-axis, while a linear scale maps population values to bar lengths on the x-axis. Rendered as SVG using d3.scaleLinear, d3.scaleBand, axisLeft, and axisBottom, the chart loads population data from a CSV file and multiplies each value by 1000 to reflect actual population counts.

Apr 16, 2019

Loading thumbnail…

Making a bar chart

This bar chart displays population estimates for the ten most populous countries, using data from the United Nations World Population Prospects 2017. The visualization employs D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` to render tick marks. Population values are multiplied by 1,000 and drawn as steel-blue SVG rectangles, with margins and a translated group element positioning the chart within the 960×500 viewport.

Apr 16, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple orange smiley face using D3.js v5 and SVG primitives, including circles, rectangles, and a path created with the `d3.arc` generator for the mouth. The face is centered via a group transform, with eyebrows animated upward and back down using chained `transition.attr` calls over two seconds each. The code explicitly sets dimensions from the SVG attributes and uses fixed pixel offsets for eye spacing and eyebrow placement, demonstrating basic SVG rendering and animation without external data.

Apr 15, 2019