kan qiu

@kqiu10·7 public vizzes

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries, with a y-axis showing country names and an x-axis with tick marks and labels. The chart is built using React and D3 v5, with data loaded from the United Nations World Population Prospects 2019 dataset via `d3.csv`. React components render SVG elements for bars and axes, while D3’s `scaleBand` and `scaleLinear` handle the positioning and scaling of the visual encodings.

Aug 30, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes temperature data as a scatter plot, with each point representing a measurement over time. The visualization uses the Vega-Lite API to define the chart declaratively, with `vl.markCircle` and `vl.x().fieldT('timestamp')` mapping time to the x-axis and temperature to the y-axis. Tooltips display the name of each data point via `vl.tooltip().fieldN('name')`. The data comes from a CSV file loaded with `d3.csv` from a GitHub Gist, and the chart is rendered using Vega, Vega-Lite, and the Vega-Lite API, with custom styling applied through a config object.

Aug 30, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across an SVG canvas, with its position updating in real time as the pointer moves. The visualization uses React state and a `handleMouseMove` callback to track the cursor’s clientX and clientY coordinates, rendering the circle via SVG circle elements. Both React and D3 v5 are loaded from CDNs, with ReactDOM managing the component lifecycle. The circle starts at the canvas center and responds immediately to every mouse movement, demonstrating a simple interactive pattern built with the React hooks `useState` and `useCallback`.

Aug 30, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face with black-outlined circular eyes and a curved mouth, rendered as an SVG inside a React application. The face is composed of modular React components, with a yellow background circle, two eye circles, and a mouth path generated using the d3.arc API. The d3 arc function creates the mouth’s crescent shape by specifying inner and outer radii and start and end angles, while the FaceContainer component positions the entire group using an SVG transform. The code relies on D3 v7 for arc generation and React for component-based structuring.

Aug 30, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example builds a simple smiley face from three SVG circles: a yellow head with a black outline and two smaller circles for eyes. The code renders the shapes directly within the SVG markup, specifying center coordinates, radii, and stroke styling for each circle. The React components in `index.js` are declared but do not mount the face, which is instead hard-coded in the HTML file. The example relies on React for the component structure and SVG elements for the visual output, with a linked video tutorial providing further context.

Aug 29, 2021

Loading thumbnail…

Fork of Hello HTML

A yellow circle with a black outline fills the center of a 960×500 SVG canvas, its face formed by two smaller black-outlined circles as eyes. This minimal visualization renders directly through inline SVG markup, using no JavaScript libraries. The page is a simple HTML document with embedded CSS that removes margins and hides overflow, creating a clean, full-viewport presentation. Nothing animates or responds to interaction; it demonstrates the basic structure of an SVG drawing within an HTML page.

Aug 29, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple yellow smiley face drawn as three SVG circles: a large outlined face and two smaller eyes. The code uses static SVG elements with explicit coordinates and stroke properties rather than a data-driven approach. It demonstrates basic SVG circle rendering, with the face positioned at the center of a 960 by 500 viewport and eyes offset horizontally. The rendering relies entirely on inline SVG markup, with no JavaScript libraries or interactions, serving as an introductory step in a face-building tutorial series.

Aug 29, 2021