nomiaro

@nomiaro·6 public vizzes

Fork of Streamgraph of covid-19

This fork of a COVID-19 streamgraph visualizes daily new cases across five continents using a silhouette-offset stacked area chart, drawing on data from `data_daily.csv` and `data_monthly.csv`. Built with D3 v2 in a React framework, the SVG animation renders layers with cardinal interpolation and a custom time-based x-axis. Hover interactions adjust layer opacity, display tooltips with region and date details, and apply stroke highlighting via the `mouseover` and `mousemove` events. Color schemes (`orange`, `pink`, `blue`) are selectable through a chart function, while month-level trends appear in a secondary D3 v4 area chart.

Jan 12, 2021

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares node-link diagrams with adjacency matrices by displaying an interactive heatmap of a network. Users can reorder the matrix rows and columns using buttons that trigger random permutations, restore the initial ordering, or apply an optimal leaf order algorithm to cluster related nodes. The visualization is built with D3 v6, using SVG for rendering and transitions to animate the reordering process, while the reorder.js library handles permutation calculations.

Nov 25, 2020

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example contrasts node-link diagrams with adjacency matrices for network data. The visualization loads a real-world edge list from a GitHub-hosted CSV file, parsing connections to build a binary adjacency matrix. Each matrix cell is rendered as a rectangle, with opacity indicating the presence of a link. The visualization highlights paths and edges, and clicking a cell updates a text label to confirm or deny a connection between nodes. The code leverages d3.csv for data loading, d3.select and d3.append for SVG construction, and d3.forceSimulation for the node-link layout.

Nov 25, 2020

Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares two visualization methods for the same network data: a node-link diagram rendered with `d3.forceSimulation` and an adjacency matrix. Node circles are colored by group and support drag, while clicking either a node or a matrix cell highlights its corresponding row and column in the matrix and dims other links. The matrix uses `d3`-appended SVG rects with fill opacity based on edge weight, and zooming is enabled via `d3.zoom`. The data appears to describe a Dublin contact network with 410 nodes.

Nov 25, 2020

Loading thumbnail…

Iris Scatter Plot-0616053

This interactive scatter plot explores the classic Iris flower dataset, showing measurements of sepal and petal dimensions. It visualizes data points for three Iris species, color-coded to distinguish between setosa, versicolor, and virginica. Users can select which feature to plot on the x- and y-axes using dropdown menus. The visualization is built with d3.v5, using d3.csv to load data, d3.scaleLinear for axis scaling, and d3.axisBottom and d3.axisLeft for chart axes. The svg renders semi-transparent circles, with a legend indicating species colors.

Nov 7, 2020

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing four floral measurements for three species. Each semi-transparent polyline represents one sample, colored by species (orange for setosa, teal for versicolor, purple for virginica), with draggable axes that reorder via `d3.drag` and animated transitions. A dropdown toggles the y-axis scale between a fixed union range (0–8) and per-axis extents computed with `d3.extent`. The SVG renders axes via `d3.axisLeft` and lines via `d3.line`, with species colors mapped through a custom function.

Nov 7, 2020