yixinxu2020

@yixinxu2020·8 public vizzes

Force Directed Graph

This example pairs a force-directed graph with an adjacency matrix to explore node-link diagrams and network connectivity. The graph uses D3’s `d3.forceSimulation` and `d3.forceLink` to position nodes, while the matrix encodes edge weights as cell opacity. Clicking a node or matrix cell highlights the corresponding row, column, and connected links. The code also enables drag interactions via `d3.drag` and zooming with `d3.zoom`, rendering everything as SVG.

Nov 9, 2020

Loading thumbnail…

node_link_diagrams_and_adjacency_matrix

This example combines a node-link force-directed graph with an adjacency matrix to explore network relationships. The left SVG renders a force-directed layout using `d3.forceSimulation` and `forceLink`, with nodes colored by group and sized by degree, supporting drag and zoom interactions. The right SVG displays the adjacency matrix as a grid of cells, where each cell’s fill encodes connection strength. Clicking a node in the graph or a matrix cell highlights the corresponding row and column in red, while also emphasizing linked edges, allowing users to correlate structural positions across both representations. The code uses D3 v6 with SVG rendering.

Nov 9, 2020

Loading thumbnail…

Force Directed Graph

A force-directed graph shows the network structure of nodes and links, with each node colored by group and links weighted by value. Clicking a node highlights all connected links in red and simultaneously highlights the corresponding row and column in an adjacent adjacency matrix, where cell opacity reflects link weight. The implementation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, renders nodes as SVG circles with drag and zoom support, and loads data from a `.edges` file.

Nov 5, 2020

Loading thumbnail…

Parallel Coordinates on Iris data set

This example visualizes the Iris data set using parallel coordinates, with each flower variety rendered in a distinct color to show its attribute patterns. The view allows users to drag axis labels to reorder dimensions and rearrange the corresponding polylines. The implementation uses D3 v3 with SVG rendering, building ordinal and linear scales for axes and color, and applying `d3.behavior.drag` for interaction. Background lines provide context, while an animated transition repositions axes and paths after dragging.

Oct 23, 2020

Loading thumbnail…

0616027_hw2

This interactive parallel coordinates plot visualizes the Iris dataset, with each polyline representing a flower sample and colored by species (setosa, versicolor, virginica). The chart shows four dimensions—sepal length, sepal width, petal length, and petal width—on vertical axes. Users can drag axes to reorder dimensions and brush along any axis to filter which lines remain visible. Built with D3 v3 in a React framework, it uses `d3.svg.axis`, `d3.svg.line`, `d3.behavior.drag`, and `d3.svg.brush` to enable these interactions, rendering polylines as SVG paths with animated transitions during axis dragging.

Oct 18, 2020

Loading thumbnail…

Rendering Data with D3 and React

This example demonstrates how D3 and React work together to render a color wheel from a CSV dataset of CSS color names and hex values. The code loads data asynchronously with `d3.csv`, stores it in React state via the `useState` and `useEffect` hooks, and then visualizes it using `d3.pie` and `d3.arc` to generate SVG paths, each filled with its corresponding `RGB hex value` from the data.

Oct 18, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing how flower measurements correlate by plotting each specimen as a translucent red circle. Users can dynamically select which measurement—sepal or petal length or width—appears on the X and Y axes via dropdown menus. The visualization is built with D3.js v5, using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG rendering, with a smooth 1000-millisecond transition animation (`transition().duration(1000)`) that moves circles to their new positions when axes change.

Oct 16, 2020

Loading thumbnail…

Iris Scatter Plot

This example shows an interactive scatter plot of the Iris dataset, with dropdown menus to select which flower measurements appear on the x- and y-axes. Points are colored by species and transition into place with a staggered animation. Built with D3 v5, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and a custom dropdown menu component. A legend and axis selection panel are rendered to the right of the plot.

Oct 6, 2020