Skip to main content
Log in
Y

YUXUE LIU

@liuyuxue97·4 public vizzes

Loading thumbnail…

A Bar Chart of the Top 10 Most Populous Countries

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization encodes country names on a band scale and population values on a linear scale, with steel-blue rectangles representing each value. Built with D3 v5, the code uses `csv` for data loading, `scaleBand` and `scaleLinear` for scales, and `axisLeft` and `axisBottom` for axes. SVG rendering is used throughout, with margins creating an inner plotting area for the chart elements.

Mar 2, 2020
Loading thumbnail…

A Bar Chart of the Top 10 Most Populous Countries

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization encodes country names on a band scale and population values on a linear scale, with steel-blue rectangles representing each value. Built with D3 v5, the code uses `csv` for data loading, `scaleBand` and `scaleLinear` for scales, and `axisLeft` and `axisBottom` for axes. SVG rendering is used throughout, with margins creating an inner plotting area for the chart elements.

Feb 23, 2020
Loading thumbnail…

Smily Face

A smiling face is drawn as a yellow circle with black eyes and an arc-shaped mouth, centered in an SVG canvas. The visualization uses React to render the graphic, with D3's `arc` function defining the mouth path based on specified inner and outer radii and angle ranges. The code sets fixed dimensions for the face, eyes, and mouth, and positions elements relative to the canvas center. The SVG elements are styled with fill and stroke attributes, demonstrating a simple composition using React and D3 APIs.

Feb 20, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG and CSS can be used to draw and style basic geometric shapes, including circles, rectangles, lines, and a path. The SVG markup positions each shape within a 960x500 canvas, with a group transformation scaling the entire drawing. CSS classes, such as `.lines`, apply stroke properties and a line-join style to the path, while individual elements use inline attributes like `fill` and `stroke-width`. The code relies solely on standard SVG elements and CSS styling, with no external JavaScript libraries or data sources involved.

Feb 20, 2020