XinYaoHuang

@XinYaoHuang·6 public vizzes

Untitled

This visualization displays a reordered adjacency matrix of social network data from the infect-dublin.edges file. The square grid encodes graph edges as colored cells, with node degree categorized into five groups via colors. Users can click cells to select edges, which are highlighted in red. The code uses d3.csv to load the data and reorder.js functions like `mat2graph`, `barycenter_order`, and `permute` to optimize node ordering, then renders the matrix with SVG rectangles.

Nov 25, 2020

Loading thumbnail…

import reorder.js

This example demonstrates how the `reorder.js` library's `barycenter_order` algorithm reorders the rows and columns of an adjacency matrix to reveal clustered structure in a network. It first converts a small binary matrix into a graph via `mat2graph`, then applies the permutation to the transposed matrix. The code also loads edge-list data from `infect-dublin.edges`, suggesting the technique scales to real-world network datasets.

Nov 24, 2020

Loading thumbnail…

309551125

A parallel coordinate plot of the Iris dataset displays 150 flowers across four draggable axes, with each species colored red, green, or blue. The visualization uses `d3.csv` to load data, `d3.scaleLinear` for coordinate mapping, and SVG elements (`circle`, `line`) for rendering. Users can reorder axes via dropdown menus, which trigger the `switch_coordinate` function to update axis labels and redraw the plot.

Oct 23, 2020

Loading thumbnail…

309551125

This visualization displays the classic Iris flower dataset as an interactive scatter plot, with each point representing one flower and colored red, green, or blue by species. Users can dynamically select any combination of the four measurements (sepal length/width, petal length/width) for the x and y axes using dropdown menus. The code uses d3.csv to load the data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render the SVG axes and circles, updating the view on selection change.

Oct 23, 2020

Loading thumbnail…

Iris analysis

This interactive scatter plot allows users to explore the classic Iris dataset by selecting which sepal or petal measurement appears on the X and Y axes via dropdown menus. Each of the 150 flowers appears as a semi-transparent circle, colored by species (setosa, versicolor, or virginica) with a legend. The visualization uses d3.csv for data loading, d3.scaleLinear for the axes, d3.scaleOrdinal for colors, and d3.select to rebuild the SVG on each menu change.

Oct 6, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create static vector graphics. It shows circles and rectangles with distinct fill colors, including a group with a light blue fill and black stroke, alongside lines and a polyline path. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with scaling and translation transforms applied. CSS classes control stroke properties, such as color, width, line join, and cap. No JavaScript libraries or data sources are used; everything is defined directly in HTML and an external stylesheet.

Sep 20, 2020