Z

Zhi Guangda

@HOOLoLo·25 public vizzes

Loading thumbnail…

Persons of Concern StreamGraph by Origin

This visualization shows the cumulative number of COVID-19 cases across Chinese provinces over time, using a streamgraph where each colored band represents a province's reported case count. The data, sourced from daily JSON records, is interpolated to fill gaps between dates. Built with D3 v4, it uses `d3.stack` with the `stackOffsetWiggle` and `stackOrderInsideOut` methods, alongside `d3.area` with `curveBasis`. Labels are positioned via the `d3-area-label` library, while axes and styling are handled through standard D3 scales and SVG elements.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, with menus for selecting the x- and y-axis columns. It also demonstrates k-means clustering through step, restart, and reset buttons that animate the clustering process. The visualization uses D3 v5 for rendering, relying on scaleLinear, axisLeft, and axisBottom for axes, and SVG transitions to animate the movement of circles between positions. The implementation shows clusters being computed and drawn dynamically, with each point's group assignment changing the fill color as the algorithm progresses.

Loading thumbnail…

Cars Scatter Plot

This scatter plot from the UCI Machine Learning Repository's Auto MPG data set visualizes the relationship between horsepower and weight for cars. Red semi-transparent circles, rendered as SVG elements, show a positive correlation where heavier cars generally have more horsepower. The visualization uses D3 v5 functions including `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for coordinate axes, and `csv` for data loading, with custom styles applied via CSS.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, with menus for selecting the x- and y-axis columns. It also demonstrates k-means clustering through step, restart, and reset buttons that animate the clustering process. The visualization uses D3 v5 for rendering, relying on scaleLinear, axisLeft, and axisBottom for axes, and SVG transitions to animate the movement of circles between positions. The implementation shows clusters being computed and drawn dynamically, with each point's group assignment changing the fill color as the algorithm progresses.

Loading thumbnail…

Scatter Plot with Menus

This scatter plot uses D3 v5 to visualize car data from the UCI Machine Learning Repository, with interactive menus to select x- and y-axis variables. A k-means clustering algorithm, initiated via buttons, animates the assignment of points to clusters as group centers move. The SVG rendering relies on d3.scaleLinear for axes and d3.transition for animated dot movement.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot animates k-means clustering on synthetic data, using buttons to step through iterations, restart, or reset the algorithm. Menus let the viewer select x- and y-axis columns from the loaded Auto MPG dataset. The visualization uses D3 v5 with SVG rendering, applying `transition.attr` for animated circle movement, `axisBottom` and `axisLeft` for axes, and custom `dropdownMenu` and `scatterPlot` modules to manage clustering groups and redraws.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes automotive data from the UCI Machine Learning Repository's Auto MPG dataset. Users select the x- and y-axis columns via dropdown menus, with the chart rendering using the d3.scaleLinear, axisLeft, and axisBottom APIs. Buttons trigger step, restart, and reset actions for an animation that cycles through data points, and numeric inputs control N and K parameters for the animation. The visualization uses SVG rendering via d3.scatterPlot and updates circles with a fixed radius and opacity.

Loading thumbnail…

Scatter Plot Test

This scatter plot compares car horsepower to weight using data from the auto-mpg CSV dataset. The visualization renders circles with opacity to show the relationship between the two variables, with axes labeled and a title displayed. The code uses d3.csv for data loading, d3.scaleLinear for scaling, and d3.axisBottom and d3.axisLeft for axis generation. SVG rendering is employed, with margins and tick sizes configured to create a clear, readable chart.

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for various car models from the UCI Machine Learning Repository’s Auto MPG data set. Each red, semi-transparent circle represents one vehicle, with its horizontal position mapped to horsepower and vertical position to weight. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes, while CSV data is loaded via D3’s `csv` function. The chart is rendered as an SVG with custom styling for ticks, labels, and the title.

Loading thumbnail…

Let's make a face with D3.js!

A playful smiley face built with D3.js responds to clicks and button presses. The face, drawn with SVG shapes including circles for eyes and an arc for the mouth, sits on a dark background. Multiple buttons control step, restart, and reset functions, while number inputs for "Nodes" and "Clusters" suggest an underlying clustering algorithm. The code uses D3's `select` and `arc` APIs to manipulate SVG elements and animate the face's eyebrows, demonstrating fundamental DOM manipulation and interactive event handling.

Loading thumbnail…

Let's make a face with D3.js!

A playful smiley face built with D3.js responds to clicks and button presses. The face, drawn with SVG shapes including circles for eyes and an arc for the mouth, sits on a dark background. Multiple buttons control step, restart, and reset functions, while number inputs for "Nodes" and "Clusters" suggest an underlying clustering algorithm. The code uses D3's `select` and `arc` APIs to manipulate SVG elements and animate the face's eyebrows, demonstrating fundamental DOM manipulation and interactive event handling.

Loading thumbnail…

Untitled

This animation demonstrates the k-means clustering algorithm in action, showing how a set of random points are iteratively grouped into clusters and how cluster centers move toward the mean of their assigned points. Users can click the SVG or press buttons to step through the algorithm, restart, or reset with new parameters. The visualization uses D3.js selections, transitions, and SVG elements like circles, lines, and cross-shaped paths to render the data. Interactive controls allow adjusting the number of points and clusters before initialization.

Loading thumbnail…

loading auto mgp scatter plot

This scatter plot visualizes the relationship between horsepower and acceleration in the auto-mpg dataset, with each data point rendered as a semi-transparent steelblue circle. Built with D3 v5, the visualization uses SVG rendering for the chart elements. The code employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `extent` with `.nice()` for domain calculation. The chart includes axis labels, a title, and hover effects that outline circles in red, with the data loaded from an external CSV file.

Loading thumbnail…

Let's make a face with D3.js!

A smiling cartoon face is drawn with SVG shapes, including a yellow circle head, white eyes with black pupils, rectangular eyebrows, and a curved mouth. The face animates through D3.js transitions: the eyes and pupils scale up and down, the eyebrows shift vertically, and the mouth rotates and scales. Using D3 v5, the code builds elements with `select`, `append`, and `attr`, while a series of chained `.transition().duration()` calls create the sequential motion.

Loading thumbnail…

Map with Selectable Countries

This visualization presents a world map where individual countries are colored according to an ordinal income or economy classification. Users can click any country to select it, which highlights that country while dimming all others; clicking again deselects it. A color legend on the left allows filtering the map by a specific income group, similarly dimming non-matching countries. The map uses a natural Earth projection rendered as SVG paths via `d3.geoPath`, with zooming handled by `d3.zoom`. Data is loaded from the World Atlas TopoJSON and TSV files, and the color scale uses `d3.scaleOrdinal` with the spectral scheme.

Loading thumbnail…

Interactive

A world choropleth map colors countries by economic classification, using a spectral ordinal color scale. Users can click any country to highlight it and dim all others, or click again to clear the selection; clicking legend swatches filters the map to a specific category. The visualization uses d3.geoNaturalEarth1 with d3.geoPath to render TopoJSON country outlines from the world-atlas dataset, d3.scaleOrdinal for coloring, and d3.zoom for panning and scaling. An SVG legend, built with custom functions, adds interactive filtering and selection feedback.

Loading thumbnail…

Color and Size Legends

Five apples of two potential fruit types sit in an SVG bowl and respond to mouseovers. A blue stroke highlights the selected fruit, while two ordinal scales map fruit type to color and size, shrinking an apple into a lemon. The fruitBowl.js component uses d3.scaleOrdinal and transition().duration(1000) to animate circle radii and positions on entry and exit. Array modifications drive the animation over five seconds.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG using D3.js, with countries filled in light green and a blue sphere for the globe. It uses the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data loaded from the `world-atlas` package. The code demonstrates basic data joining: it fetches the dataset with `json`, converts TopoJSON features using `feature`, and appends a `path` element for each country. The map fully occupies the viewport with hidden page overflow.

Loading thumbnail…

bowl of fruit - general update pattern

Five circles represent apples that are added, removed, and change type in a bowl-of-fruit animation. Using D3.js v5’s data join, enter, merge, and exit selections, the example demonstrates the general update pattern with smooth 1000-millisecond transitions. Circles on mouseover highlight their stroke via a selected fruit state, while ordinal scales map fruit type to color and radius. The code shows enter-update-exit cycles through `setTimeout` calls that modify the fruits array.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face from circles whose eyebrows shift. It shows how the data-join pattern works step by step: first, five red apples are appended as circles using `selectAll`, `data`, and `enter`, then the array is mutated and re-joined to reveal how `exit` selects and recolors removed elements. The code uses D3 v5’s `select`, `range`, and the SVG coordinate system, rendering into an inline SVG canvas. It provides a hands-on introduction to enter, update, and exit selections without any real dataset.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, showing a yellow circle with eyes, eyebrows, and a mouth. The eyebrows first move upward over two seconds and then return to their original position, creating a simple raised-eyebrow animation. The code uses D3’s `select` and `append` methods to construct SVG elements, while the mouth is drawn with the `arc` shape generator. The eyebrow motion is driven by chained `transition` calls that animate the `transform` attribute.

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, with population values scaled linearly on the x-axis and country names positioned on a band scale along the y-axis. Data is loaded from a CSV file using `d3.csv` and sourced from the United Nations World Population Prospects 2017. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG circles, with axes customized through tick formatting and removal of domain lines.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries using data from the 2018 United Nations World Population Prospects. D3 v5 renders the visualization in SVG, using `d3.scaleLinear` and `d3.scaleBand` for the axes, with axis labels and ticks customized through `d3.axisBottom` and `d3.axisLeft`. Circles represent each country, positioned by population on the x-axis and country name on the y-axis.

Loading thumbnail…

Choropleth map interactive filtering

This interactive choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. Users can zoom and pan the map, and selected countries are highlighted while unselected ones fade. The visualization uses D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, rendering with SVG. Data comes from the World Atlas TopoJSON file merged with TSV metadata.

Loading thumbnail…

Choropleth map interactive filtering

This interactive choropleth map displays world countries colored by economic classification, with a legend that filters the map by clicking a category. Users can zoom and pan the map, and selected countries are highlighted while unselected ones fade. The visualization uses D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, `d3.zoom`, and `d3.scaleOrdinal`, rendering with SVG. Data comes from the World Atlas TopoJSON file merged with TSV metadata.