Skip to main content
Log in
C

chungmin-yu

@chungmin-yu·23 public vizzes

Loading thumbnail…

Stack Chart Template

This stacked bar chart visualizes causes of death in 2013 across selected South African countries, using data from the WHO. Users can toggle between raw counts and percentage shares via radio buttons, which triggers a smooth transition in bar heights. The visualization is built with the D3.js library, specifically using `d3.layout.stack` to compute the stacked segments and `d3.svg.axis` for the axes. The chart is rendered as an SVG, and the animation is achieved through D3's `.transition()` method.

Aug 3, 2021
Loading thumbnail…

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This color-coded heatmap shows the percentage of bee colony loss across US states and years, revealing a random pattern with no clear geographic hotspots or temporal trends. Each square represents a state's loss for a given census year, with color intensity encoding the loss percentage. The visualization uses the Vega-Lite API’s `markSquare` function, projecting state names on the x-axis and years on the y-axis, with data sourced from a CSV of Bee Colony Loss. Built with D3 and Vega-Lite, it applies custom axis and label styling from a config file.

Aug 3, 2021
Loading thumbnail…

Percent Bee Colony Loss by State and Year - a Vega-Lite MarkSquare Heatmap

This color-coded heatmap shows the percentage of bee colony loss across US states and years, revealing a random pattern with no clear geographic hotspots or temporal trends. Each square represents a state's loss for a given census year, with color intensity encoding the loss percentage. The visualization uses the Vega-Lite API’s `markSquare` function, projecting state names on the x-axis and years on the y-axis, with data sourced from a CSV of Bee Colony Loss. Built with D3 and Vega-Lite, it applies custom axis and label styling from a config file.

Aug 3, 2021
Loading thumbnail…

Heatmap for number of infection rate at orign of pandemic

This interactive heatmap visualizes the number of infections by age category across Chinese regions during the early pandemic. It uses a sequential red color scale to encode counts, with the highest values concentrated in Hubei, particularly among the 66+ age group. Built with D3.js v4, the visualization renders as SVG rectangles and includes hover tooltips that display exact cell values. The data comes from a CSV file containing location, age category, and infection counts.

Aug 3, 2021
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, showing relationships between sepal and petal measurements across three iris species. Users can dynamically select which measurements to plot on the x- and y-axes through dropdown menus. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` for axes, while data points transition smoothly via `transition().duration(1000)`. Each species is color-coded—red, green, or blue—and a legend identifies the classes.

Jul 6, 2021
Loading thumbnail…

D3 v5 Zoomable Sunburst

A zoomable sunburst visualizes the hierarchical Flare dataset, where clicking a node zooms the radial layout to focus on that subtree, recentering and rescaling arcs with animated transitions. Rendered as SVG, it uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` to compute the layout, with colors assigned via `d3.scaleOrdinal` and `d3.interpolateRainbow`. Interactive updates rely on `transition.attrTween` to interpolate arc geometry and label positions over 750 milliseconds.

Nov 28, 2020
Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example compares two visualizations of the same network dataset: a force-directed node-link diagram on the left and an adjacency matrix on the right. The node-link diagram uses a physical simulation to position nodes, with link thickness and node color indicating degree and size. The adjacency matrix displays connections as filled cells in a grid. Both visualizations are built with D3 v3, using the `d3.layout.force` and `d3.behavior.zoom` APIs for the diagram, and a custom grid for the matrix. The matrix allows clicking to explore connections, while the node-link view supports zooming, dragging, and clicking. Data is loaded from a text file of edge pairs.

Nov 19, 2020
Loading thumbnail…

node-link diagrams vs. adjacency matrix

A side-by-side comparison shows the same 410-node contact network as both a force-directed node-link diagram and an adjacency matrix. Users can click a node in the node-link view to highlight its corresponding row and column in the matrix, revealing the network’s connectivity structure. The node-link view uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, rendered as SVG circles and lines. The matrix is built from CSV data representing pairwise links, with cells colored by group membership based on degree.

Nov 7, 2020
Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Fisher Iris dataset, showing the distribution of 150 flowers across three species. The D3.js v5 code maps sepal and petal measurements to the x and y axes, with each circle color-coded by iris class (setosa, versicolor, or virginica). Users can switch the variables plotted on each axis via dropdown menus built with D3 `select` elements. The visualization uses SVG rendering with D3’s `scaleLinear`, `axisLeft`, and `axisBottom` utilities to generate the plot, axes, and labels.

Nov 7, 2020
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes relationships among nodes in a network, with circle size reflecting group membership and link thickness indicating connection weight. The example loads CSV data from an external source and renders an interactive SVG where users can drag nodes, zoom, and click to highlight connected rows and columns in an accompanying adjacency matrix. It uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for layout, with `d3.drag` and `d3.zoom` for interaction. The code also employs `d3.csv` for data parsing and builds the matrix using SVG rectangles and text elements.

Nov 7, 2020
Loading thumbnail…

node-link diagrams vs. adjacency matrix

This example demonstrates a force-directed node-link diagram of a social network, using data from Dublin infection contact traces. The visualization shows 410 nodes and their connections, with node colors representing group assignments based on link counts. Implemented with d3.forceSimulation, d3.forceLink, and d3.forceManyBody, it computes the layout. Users can drag nodes and zoom the SVG canvas using d3.zoom. Node and link positions update on each simulation tick, and the graph is rendered as SVG circles and lines.

Nov 7, 2020
Loading thumbnail…

d3-force

A force-directed graph of the Les Misérables character co-occurrence network, rendered as SVG circles and lines. Node color encodes each character's group, derived from the number of links in the data.tsv file, which contains 410 nodes and 2,399 edges. d3.forceSimulation with forceLink, forceManyBody, and forceCenter drives the layout, while d3.drag enables node repositioning. A d3.zoom handler applies pan and zoom transforms to the entire graph.

Nov 7, 2020
Loading thumbnail…

Force Directed Graph

This example pairs a force-directed network graph with an interactive adjacency matrix to explore node relationships. Users can drag, zoom, and click nodes in the graph or click cells in the matrix to highlight corresponding links in both views. The graph is rendered in SVG using D3’s `forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter` APIs, with nodes colored by group and links weighted by connection value. The adjacency matrix encodes edge weights via cell opacity, built from the same edge data as the network.

Nov 6, 2020
Loading thumbnail…

Force Directed Graph

This example combines a force-directed graph with an adjacency matrix to visualize network connections. Users can click a node in the graph or a grid cell in the matrix to highlight corresponding links, with the matrix using cell opacity to represent edge weight. The graph is rendered with SVG elements driven by `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, while the matrix is built from `d3.csv` data. Interactive features include drag-and-drop via `d3.drag` and zooming through `d3.zoom`.

Nov 6, 2020
Loading thumbnail…

HW3

This example presents a force-directed network visualization of a dataset loaded from a TSV file, where nodes represent numeric IDs and edges represent connections between them. The visualization shows both a node-link diagram and an adjacency matrix, with node groups determined by link counts. The D3.js code uses `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` forces to position nodes, while an SVG rendering displays the results and supports dragging and zooming through D3’s interaction utilities. Animated transitions occur when reordering nodes by name or group via the dropdown control.

Nov 1, 2020
Loading thumbnail…

Parallel Coordinates

This parallel coordinates plot uses gray background lines to show all countries and blue foreground lines for focus, with each axis representing a dimension from the total4.csv dataset (Happiness, Art/Educational, Environmental, and other membership categories). Users can drag axes to reorder dimensions via `d3.behavior.drag`, and brush along axes with `d3.svg.brush` to filter which lines remain visible. The code builds SVG paths with `d3.svg.line`, applies linear scales per dimension, and animates reordering using `transition`.

Oct 16, 2020
Loading thumbnail…

Parallel Coordinates on Iris data set

This parallel coordinates visualization displays the classic Iris dataset, with each flower sample represented as a polyline crossing four numeric dimensions: sepal length, sepal width, petal length, and petal width. The lines are color-coded by species (setosa, versicolor, virginica), with a legend showing the mapping. Built with d3.v3, it uses d3.svg.line and d3.svg.axis to construct the chart, and d3.behavior.drag enables interactive reordering of the axes. The data comes from a remote CSV file, rendered as SVG with animated transitions during drag operations.

Oct 15, 2020
Loading thumbnail…

0616027_hw2

This interactive parallel coordinates plot visualizes the Iris dataset, with each line representing a flower and colored by species (setosa, versicolor, or virginica) using a D3 ordinal color scale. The graphic displays four numerical dimensions—sepal and petal length and width—on vertical axes, and supports dragging axes to reorder them and brushing along axes to filter the highlighted foreground lines. Built with D3 v3, the SVG rendering includes background and foreground path layers, with axes and brushes appended to each dimension group. The legend uses colored circles to map species to the purple, green, and yellow palette.

Oct 15, 2020
Loading thumbnail…

Iris Parallel Coordinate Plot

This visualization uses a parallel coordinate plot to display the classic Iris dataset, with each flower’s sepal and petal measurements drawn as a polyline across four vertical axes. Lines are color-coded by species—setosa in green, versicolor in purple, and virginica in red—at 40% opacity to reveal clustering patterns. Built with D3 v5, the code uses `d3.scalePoint` for axis positioning, `d3.scaleLinear` for per-dimension value scaling, and SVG paths generated by a custom `path` function. Species colors are assigned through a conditional `class_color` function rather than a categorical scale.

Oct 15, 2020
Loading thumbnail…

0616027.html

This visualization presents the classic Iris dataset as an interactive parallel coordinates plot, with each of the 150 flowers represented as a colored polyline. The chart displays four numerical dimensions (sepal length/width, petal length/width) on vertical axes, while the three species are distinguished by color: setosa in purple, versicolor in teal, and virginica in yellow. Using D3 v3 with SVG, the code employs `d3.svg.axis()`, `d3.behavior.drag()`, and `d3.svg.brush()` to let users reorder axes by dragging and filter lines by brushing along any dimension. A legend below the chart identifies the species color mapping.

Oct 15, 2020
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, showing measurements of sepal and petal length and width across three species. Users can dynamically select which measurement appears on the x-axis and y-axis using dropdown menus. The visualization uses D3.js v5 with SVG rendering, employing `scaleLinear` for axes, `scaleOrdinal` for color mapping, and `axisBottom` and `axisLeft` for ticks. The data is loaded via `d3.csv` and rendered as semi-transparent circles colored by species class.

Oct 3, 2020
Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, displaying the relationship between two user-selected attributes (sepal length, sepal width, petal length, or petal width) for three iris species. Circles represent individual flowers, color-coded by species, with dropdown menus allowing selection of which measurements appear on the x-axis and y-axis. Built with D3 v5, the visualization uses d3.csv, d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, and d3.axisBottom to render the SVG chart, complete with gridlines, axis labels, and a legend.

Oct 2, 2020
Loading thumbnail…

Iris Scatter Plot

This scatter plot shows the Iris dataset across four selectable dimensions. Users choose which measurement (sepal length, sepal width, petal length, or petal width) to plot on each axis, and the plot redraws accordingly. The visualization uses D3 scales (`scaleLinear`, `scaleOrdinal`) to map data to positions and colors, with each flower class assigned a distinct color. The SVG rendering includes axes, gridlines, a title, and a legend, and it updates in response to the interactive dropdown selectors.

Oct 2, 2020