Yuqin

@yuqin50·3 public vizzes

Making a bar chart

This example shows a horizontal bar chart of population figures for the ten most populous countries, using a bar length scaled by population and country names on the vertical axis. The visualization uses D3 v5 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render SVG rectangles. The chart applies a margin-based layout with axes positioned on the left and bottom, and styles the bars with a steelblue fill. The population values are read from the `data.csv` file and multiplied by 1000 to reflect accurate counts.

May 27, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example builds a cartoon face using D3.js v5, rendered as SVG elements with animated eyebrows. It draws a yellow circle for the head, two blue eyes, and a mouth created with the `d3.arc()` path generator. The eyebrows, made of rectangles, move up and down through chained `transition().duration()` calls over two seconds each. The code uses `d3.select` to attach elements to an SVG container and positions them via transform attributes, demonstrating basic geometric shape composition and simple animation in D3.

May 27, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG elements and CSS. It shows circles, rectangles, lines, and paths with varying fill colors, stroke widths, and transformations such as scaling and translation. The code uses inline SVG attributes like `cx`, `r`, `x`, `y`, and `d` for paths, along with CSS classes to define stroke and line-join properties. The rendering is done entirely through SVG markup, with no external JavaScript libraries.

May 27, 2019