Skip to main content
Log in
I

imsohandsome123

@imsohandsome123·13 public vizzes

Loading thumbnail…

Flight Map

This visualization displays flight routes between continents on a world map, with the thickness of each line representing the volume of traffic for a selected month. A slider allows viewers to cycle through twelve months of data, which is stored in CSV files. The d3.geoMercator projection and d3.geoPath are used to render the map and the great-circle paths linking regions, while a transition animation (d3.transition) updates the view. Hovering over a route reveals its exact numeric value in a tooltip.

Jan 6, 2022
Loading thumbnail…

Fork of Streamgraph of covid-19

A streamgraph visualizes COVID-19 case counts across five continents from January to December 2020, using a silhouette offset layout. The SVG rendering, built with D3 v2 in a React framework, loads data from CSV files for daily and monthly aggregation. Hovering a layer fades others and displays a tooltip with the region, case value, and date. The implementation relies on D3's `layout.stack`, `svg.area`, and time scale APIs, with color encoding based on a sequential orange palette.

Jan 13, 2021
Loading thumbnail…

Fork of Streamgraph of covid-19

This streamgraph visualizes the spread of COVID-19 cases across five continents (Africa, Asia, Europe, America, Oceania) using an animated time series. The stacked area chart, rendered as SVG, uses a silhouette offset to highlight each region's contribution to the global total. Built with React and D3.js (v2), the visualization loads monthly aggregated case data from `data_monthly.csv`, with tooltips providing daily case counts on hover. The code leverages `d3.layout.stack`, `d3.svg.area`, and `d3.time.scale` for the temporal axis.

Jan 12, 2021
Loading thumbnail…

test

This example shows an adjacency matrix of 410 nodes, with cells colored by group and sized by link frequency. A dropdown menu reorders the matrix by name, group, or optimal leaf order, with animated transitions. The visualization uses d3.scaleBand, d3.scaleOrdinal, and reorder.optimal_leaf_order with Manhattan distance. Cells are rendered as SVG rects with hover tooltips, and the data comes from a TSV file loaded via d3.tsv.

Nov 25, 2020
Loading thumbnail…

ADMatrix

This visualization combines a force-directed graph with a reorderable adjacency matrix, allowing users to explore network connectivity through two linked views. The graph uses d3.forceSimulation to position nodes, while the matrix encodes links as colored cells, with the optimal_leaf_order algorithm from reorder.js arranging the rows and columns. Clicking a node or matrix cell highlights the corresponding row and column in red, and the graph supports zoom and drag interactions. The data appears to be network links and nodes rendered as SVG elements.

Nov 25, 2020
Loading thumbnail…

Heatmap

This heatmap displays binary matrix values as colored cells, with rows and columns labeled for reference. The visualization supports three ordering strategies: random permutation, optimal leaf ordering, and initial order restoration, all controlled by buttons. Built with D3.js and the reorder library, the SVG renders cells colored on a white-to-orange scale based on value intensity, while the table.js component handles responsive reordering with animated transitions.

Nov 25, 2020
Loading thumbnail…

Node-Link Diagrams vs. Adjacency Matrix

This example juxtaposes a node-link diagram with an adjacency matrix to explore network data. The node-link view, rendered with SVG, displays nodes and their connections, while the matrix uses color opacity to represent edge weights. Clicking a matrix cell highlights the corresponding link in the node-link diagram, showing the relationship between the two representations. The visualization uses D3.js v6 for data loading, SVG rendering, and interactive selection, with a custom force-directed layout to arrange the nodes.

Nov 25, 2020
Loading thumbnail…

Co-ocurrence matrix

This co-occurrence matrix visualizes the relationships between academic programs, with cells colored by category and sized by link weight. The visualization uses an interactive SVG heatmap where users can reorder rows and columns by name, count, or group via a dropdown menu. Built with D3 v5, the code employs `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data, while transitions animate the reordering over 2 seconds. A tooltip provides details on hover, and the matrix reads from a JSON file containing nodes and links.

Nov 16, 2020
Loading thumbnail…

Node-Link Diagrams vs. Adjacency Matrix

This example presents a side-by-side comparison of two network visualization techniques: a node-link diagram and an adjacency matrix. The node-link diagram uses a force-directed layout, allowing users to drag nodes, zoom, and click to highlight connections, which are mirrored in the matrix. Clicking a matrix cell highlights the corresponding link in the diagram. The implementation relies on `d3.forceSimulation`, `d3-force`, and `d3.zoom` for interaction, while the matrix is rendered as SVG rects. The data is mapped from the same graph structure, with node size and color encoding group membership.

Nov 9, 2020
Loading thumbnail…

hw3

This scatter plot visualizes a network of cars from the UCI Machine Learning Repository’s Auto MPG dataset, showing connections between 61 nodes across 10 groups. The visualization presents both a force-directed graph using `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` with zoom functionality, and an adjacency matrix rendered as SVG rectangles. Clicking a matrix cell highlights the corresponding row and column. The code uses d3.csv to load data and d3.zoom for interactive resizing of the force layout.

Nov 8, 2020
Loading thumbnail…

Iris Parallel Plot

This interactive parallel coordinate plot visualizes the Iris dataset, showing four morphological traits (sepal length, sepal width, petal length, petal width) as vertical axes with polylines colored by species. Users can drag axis labels to reorder the dimensions, with animated transitions via d3.transition. The visualization uses d3.scalePoint, d3.scaleLinear, d3.axisLeft, and d3.legendColor, rendering as SVG with semi-transparent strokes. Data is loaded from a CSV file using d3.csv.

Oct 20, 2020
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the distribution of three iris species across four measurable attributes (sepal and petal length/width). Users can dynamically swap the variables assigned to the x- and y-axes via dropdown menus, with each species colored using a categorical scale. The visualization is built with D3 v5, using `d3.scaleLinear` for axes, `d3.legendColor` for the legend, and SVG rendering for the circles and grid lines. The plot updates by re-rendering the entire SVG when a new axis selection is made.

Oct 20, 2020
Loading thumbnail…

Cars colorlegend

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. The color of each circle encodes the number of cylinders, with a legend provided. The visualization uses D3 v5 to create the SVG, with scales for the axes and an ordinal color scale using the category10 scheme. The legend is generated using the d3-legend library.

Sep 23, 2020