Skip to main content
Log in
Z

Zhang Shengli

@viczhangge·14 public vizzes

Loading thumbnail…

Hello HTML

This example displays a grid of fifteen identical cartoon faces, each rendered in yellow with black outlines, two eyes, and a curved mouth. The visualization is built with React and D3.js, where the `d3.arc` API generates the mouth path with specified inner radius and width. The `Face` component composes reusable subcomponents—`BackgroundCircle`, `Eyes`, and `Mouth`—within an SVG container, and `d3.range` creates the array of face instances, all positioned using explicit center coordinates.

Mar 27, 2021
Loading thumbnail…

Fork of Hello HTML

A minimalist HTML page demonstrates the absolute minimum structure required for a web document. The page contains only a title in the head and an empty body, with no visual content or JavaScript. The code uses standard HTML elements such as `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>`. This example serves as a starting point, showing that no external libraries or APIs are needed for a basic HTML shell.

Mar 26, 2021
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js data joins and DOM manipulation by rendering a row of five fruit-colored circles that update when data changes. It uses `d3.select`, `d3.range`, and `d3.scaleOrdinal` to map fruit types to colors, with `selection.enter()`, `merge()`, and `exit()` to handle adding, updating, and removing SVG circles. After an initial render, a pop removes one circle, and a subsequent change re-colors the middle circle from red to yellow, showing dynamic updates driven by array mutations.

Sep 26, 2019
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

Sep 26, 2019
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in SVG. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct fill colors, with labeled circles spaced vertically. The size legend uses `scaleSqrt` to encode numeric values in circle radius, showing five ticks from 0 to 10 with semi-transparent black fills. Both legends are built with D3 v5’s `selection.call()`, `scaleOrdinal`, and `scaleSqrt`, positioning groups via translate transforms and entering/exiting DOM nodes dynamically. The code exports `colorLegend` and `sizeLegend` as functions for modular reuse.

Sep 26, 2019
Loading thumbnail…

World Countries Tree

This example visualizes the hierarchical structure of world countries, organized by continent and subregion, as a horizontal tree layout. It uses D3 v5’s `tree` and `hierarchy` functions to compute node positions and `linkHorizontal` to draw curved links between parent and child nodes. The visualization renders text labels for each region and country directly in an SVG element, with zooming enabled via the `zoom` event. Node positions are scaled by depth, making higher-level categories appear larger and more prominent.

Sep 26, 2019
Loading thumbnail…

World Population Area Chart

An area chart visualizes global population growth over time, with the x-axis representing years and the y-axis showing population in billions. The visualization initially appears in blue, with interactive hover effects directing attention to specific data points. The code uses D3 v5’s `area` generator with a `curveBasis` smoothing function, along with `scaleTime` and `scaleLinear` for axes. It loads CSV data from a VizHub dataset, formats tick labels to convert billions (e.g., “G” to “B”), and renders axes and labels using SVG.

Sep 26, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays a week of temperature data for San Francisco, sourced from Data Canvas - Sense Your City, with timestamps on the x-axis and temperatures in Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render a smoothed, filled area path. SVG output draws the chart, including gridlines, axis labels, and a title, with styling defined in CSS for text and the maroon line path.

Sep 26, 2019
Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5 to load CSV data from Data Canvas - Sense Your City, then applies `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` with `curveBasis` for the smoothed path. SVG rendering includes labeled axes and a title.

Sep 26, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each blue, semi-transparent circle represents a vehicle, with axes labeled “Horsepower” and “Weight” alongside a title. Built with D3 v5, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.extent` for scaling, and `d3.axisBottom` and `d3.axisLeft` to render gridlines and tick marks. The SVG rendering includes custom margins, axis labels, and a title, with styling applied via CSS.

Sep 26, 2019
Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot displays the populations of the top 10 most populous countries, with each country positioned along a vertical point scale and its population plotted on a linear horizontal scale. The chart uses d3.csv to load the data, d3.scalePoint for the categorical y-axis, and d3.scaleLinear for the population axis, with circles rendered as SVG elements. Axis tick formatting employs d3.format to abbreviate population values, and gridlines are drawn using tickSize settings on the axes.

Sep 26, 2019
Loading thumbnail…

Hello VizHub

This example displays a single, large “Hello VizHub!” message centered on a dark blue page. It demonstrates how to set up a minimal D3.js visualization using the `select` function to update the text content of a div element, with styling handled by an Ubuntu font and CSS. The message text is imported from a local ES6 module, `myMessage.js`, while the page loads D3 v5 from a CDN and structures the app with separate `index.html`, `index.js`, and `styles.css` files.

Sep 23, 2019
Loading thumbnail…

Customizing Axes

This example shows a bar chart of the top 10 most populous countries in 2018, based on United Nations data, with customized axes. It builds on a basic bar chart by removing default axis lines, adding grid lines through tick sizing, and formatting population labels with suffixes like “B” for billions. The code uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, along with SVG rendering. Population values from the CSV are multiplied by 1000 to reflect true counts.

Sep 23, 2019
Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 visualization can dynamically respond to browser resizing. It draws two thick green lines forming an X shape that always spans the full width and height of the chart container. The code uses CSS positioning to fill the viewport, then extracts the container’s `clientWidth` and `clientHeight` in a `redraw` function to update the SVG’s dimensions. A window `resize` event listener triggers `redraw`, which rebinds and updates the line elements through D3’s data join pattern.

Sep 23, 2019