ching-tw

@ching-tw·2 public vizzes

Let's make a face with D3.js!

D3.js draws a simple face on an SVG canvas, using its `select` to target the `svg` element and reading its `width` and `height` attributes. The example constructs facial features—such as eyes and a mouth—as SVG shapes positioned within the 960×500 coordinate space. The code relies on D3 v5’s core selection API, with dimensions accessed via the `attr` method, and renders all elements as static vector graphics without interaction or animation.

Oct 6, 2020

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, displaying petal length on the x-axis and sepal width on the y-axis, with each data point colored by species using an ordinal color scale. It uses React with D3 v5’s `scaleLinear` and `scaleOrdinal` for scaling, and renders circles in SVG. Tooltips reveal exact petal length values, and the axes include formatted tick labels and clear axis titles.

Oct 6, 2020