Skip to main content
Log in
J

JiaYu07

@JiaYu07·10 public vizzes

Loading thumbnail…

hw6

A theme river displays the moving average of house property sales prices over time, broken down by property type and bedroom count. The visualization uses a silhouette offset to stack the series symmetrically around a central axis, highlighting each category's contribution. Users can drag and drop colored blocks to reorder the legend, which triggers an immediate redraw of the stacked areas via `d3.stack` and `d3.area`. The chart is built with `d3.csv`, `moment.js` for date parsing, and SortableJS for interactive reordering.

Oct 16, 2024
Loading thumbnail…

hw5

This visualization displays stacked bar charts of World University Rankings, showing how each university’s score is composed across five categories: Teaching, Research, Citations, Industry Income, and International Outlook. Users can sort the bars by any category in ascending or descending order, and hovering over individual bars reveals the exact value via a tooltip. The chart is rendered with SVG using D3 v6, leveraging `d3.stack()` to compute the stacked series and `d3.scaleBand` and `d3.scaleLinear` for positioning. A custom legend allows highlighting a single category by dimming the others, and the data is loaded from a CSV file.

Oct 3, 2024
Loading thumbnail…

hw4

This visualization displays the Iris dataset as a brushable scatter plot matrix with four trait dimensions. Each cell shows a scatterplot of two traits, where circles are colored by species, while diagonal cells label the traits. Users can brush rectangular regions to filter points across all plots simultaneously. The code uses D3 v4 with an SVG renderer, implementing `d3.brush()` for interactive selection and `d3.scaleLinear`/`d3.scaleOrdinal` for axes and colors.

Oct 2, 2024
Loading thumbnail…

hw4

This interactive scatter plot displays the Iris flower dataset, showing how sepal and petal measurements vary across three species. Users select which measurement appears on each axis from dropdown menus, while a color legend identifies species. The visualization uses React with D3 v5 utilities, including `scaleLinear`, `scaleOrdinal`, and `extent` to map data to SVG circles. Coordinates derive from the selected CSV-loaded measurements, with axes rendered by custom React components using D3 scales.

Oct 2, 2024
Loading thumbnail…

hw3

This example presents three side-by-side correlation matrices for male, female, and infant groups, encoded as a grid of colored cells ranging from red to blue. Each matrix uses a diverging color scale, and hovering over a cell highlights its corresponding row and column labels while displaying comparison text below the charts. The visualization is rendered as SVG using D3 v5, with a legend showing the color-to-correlation mapping. Data is loaded from a remote CSV file and processed with `jz.arr.correlationMatrix` to compute correlations.

Sep 22, 2024
Loading thumbnail…

Parallel Coordinate Plots

An interactive parallel coordinate plot visualizes the Iris dataset, showing each flower as a polyline across four variable axes (sepal length/width and petal length/width) with lines colored by species class. The visualization uses D3 v7 scales and SVG paths to render the axes and lines, while React manages dropdown menus that allow reassigning each axis to a different attribute. Hovering the color legend filters the displayed lines to the selected species, using D3’s `scaleOrdinal` for colors. Data is loaded asynchronously via D3’s `csv` parser.

Sep 17, 2024
Loading thumbnail…

iris

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through dropdown menus that select the X and Y axes. The visualization displays each flower as a colored circle, with three distinct species (setosa, versicolor, virginica) distinguished by a categorical color scale. The React-based application uses D3 v5 scales (scaleLinear, scaleOrdinal) and extent functions to map data coordinates, while custom React components render the SVG axes, marks, and color legend. The dataset loads via d3.csv from a GitHub-hosted CSV file.

Sep 16, 2024
Loading thumbnail…

iris

This scatter plot visualizes the classic Iris dataset, displaying petal length against sepal width for three iris species. Each circle is colored by species using a d3.scaleOrdinal with a categorical color range, and includes a native SVG <title> tooltip. The visualization is built with React and D3 v5, using d3.scaleLinear scales with extent-based domains and d3.csv for data loading. Axis components are custom-built with React, rendering SVG tick marks and labels with formatted tick values.

Sep 9, 2024
Loading thumbnail…

iris

This example displays a scatter plot of the Palmer Penguins dataset, mapping bill length along the x-axis and flipper length along the y-axis. It uses D3's `scaleLinear` and `extent` to compute scales, then draws axes, labels, and semi-transparent circles for each penguin. The visualization reads data from the `@curran/penguins` library and relies on D3's `select` and `join` operations to update SVG elements incrementally.

Sep 9, 2024
Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using SVG elements in a bare HTML page. It draws a yellow circle with a black stroke for the head, and two smaller solid black circles for the eyes. The SVG is set to a fixed width and height, with the main circle centered using explicit coordinates. No JavaScript libraries are used; the visualization relies solely on static SVG markup with hard-coded positions and styling.

Sep 4, 2024