liu981101

@liu981101·3 public vizzes

刘文生

This example displays a single static message, “Hello 四道,” rendered in very large, centered text. The visual is built with a plain HTML page that uses CSS to style the text and JavaScript is not utilized. The page’s main content is a styled `<div>` element with the class `message`, which sets the font size to 13em and centers the text horizontally. The code relies solely on basic HTML and CSS for presentation.

Dec 30, 2022

Loading thumbnail…

nation population

This bar chart displays the populations of the ten most populous countries in 2017, using a horizontal layout where each bar’s length corresponds to the population value from a CSV file. The visualization employs D3 v7 APIs such as `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`, rendering SVG rectangles with steelBlue fills. Data values are multiplied by 1000 and formatted with abbreviations like “B” for billions, while axis lines and tick marks are selectively removed for a cleaner presentation.

Dec 24, 2022

Loading thumbnail…

demo of D3

This example shows a simple yellow face with two eyes and an open mouth, rendered as SVG shapes and animated with D3 transitions. The code uses D3 v7's `select` and `arc` functions to build the shape, with a circle for the head, two circles for eyes, and an arc path for the mouth. One eye animates vertically up and down using chained `transition()` calls with `attr` updates over 1000ms durations, while the other eye and mouth remain static. The SVG canvas is 800 by 400 pixels, and the drawing is centered via a `g` element transform.

Dec 24, 2022