Zhipeng Xu

@Ainevsia·3 public vizzes

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars represent each nation’s population, with axis labels and tick marks styled in muted colors, and a tooltip showing the exact value on hover. The visualization is built with React, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, while the rendering leverages SVG shapes. Axes and marks are generated as React components, demonstrating a hybrid approach combining D3’s scaling utilities with React’s component-based rendering.

Jun 16, 2020

Loading thumbnail…

make a face with d3.js

Using d3.js v5 and SVG, this example renders a cartoon face from primitive shapes: a yellow circle head, two eyes, eyebrows, and a mouth arc. The face is centered and symmetrically positioned using coordinate transforms. The eyebrows animate vertically through chained `transition` calls with a 2000ms duration, moving up by 50 pixels and then returning to their original position. The code constructs the SVG programmatically via `select` and `append`, and uses the `arc` function to generate the mouth's path data from inner and outer radii and angular ranges.

Jun 15, 2020

Loading thumbnail…

SVG

This example demonstrates basic SVG shape drawing and grouping within an HTML page, using raw SVG elements such as `circle`, `rect`, `line`, and `path`. The code shows how attributes like `fill`, `stroke`, `stroke-width`, and transforms (`translate` and `scale`) affect appearance, while CSS classes style the line group and its path. Static coordinates and colors define the composition, with no data binding or interactive behavior. The page also loads a bundled script that sets text content, though the target element is not present in the HTML.

Jun 15, 2020