P

Peiyang Li

@peiyangli0210·33 public vizzes

Loading thumbnail…

Chess for Newbies

Chess for Newbies visualizes common chess openings and traps from the Lichess database across different player rating levels. An interactive sunburst chart displays the frequency of move sequences, with larger arc regions indicating more popular moves, and users can explore how strategies differ between beginners and elite players. The visualization pairs the sunburst with a chessboard, allowing users to play moves and see matching patterns highlighted in the chart. Built with D3.js, it uses hierarchical data and transitions to update the visualization based on user selections.

Loading thumbnail…

With chessboard

This example visualizes the first K steps of chess games from a CSV dataset, showing the frequency of different move sequences. It features an interactive chessboard where users can drag and drop pieces, with legal moves highlighted in grey and invalid moves snapping back. The board is implemented using the chessboard.js library combined with the chess.js engine for move validation, while the underlying React framework handles the data processing and visualization of move frequencies.

Loading thumbnail…

reusable D3 Scatter Plot

This visualization presents a sunburst chart of the first K steps in chess games, using a sequence of page types (account, home, product, etc.) as hierarchical segments. The chart is built with D3.js within a React framework, leveraging the `d3` library to render the nested ring structure. Data is sourced from a CSV file containing step sequences and their counts, which drives the size of each arc. The layout and interactivity are handled through D3’s hierarchical layout functions, allowing users to explore the frequency of different navigation paths.

Loading thumbnail…

Where are you moving next?

This interactive map visualizes migration patterns across U.S. cities, showing net population flow as red and blue bubbles and directional flows as curved lines between metros. Users can toggle between showing outgoers and incomers, slide through quarterly time periods from 2016 to 2021, and click cities to see their top origins or destinations. Built with d3.geoPath for the U.S. map, d3.scaleLinear for bubble sizing, and animated SVG transitions, it uses Redfin migration data to reveal how the pandemic shifted movement between locations.

Loading thumbnail…

map us 1

This map of the United States displays cities as red circles, overlaid on a gray state map. It uses D3’s `geoAlbersUsa` projection and `geoPath` to render the states, and plots city coordinates from `citydata.csv`. Clicking a city draws black lines to all other cities, with line thickness proportional to the clicked city’s `flow` value, and hover transitions enlarge and recolor the selected circle.

Loading thumbnail…

slides bar

A choropleth map of the United States displays county-level PM2.5 air pollution data across years, with a vertical slider and play button to animate through time from 2000 to 2021. Built with React and D3 v5, the visualization uses d3.geoPath with a geoIdentity projection to render county boundaries and a sequential YlGnBu color scale to encode particulate concentrations, allowing users to observe spatial and temporal pollution trends.

Loading thumbnail…

Fork of World Map

This visualization shows a U.S. states map rendered as green polygons with black outlines against a light blue spherical background. It uses d3.geoAlbersUsa for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded from the us-atlas package. The code converts TopoJSON to GeoJSON using topojson.feature before binding the state features to SVG paths, while the sphere element is drawn separately using a GeoJSON Sphere object.

Loading thumbnail…

flow chart 1

This flow chart visualizes the early-stage spread of a virus between global locations, with arcs drawn between paired longitude and latitude coordinates from a CSV file. The map uses a Mercator projection and displays the geographic network of transmissions, highlighting China’s provinces as primary carriers to other regions. Built with D3.js v4, the visualization renders SVG paths for both the world map and the connection lines, using `d3.geoMercator`, `d3.geoPath`, and `d3.csv` to load and project the data.

Loading thumbnail…

Fork of 2021 Human Development Index

This visualization displays a world map of the 2021 Human Development Index (HDI) values, coloring each country according to its score using a green sequential palette. It implements zoom and pan interactions with d3.zoom and shows a color legend with ordinal scales to interpret HDI ranges. The map uses d3.geoPath with a geoNaturalEarth1 projection, loads geographic data from topojson-client, and merges HDI values from the internet_users.csv dataset, with a tooltip showing each country’s score on hover.

Loading thumbnail…

Fork of World_Map_ICE_8

This visualization presents a world map using the Natural Earth projection, with landmasses filled in a soft purple color and country boundaries highlighted in red. Blue graticule lines and a white sphere outline provide geographic context. The map renders as SVG via React, using D3 v5 utilities like `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for projection and path generation. Country borders are drawn as interiors using TopoJSON mesh data fetched from the world-atlas dataset, loaded with `d3.json` in a React hook.

Loading thumbnail…

Fork of Points on a Map

This visualization displays a world map with city points scaled by population using a square-root scale, rendered using D3.js geo projections and React. The map shows land masses, graticules, and a sphere outline created with the `geoNaturalEarth1` projection and `geoPath` from D3. City data is loaded from a CSV via `d3.csv`, while world atlas topology is fetched and processed with `topojson`’s `feature` and `mesh` functions. The visualization uses SVG circles with a gold fill at reduced opacity to represent city populations, all set against a dark radial-gradient background.

Loading thumbnail…

Scatter Plot (animated, menu including species)

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between measurements of sepal and petal dimensions. Two dropdown menus, built with a custom reusable `menu` component, let viewers dynamically select which quantitative or categorical column corresponds to the X and Y axes. The visualization uses D3.js v7, with `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` for axes. SVG circle elements transition smoothly to new positions over one-second intervals when the selected dimensions change, creating an animated exploration of the data.

Loading thumbnail…

Fork of Grid Menus Animated Species Stratified Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between flower measurements through dropdown menus for x, y, and species selection. The plot renders SVG circles with animated transitions, where points grow from radius zero upon appearance and smoothly reposition when axes change. Selecting a specific species filters the display to show only those data points in salmon while other selections show all species in blue. The implementation uses D3 v6's `selectAll().join()` pattern for efficient SVG element updates, `transition()` for animations, and modular chart and menu components built with `dispatch` events.

Loading thumbnail…

Fork of Animated Scatter Plot with Menus_testing_dispatch

This interactive scatter plot visualizes the Iris dataset, allowing users to switch the x- and y-axis columns and scale types (linear, band, square, or power) via dropdown menus. The D3 v6 chart animates circle positions with `transition()` as axes update, and clicking an axis label toggles its color between blue and black. The scatterPlot module uses D3 scales like `scaleLinear` and `scaleBand` with SVG rendering.

Loading thumbnail…

Reusable D3 Scatter Plot (animated, menu)

This interactive scatter plot visualizes the Iris dataset, letting users dynamically select which flower measurements appear on the X and Y axes through two dropdown menus. Built with React and D3 v7, the visualization uses reusable chart components and SVG rendering to display data points as animated circles that smoothly transition between positions when axis selections change. The scatter plot employs d3.scaleLinear for coordinate mapping, d3.axisLeft and d3.axisBottom for scales, and d3.transition with a 1000ms duration to animate circle movements, while d3.csv loads the dataset from a remote URL.

Loading thumbnail…

Fork of Fork of reusable D3 Scatter Plot (animated 2)

This animated scatter plot displays the Iris flower dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis every six seconds. Built with React and D3 v7, it uses a reusable `scatterPlot` module with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Circles transition smoothly via `transition().duration(1000)` with staggered delays, while axes animate concurrently. Data loads from a CSV via `d3.csv` and renders as SVG with D3’s data join and enter/update/exit pattern.

Loading thumbnail…

Fork of reusable D3 Scatter Plot (animated)

This animated scatter plot visualizes the Iris dataset, cycling through four measured attributes (petal and sepal length and width) as the x-axis variable every six seconds. The D3.js implementation uses a reusable scatter plot module with smooth transitions between states, animating circle positions and axis updates. It leverages scaleLinear, extent, axisLeft, axisBottom, and transition APIs from D3 v7. The visualization renders as an SVG in a React environment, loading CSV data asynchronously and mapping each flower variety as a point.

Loading thumbnail…

reusable D3 Scatter Plot (dynamic)

This interactive scatter plot visualizes the Iris dataset, dynamically cycling through four different attribute pairs every two seconds to reveal correlations between petal and sepal measurements. Built with React and D3.js, the visualization uses `scaleLinear` for axis scaling and `axisLeft`/`axisBottom` for tick marks, while SVG circles represent data points with animated transitions between views. The chart is fully reusable through a custom `scatterPlot` function that accepts configurable width, height, margin, and radius parameters, demonstrating a flexible pattern for building dynamic D3 visualizations.

Loading thumbnail…

Reusable D3 Scatter Plot (Different Plot shape)

This example demonstrates a reusable D3 scatter plot that visualizes the Iris dataset, with different symbol shapes representing different species. The plot maps petal length to the x-axis and sepal length to the y-axis, using axes generated with d3.axisLeft and d3.axisBottom. The reusable component pattern, built with a custom scatterPlot() factory function, employs d3.scaleLinear for positioning, d3.scaleOrdinal with d3.symbols for shape encoding, and d3.symbol to generate SVG paths. Data is loaded asynchronously via d3.csv from a remote GitHub gist.

Loading thumbnail…

reusable D3 Scatter Plot

This interactive scatter plot visualizes Fisher's Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization is built as a reusable D3 module, where the scatter plot is rendered as an SVG with circles representing individual data points. It uses D3's `scaleLinear()`, `extent()`, `axisLeft()`, and `axisBottom()` for scaling and axis generation, with data fetched from a remote CSV file. The plot dynamically sizes to the viewport and includes hover tooltips showing the coordinate values for each point.

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris flower dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. Circles are rendered in SVG, with each point labeled by its exact coordinate values via a title tooltip. Built with D3 v7 and React, the visualization uses `d3.csv` to load data, `scaleLinear` for coordinate mapping, and `extent` to compute domains. Axes are generated through `axisLeft` and `axisBottom` functions, while the page adapts to the full browser viewport by using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization loads data from a CSV file hosted on GitHub using D3’s `csv` function, parses numeric columns, and renders circles in an SVG element. D3’s `scaleLinear` and `extent` compute the domain and range for both axes, while `select` and `join` create the circle marks. The chart fills the browser window.

Loading thumbnail…

JS in HTML

This example demonstrates a minimal HTML page that combines CSS, JavaScript, and D3 v7. It displays a large centered text message, “Hello SVG!”, styled via a `.message` class. The page loads D3 from a CDN and runs `index.js`, which logs a string concatenated with a value imported from `sth.js`. The rendering uses plain HTML and CSS, with no SVG elements actively rendered, as the provided SVG circle is commented out.

Loading thumbnail…

Fork of Sine Wave Circles

This example visualizes a sine wave as a row of 30 circles that oscillate vertically in sequence, creating an undulating wave pattern across a 960-by-500 SVG canvas. Each circle’s y-position is determined by a sine function whose phase shifts with time and varies with the circle’s index, producing a smooth, continuous wave animation. The code uses D3 v7’s `range` and `timer` APIs to drive the animation, updating circle positions via selection attributes. It is a direct port of a p5.js sine wave example, implemented with SVG elements and vanilla JavaScript.

Loading thumbnail…

Sol Lewwit D3 symbol

This example generates a full-screen SVG pattern inspired by Sol LeWitt, using two sets of parallel stripes—horizontal and vertical—that intersect to create a grid. A mask with a circular symbol cuts a ring shape through the pattern, while a second, inverted mask reveals a contrasting ring effect. Built with React and D3.js, the code uses `d3.select`, `d3.range`, and `d3.symbol` to construct the marks and masks, with dimensions tied to `window.innerWidth` and `window.innerHeight`. The rendering relies entirely on SVG elements and attributes.

Loading thumbnail…

Fork of Fork of Sol Lewwit D3 1

This visualization uses D3 version 7.8.4 with level selection and join operations to generate a grid of horizontal and vertical rectangles. The SVG canvas spans the browser window, and two masks create overlapping circular regions. In the first mask, a white circle over a black rectangle reveals horizontal bars, while the second mask uses inverted colors to expose vertical bars. The resulting composition shows intersecting striped patterns emerging from the circular cutouts.

Loading thumbnail…

Fork of Sol Lewwit D3

This visualization reinterprets Sol LeWitt’s geometric wall drawings using a grid of horizontal and vertical stripes. It renders 100 SVG rectangles in each direction across the full browser window, with the intersecting lines partially masked by a central circle. Built with React and D3 v7, it uses `select`, `range`, and `.join()` to generate the marks, while two SVG masks create the contrasting circular reveal. The code dynamically sizes the artwork to the viewport using `window.innerWidth` and `window.innerHeight`.

Loading thumbnail…

Sol Lewwit D3

This example recreates Sol LeWitt’s wall drawing aesthetic using D3.js and SVG. Two sets of 100 horizontal and vertical stripes are rendered across the full viewport, each configured with a mask that reveals a circular region in the center. The circle masks create an interplay between the two orientations, highlighting where horizontal lines show through one mask and vertical lines through the other. The code uses `select`, `range`, and data joins from D3 v7, with SVG masks and rectangles composing the visual.

Loading thumbnail…

Fork of Fork of Sol Lewwit 3

This interactive SVG artwork creates a grid of vertical and horizontal lines, with a circular void in the center formed by masking. The visualization uses SVG masks (`circle-mask` and `circle-mask2`) to show vertical lines inside a white circle and horizontal lines outside it, resulting in a dynamic, layered composition. Built with vanilla JavaScript using `document.createElementNS`, it generates 100 rectangles per axis, with the central circle positioned at the viewport center. The design adapts to the browser window size, demonstrating a creative use of SVG masking for generative art.

Loading thumbnail…

Fork of Sol Lewwit 2

This interactive visualization renders a grid of horizontal rectangles, masked by a central circle, creating a striking geometric pattern. The SVG elements are dynamically generated using the Document Object Model (DOM) API, with a mask defined by a `<circle>` element. The visualization adapts to the browser window size by using `window.innerWidth` and `window.innerHeight`. One hundred rectangles, each 10 pixels high, are drawn sequentially down the screen, with the circle mask revealing a circular region of the striped pattern against a plain background.

Loading thumbnail…

Sol Lewwit

This example renders a minimalist generative composition inspired by Sol LeWitt’s geometric wall drawings. It creates 100 vertical rectangles of fixed width, evenly spaced across the viewport, with each rectangle’s height matching the full window height. The visualization dynamically adapts to the browser’s current dimensions using `window.innerWidth` and `window.innerHeight`. It constructs a raw SVG document via the Document Object Model (DOM) API, specifically `document.createElementNS` and `setAttribute`, without using any external libraries or frameworks.

Loading thumbnail…

Fork of pseudo dv

This example displays a minimalist SVG composition: five dark circles scattered across a white rectangular canvas. The circles are positioned at fixed coordinates, creating a sparse, balanced visual layout. The visualization relies on raw SVG elements—`rect` and `circle`—directly embedded in an HTML page, with styling controlled by CSS. No JavaScript libraries or data-binding frameworks are used, making it a static, declarative rendering rather than an interactive or data-driven visualization.

Loading thumbnail…

SVG

This example displays the text "Hello SVG!" centered on the page, accompanied by a single circle rendered within an SVG container. It demonstrates the fundamental use of SVG elements and Cascading Style Sheets (CSS) to structure and style a simple graphic. The implementation is a bare HTML page that uses inline CSS for typography and layout, with the circle’s position and radius defined through SVG attributes. The example serves as a minimal starter for creating vector graphics on the web using standard markup.