Giorgi Xiaoyu Zhang

@xzhangyu·9 public vizzes

Experiment with SVG1

This example presents a stylized SVG map of the world with country labels positioned as circles, using static geographic coordinates rather than a geographic projection library. The visualization displays countries like the U.S., Brazil, Russia, and Canada, with varying circle sizes representing relative importance. Built with React and rendered via inline SVG, the code defines CSS classes for styling, including a hover effect that changes circle colors from red to green, and uses a radial gradient for the background. The map images and labels are embedded directly in the HTML, with no external data sources or interactive JavaScript libraries beyond the browser's native SVG support.

Dec 31, 2022

Loading thumbnail…

Untitled

This example is a minimal React starter page that renders a blank visualization canvas using CSS styling. It demonstrates the foundational setup for building interactive data visualizations with React, and includes a reference to a more complex React starter on VizHub. The code uses HTML, CSS, and JavaScript, highlighting the basic structure needed to initialize a React-based project for future chart or graph development.

Dec 31, 2022

Loading thumbnail…

Fork of Sine function-a little animation

This example animates a fork of a sine function, where a set of circles transitions vertically to follow a sine wave’s values. The visualization uses D3 v6 to render SVG circles, with each circle’s vertical position determined by the sine of its index, scaled by a pixel factor. The animation applies a 3-second transition to the `cy` attribute, while randomizing each circle’s radius and fill color using `Math.random()`. The code leverages D3’s `select`, `range`, and `transition` APIs to build and animate the chart on a full-window SVG canvas.

Dec 30, 2022

Loading thumbnail…

D3 Selection Exploration

A set of 15 circles animates in a sine-wave pattern across the browser window, with each circle's vertical position and radius oscillating over time. The code uses D3 v6's `select`, `range`, and `data` join methods to bind an array of computed objects to SVG circle elements. A `setInterval` at roughly 60 frames per second updates the data and re-renders via the `.join('circle')` pattern, which handles enter, update, and exit states seamlessly.

Dec 30, 2022

Loading thumbnail…

D3 Selection Exploration （Cleaner Version)

A clean demonstration of D3 data joins and update patterns, this example animates 15 circles moving vertically with oscillating radii. The visualization separates data generation from rendering: `makeData` computes positions using trigonometric functions, while `vizData` applies the enter-update-exit pattern via `selection.join()`. Built with React and D3 v6, it uses `select`, `range`, and `setInterval` to drive a 60fps animation, rendering circles as SVG elements with dynamic `cx`, `cy`, and `r` attributes.

Dec 30, 2022

Loading thumbnail…

D3 first practice

This example demonstrates a minimal setup for using D3 within a React project. It logs two arrays to the console: one generated by a custom `simulatedRange` function that manually builds an array of numbers, and another produced by D3's `range(10)` utility. The visualization itself is a bare HTML page with no visual output, highlighting the console-based comparison between a hand-rolled loop and D3's built-in `range` API from the `d3` library.

Dec 29, 2022

Loading thumbnail…

Psuedo Visualisations

This example presents a set of four gray rectangles in descending heights, arranged as a pseudo bar chart. The letter “A” hovers above, and a single rectangle transitions its fill and stroke on hover. Built with React, it renders using SVG, with CSS transitions and the Share Tech Mono font. The code directly uses SVG primitives like `rect` and `text` without external visualization libraries.

Dec 27, 2022

Loading thumbnail…

SVG Animations using CSS transitions

A single red rectangle with a thick black stroke sits on a blank SVG canvas. The example demonstrates CSS transitions on SVG elements, where hovering over the rectangle smoothly animates its fill color to green and expands its stroke width over three seconds. This is achieved using the CSS `transition` property on the rect’s `fill` and `stroke-width` attributes, applied directly within an HTML page. No JavaScript libraries are used; the interaction relies purely on CSS hover states and SVG styling.

Dec 26, 2022

Loading thumbnail…

JapaneseSchoolBus

This piece charts the visual composition of a Japanese school bus graphic. It uses SVG elements, including rectangles and styled text, to render the vehicle and its text. The design is constructed with React and likely generated from the VizHub platform, displaying the bus against a white background with specific color fills. The code defines letter-spacing and font families for the text, while the shapes are created using SVG paths and polygons.

Dec 26, 2022