Daniel Weston

@TransferFunction·4 public vizzes

Customizing Axes

The chart displays a horizontal bar chart of country populations, sorted by size, with a customized axis layout. D3 v5 APIs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` position the bars, while `format` abbreviates tick labels (e.g., "400K"). The y-axis removes its domain and ticks, and the x-axis uses negative tick lines to create a grid. Data loads from `data.csv`, with population values multiplied by 1,000 before rendering in SVG.

Jul 12, 2019

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a horizontal bar chart from CSV data using D3 v5 with SVG rendering. It shows population values for various countries, with each bar’s length scaled linearly and categorical labels positioned along the y-axis via `d3.scaleBand`. The code loads `data.csv`, formats population numbers, and renders axes using `d3.axisLeft` and `d3.axisBottom`, alongside rectangles styled with CSS. The visualization highlights the core workflow of data loading, scaling, and SVG element creation in D3.

Jul 12, 2019

Loading thumbnail…

Lets make a face

This example uses D3.js (v5) to draw a stylized cartoon face on an SVG canvas, featuring a yellow circular head, black eyes, and a curved mouth created with d3.arc. The code positions facial features using group transformations, centering the face within a 960×500 viewport. A transition animation moves the eyebrows upward and back downward over two seconds, demonstrating d3’s `transition` method with duration chaining. The rendering relies on SVG elements and D3 selections, with no external data source.

Jul 12, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic shapes—circles, rectangles, lines, and paths—using SVG elements embedded directly in an HTML page, with styling controlled through CSS. The code uses D3.js v5 to select the SVG container and relies on standard SVG attributes like `cx`, `r`, `x`, `y`, and `d` to define geometry. A simple transform group shifts and scales the shapes, while stroke and fill properties, including a blue fill with black stroke on a subgroup, show how visual appearance is set.

Jul 11, 2019