winniepooh520

Force Directed Graph

A force-directed graph and adjacency matrix display network data side-by-side. The graph shows nodes as colored circles connected by links, while the matrix uses cells with opacity representing edge weights. Clicking a node or matrix cell highlights the corresponding row and column in both views. The visualization uses d3.forceSimulation for layout, drag interactions, and zoom, with SVG rendering for all elements.

Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to explore network structure. The graph layout is computed using `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` forces, and users can drag nodes or zoom via `d3.zoom`. Clicking a node highlights its corresponding row and column in the matrix, and clicking a matrix cell highlights the linked edge. Node colors encode group membership, while edge thickness reflects link weight.

Force Directed Graph

A force-directed graph and an adjacency matrix side-by-side show the connections within a network dataset. Selecting a node by clicking its square in the matrix highlights that node and its incident edges in red. The graph is rendered with SVG and uses `d3.forceSimulation` for layout, with drag and zoom interactions. The matrix order can be toggled between name and degree, using `d3.zoom` and custom mouse events.

Force Directed Graph

This interactive visualization pairs a force-directed graph with an adjacency matrix, allowing users to explore relationships between nodes in a network. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. Built with D3 v6, the graph uses `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, with drag and zoom interactions enabled. The adjacency matrix is rendered as SVG rectangles, with fill opacity representing edge weights. Data comes from a custom edge list file, and node colors correspond to categorical groups.

Force Directed Graph

This example pairs a force-directed node-link diagram with an adjacency matrix to visualize network connections. The node-link view uses D3’s `forceSimulation`, `forceLink`, and `forceManyBody` to position nodes, while the matrix encodes edge weights as cell opacity. Clicking a node highlights its corresponding row and column in the matrix, and clicking a matrix cell highlights the matching link in the diagram. SVG rendering supports interactive dragging and zooming via D3’s `drag` and `zoom` behaviors.

Force Directed Graph

The visualization shows a force-directed graph alongside an adjacent linked adjacency matrix, allowing users to explore connections between nodes in a network and compare the node-link diagram with a matrix representation. Clicking a node in the graph highlights its corresponding row and column in the matrix, while clicking a matrix cell highlights the related link and updates a text label describing the relationship status. Built with d3.v6, it uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to compute node positions, plus SVG circles and lines for rendering. Data is loaded via CSV, and interaction includes dragging and zooming.

111

This example combines a force-directed graph with an adjacency matrix to explore network connections. Users can click nodes in the graph or cells in the matrix to highlight corresponding links in red. The visualization uses d3.forceSimulation for the graph layout and d3.zoom for panning and scaling. Data is rendered as SVG elements, with matrix cells colored by link weight.

node-link diagrams vs. adjacency matrix

This example compares node-link diagrams and adjacency matrices for visualizing a network, using data from the infect-dublin.edges dataset. The node-link view uses d3.forceSimulation to position 410 nodes, while an adjacency matrix rendered as SVG cells shows the same connections. Clicking a node or matrix cell highlights the corresponding row and column in the matrix. The code uses d3.csv for data loading and d3.zoom for interactive scaling on the node-link view.

node-link diagrams v.s. adjacency matrix123

This example compares node-link diagrams with adjacency matrices for visualizing network data. It displays a force-directed graph using `d3.forceSimulation`, `forceLink`, and `forceManyBody` alongside a corresponding matrix where cell opacity reflects link weights. Clicking a node in the graph or a grid cell in the matrix highlights the matching link in both views using `d3.select` and stroke styling. The data comes from a CSV of Dublin infection network edges, parsed and rendered as SVG rectangles and drag-enabled nodes.

test

This example shows a force-directed node-link diagram and its corresponding adjacency matrix side by side, using the same underlying dataset. The force simulation (`d3.forceSimulation`) positions nodes, while matrix cells encode edge weights with opacity. Users can click matrix cells to highlight linked nodes, and zooming via `d3.zoom` scales both views. The code uses D3 v6 and TopoJSON, rendering to SVG.

Force Directed Graph

This example pairs a force-directed graph with an adjacency matrix to explore node-link relationships. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while drag and zoom interactions are enabled. Clicking a node or matrix cell highlights its row and column in the matrix and emphasizes connected links. Data is loaded from a CSV edges file, and rendering uses SVG circles, lines, and rectangles.

Force Directed Graph

This example pairs a force-directed graph with an adjacency matrix. Users can click a node in the graph or a cell in the matrix to highlight all corresponding links, with the graph rendered as an SVG. The layout is computed using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter`, while the matrix cells are drawn as SVG rects with fill opacity reflecting edge weight. Both views support zoom and pan, and the graph nodes are draggable via d3-drag.

Nov 5, 2020

Parallel Coordinates on Iris data set

This parallel coordinates visualization displays the Fisher Iris dataset, with each flower's four measurements drawn as connected polylines and colored by species. D3.js v3 renders the axes and lines as SVG paths, allowing users to reorder dimensions by dragging axis labels. A legend identifies the three Iris varieties, and brushing interactions are supported through the d3.behavior.drag API.

Oct 22, 2020

Iris Parallel Coordinate Plots

This visualization displays Fisher’s Iris dataset as parallel coordinate plots, with each axis representing a floral measurement and each polyline colored by iris species (setosa, versicolor, virginica) via a categorical scale. Users can drag axis labels to reorder dimensions, which interactively repositions the paths. The D3 v3 code uses `d3.svg.line` and `d3.svg.axis` for rendering, with SVG paths for foreground and background strokes, plus `d3.behavior.drag` to enable axis reordering and smooth transition animations.

Oct 21, 2020

Parallel Coordinates

This parallel coordinates chart displays survey data on happiness and membership in various organizations (e.g., religious, labor unions, sports) across multiple countries. Gray background lines provide context, while blue foreground lines highlight each country’s profile. Built with D3 v3, it uses `d3.svg.line`, `d3.svg.axis`, and `d3.svg.brush` for interactive filtering. Users can drag axes to reorder dimensions or brush along an axis to highlight matching lines. SVG rendering with drag-and-drop animations updates the paths smoothly. Data is loaded from an external CSV file.

Oct 19, 2020

Parallel Coordinates

Oct 14, 2020

Iris analysis

This interactive scatter plot explores the Iris dataset, letting users compare measurements by selecting different features for the x- and y-axes via drop-down menus. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to render SVG circles colored by iris species, with a custom legend. A reusable `dropDownMenu` function updates the chart on selection changes, redrawing axes and points with `transition`-free updates.

Oct 5, 2020

Iris analysis

Oct 5, 2020

Iris Scatter Plot

An interactive scatter plot visualizes the classic Iris dataset, mapping sepal and petal measurements to the x and y axes. The visualization offers two dropdown menus that let users change which flower attribute is displayed on each axis. The code uses D3 v5 to load the CSV data, create linear scales, and render SVG circles that transition to new positions with a one-second animation. Points are colored by iris species (setosa, versicolor, or virginica), with a legend and axis labels rendered via `d3.axisBottom` and `d3.axisLeft`.

Oct 5, 2020

Scatter Plot with Color Legend

This scatter plot visualizes the Iris dataset, showing petal length against sepal width, with points colored by species and a legend identifying the three categories. Using React with D3 v5, the visualization employs `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and renders SVG elements through reusable components like `AxisBottom`, `AxisLeft`, `ColorLegend`, and `Marks`. The data is loaded asynchronously via `csv`, with numeric columns parsed for plotting.

Oct 4, 2020

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions across species. Dropdown menus allow users to select which numerical attribute appears on the x- and y-axes, with the chart updating immediately via React state. The visualization uses d3.scaleLinear for both axes, renders SVG circles through React components, and includes axis tick marks generated with xScale.ticks(). Data is loaded asynchronously from a CSV using d3.csv, with React hooks managing the fetching and selection state.

Oct 4, 2020

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attributes appear on the X and Y axes via dropdown menus. The visualization renders each flower as an SVG circle, with tooltips showing exact values on hover. Built with React for the interface and D3 v5 for scales, axes, and data loading through `d3.csv`, the chart updates scales and labels dynamically when menu selections change. The code uses `scaleLinear` with `extent` for domain calculation and custom React components for the axes and dropdowns.

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React and D3 v5 to render SVG circles with tooltips showing petal length values. Linear scales map the data domain to plotting positions, while custom axis components generate gridlines and tick labels. The design incorporates a clean aesthetic using the Poppins font, teal markers, and styled axis text, with axis labels rotated for the y-axis.

Menus with React

This example demonstrates a simple pet-selection menu built with React, where users choose from six predefined animal options and the current selection is logged to the console. The interface uses a native HTML `<select>` element wrapped in a reusable `Dropdown` component, which receives `options`, `selectedValue`, and an `onSelectedValueChange` callback via props. The App component manages state with the `useState` hook, initializing the selection to "hamster". ReactDOM renders the component tree, while React production builds are loaded from a CDN to support the interactive behavior.

Smiley Face Part II

A smiling face made of three SVG circles sits centered on a yellow background, with a large outline circle for the face and two smaller filled circles for eyes. The code uses React 16.9 to render a basic JSX heading, while the SVG elements are written directly in the HTML file. The visualization demonstrates static SVG rendering with explicit coordinates and stroke styling, showing a basic geometric composition rather than dynamic data-driven output.

Cars Report

This example shows a plain-text report of five cars, filtering the dataset to display only models priced under $2,000 and formatting each as a single line with year, make, model, and price. The code imports car data from a JSON string in `cars.js` and uses the `formatCar` function to structure each entry, then joins the results with newlines for output. It relies on ES6 module imports and the native `JSON.parse` API, with the final message rendered into an HTML `<pre>` element via `document.getElementById`. The data source is a hardcoded JSON array of car objects.

Oct 1, 2020

Iris Scatter Plot

This scatter plot displays the classic Iris dataset, with each point representing a flower and colored by its species (setosa, versicolor, or virginica). The visualization uses D3 v5 to render an SVG, allowing users to dynamically select which measurements (sepal or petal length/width) appear on the x- and y-axes via dropdown menus. The code builds linear scales with `d3.scaleLinear`, generates axes with `d3.axisBottom` and `d3.axisLeft`, and adds a color legend using `d3.legendColor`. Circles are styled with an ordinal color scale, and grid lines are rendered through tick sizes.

Oct 1, 2020