Skip to main content
Log in
P

peter6179

@peter6179·8 public vizzes

Loading thumbnail…

Fork of Matrix

This visualization combines a force-directed graph with an adjacency matrix to explore the Auto MPG dataset from the UCI Machine Learning Repository. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes representing cars, while the matrix displays pairwise connections with colored squares. Clicking a node highlights its corresponding row and column in the matrix, and clicking a matrix cell highlights the connected nodes. The code uses `d3.drag` for interaction, `d3.zoom` for panning and scaling, and the `reorder.js` library for matrix layout, with SVG rendering.

Jan 28, 2021
Loading thumbnail…

HW6_0660035

This example combines a force-directed node-link diagram with an adjacency matrix to explore network connectivity. Clicking a node in either view highlights its corresponding row and column in the matrix, while the node diagram supports dragging and zooming via `d3.zoom`. The SVG renders with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, and the matrix uses `rect` elements with opacity encoding edge presence. Node size encodes group membership, and the data is loaded from an external source using `d3.tsv` or `d3.csv`.

Jan 28, 2021
Loading thumbnail…

Parallel Coordinate (0660035)

This visualization displays the Iris dataset as a parallel coordinate plot, with each flower sample represented by a colored line connecting four numeric measurements (sepal length/width and petal length/width) across vertical axes. The three iris species are distinguished by line color: setosa appears green, versicolor purple, and virginica red. The code uses d3.scalePoint for axis positioning and d3.scaleLinear for each dimension’s value mapping, rendering lines as SVG paths with semi-transparent strokes. Axis labels are generated using d3.axisLeft, while the data loads from a CSV file via d3.csv.

Jan 12, 2021
Loading thumbnail…

Fork of Parallel Coordinate (0660035)

This fork of a parallel coordinate plot visualizes the Iris dataset, coloring each of the 150 sample paths by species (setosa, versicolor, or virginica) and displaying four measured attributes (sepal and petal length and width) on vertical axes. The code uses d3.js v5’s `scaleLinear` for the y-axes, a custom point scale for x-axis positioning, and draws semi-transparent SVG paths with per-species stroke colors. Axes are labeled directly on the chart, and the static rendering relies on raw SVG elements rather than animation.

Jan 12, 2021
Loading thumbnail…

Parallel Corrdinate Plots (Iris data)

This parallel coordinate plot displays the four measurements of the Iris dataset (sepal length, sepal width, petal length, and petal width) across a single chart, with each flower’s values connected by a polyline. The lines are colored by the species using `scaleOrdinal` and `schemeCategory10`. Users can drag the vertical axes horizontally to reorder the dimensions, updating the paths and axis positions via `d3.drag` and `d3.scalePoint`. The chart renders to SVG using D3 v5, with axes built by `axisLeft` and data loaded from a CSV.

Jan 12, 2021
Loading thumbnail…

Force Directed Graph

This example presents a node-link force-directed graph alongside an adjacency matrix, allowing comparison between the two visual representations. The graph uses d3.forceSimulation, d3.forceLink, and d3.forceManyBody to position nodes and links, while the matrix renders weighted connections as SVG rectangles. Clicking a node or matrix cell highlights corresponding rows, columns, and links in red, with the graph supporting drag-and-drop and zooming via d3.drag and d3.zoom.

Nov 8, 2020
Loading thumbnail…

Untitled

An interactive scatter plot of the classic Iris dataset lets viewers compare any two of the four measured features by selecting them from dropdown menus. Each of the 150 flowers is drawn as a colored circle—red, green, or blue—according to its species, with a legend to the right. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes and gridlines, while menus are built with D3’s data-join pattern. The SVG is redrawn dynamically whenever the user changes the x- or y-axis selection.

Oct 5, 2020
Loading thumbnail…

Iris analysis

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus let viewers select which measurements appear on the x- and y-axes, updating the plot dynamically. The SVG rendering uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, with species colored in orange, teal, and purple. The dropDownMenu component, built with d3-selection, binds options to each select element. Axis labels, gridlines, and a color legend convey measurement units and categorical distinctions.

Oct 5, 2020