Ligoon

@Ligoon·10 public vizzes

Force Directed Graph

This example combines a force-directed graph with an adjacency matrix to visualize network connections. The graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while links are drawn as SVG lines with widths proportional to edge values. Clicking a node highlights its corresponding row and column in the matrix, and both elements support zooming via `d3.zoom`. Node colors and radii encode group membership, with a legend showing the six group categories.

Nov 9, 2020

Loading thumbnail…

Force Directed Graph

This example combines a force-directed node-link diagram with an adjacency matrix to compare two visualizations of the same graph data. The SVG diagram uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while drag interactions and zoom controls are enabled via `d3.drag` and `d3.zoom`. The adjacency matrix displays link weights through cell opacity, and clicking a node or matrix cell highlights corresponding links and rows in both views. The code loads data via `d3.csv`, `d3.tsv`, and `d3.text`, rendering with D3 v6.

Nov 7, 2020

Loading thumbnail…

Force Directed Graph

This example combines a force-directed node-link diagram with an adjacency matrix to visualize the same graph data in two coordinated views. Clicking a node in the left network highlights its corresponding row and column in the matrix, and vice versa. The layout is built with d3.forceSimulation, d3.forceLink, and d3.forceCenter, while the matrix cells are rendered as SVG rects with opacity encoding edge weight. Both views support zooming and dragging via d3.zoom and d3.drag.

Nov 7, 2020

Loading thumbnail…

Force Directed Graph

This example visualizes a force-directed graph alongside an adjacency matrix, using the infect-dublin dataset. Users can click nodes in the graph or cells in the matrix to highlight connected links and corresponding rows or columns. The graph is rendered with SVG circles and lines, positioned via `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`. The matrix uses SVG rectangles with fill opacity representing link weights, and both views support zooming through `d3.zoom` and interactive dragging.

Nov 7, 2020

Loading thumbnail…

doing

A force-directed network graph and an adjacency matrix display the same node-link dataset side-by-side. The network view uses `d3.forceSimulation` with forceLink, forceManyBody, and forceCenter to position nodes, which are rendered as SVG circles colored by group and support dragging, zooming, and tooltip interactions. The matrix view encodes links as gray cells in the upper and lower triangles, with group-colored axis bands; a brush filter on the top axis selects nodes to update the matrix. Both views read from external nodes and edges files, with the matrix using `d3.scaleBand` for axis positioning.

Nov 6, 2020

Loading thumbnail…

Iris Parallel Coordinates

This visualization displays the classic Iris dataset using parallel coordinates, with each flower’s measurements (sepal length, sepal width, petal length, petal width) plotted as a polyline across four vertical axes. The lines are color-coded by species—olivedrab for setosa, cyan for versicolor, and coral for virginica—with a legend on the right, allowing for rapid comparison of how these traits cluster and overlap across the three classes. Built with D3 v3 and React, it uses d3.scale.ordinal and d3.scale.linear to map dimensions and values, while d3.svg.axis renders the labeled axes. Users can drag any axis horizontally to reorder the dimensions, and the polylines update with smooth SVG animations to reflect the new arrangement.

Oct 21, 2020

Loading thumbnail…

Iris Scatter Plot

A scatter plot of the Iris Dataset displays the relationship between selected features, with data points colored by species. Users can switch the variables plotted on the x and y axes using dropdown buttons positioned at the top right. The visualization is built with d3.v6, rendering as SVG, and loads the CSV data via d3.csv from a remote server. The code also includes a video tutorial embed, though the core functionality handles data retrieval and interactive axis selection.

Oct 5, 2020

Loading thumbnail…

Customizing Axes

This example visualizes the population of the top 10 most populous countries in 2018, using a bar chart built with circles to represent each country's population size. It demonstrates customization of D3 axes, including tick label formatting, tick line styling, and the removal of default axis domains. The visualization uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to construct the chart, with data sourced from the United Nations World Population Prospects 2017. SVG rendering is used, with styling applied through CSS.

Oct 5, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, with dropdown menus that let viewers choose which measurement attribute (sepal length, sepal width, petal length, or petal width) appears on each axis. The plot updates dynamically when a menu selection changes, using React state to trigger re-renders. The visualization is rendered as an SVG, with axes built from D3’s `scaleLinear` and `extent` functions, while the React dropdown component handles the user input. Each data point is drawn as a circle with a hover tooltip showing the x-value.

Oct 5, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, showing measurements of sepal and petal length and width for three iris species. Users can change which measurement is plotted on the x- and y-axes via dropdown selection menus. The plot uses D3 v5 APIs including `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft`, rendering circles as SVG elements with color encoding for species.

Oct 2, 2020