Hui Zhang

@HuiZhang0312·5 public vizzes

Scatter plot

A scatter-style bar chart displays the 2021 populations of the top 10 countries using horizontal bars, with country names on the y-axis and population counts on the x-axis. The visualization employs D3 v6’s `scaleLinear` and `scaleBand` for axes, `axisLeft` and `axisBottom` for ticks, and `select` for SVG rendering. Data is loaded from a local CSV file, and population values are formatted with `.3s` notation, replacing 'G' with 'B' for billions.

Jul 6, 2021

Loading thumbnail…

Bar chart

This bar chart displays the populations of the top 10 most populous countries in 2021, ranked from China to Mexico. The visualization uses a horizontal bar layout, with population values plotted on a linear x-axis and country names on a banded y-axis. The data is loaded from a CSV file using D3’s `csv` function and rendered as SVG rectangles. The code applies `scaleLinear` and `scaleBand` for scaling, and customizes axes with `axisBottom`, `axisLeft`, and tick formatting that converts values to billions.

Jul 6, 2021

Loading thumbnail…

Smile Face

A smiling face built with D3.js v6 renders as an SVG with animated eyebrows. The code uses `d3.arc` to draw the mouth and `d3.select` to append circles, rectangles, and a path for facial features. Eyebrows transition vertically in a looping sequence via `transition.attr` and an `on('end')` callback. All geometry is centered by translating a group element, and dimensions are derived from the SVG’s width and height attributes.

May 13, 2021

Loading thumbnail…

Cars report

This example demonstrates a static "Cars report" page featuring an SVG traffic light illustration. The visualization shows three car brands, with Nio highlighted in red, alongside two traffic lights composed of circles and rectangles rendered with SVG and styled through CSS. The code imports D3’s `select` function to update a message element and uses a local ES6 module for the text content. The SVG uses basic shapes like `circle`, `rect`, `line`, and `path`, with transformations applied via the `translate` attribute.

May 12, 2021

Loading thumbnail…

Accidents on the Road - Choropleth

This choropleth map visualizes road accident data across Russian regions, coloring each region according to a normalized value using a per-region threshold scale with custom color domains. The visualization includes city markers and a legend, with tooltips showing regional names and values on hover. Built with D3 v3, it uses `d3.geo.albers` projection, `d3.geo.path`, and TopoJSON to render geographic boundaries, while data from a CSV file drives the color assignments via `d3.scale.threshold`. The map also handles missing region data by mapping certain administrative codes to equivalent values.

Sep 9, 2020