pychen01

@pychen01·10 public vizzes

Fork of Interactive Chloropleath Map

This interactive choropleth map colors countries by economic classification using data from the world-atlas package. A legend displays color categories, and clicking a legend entry dims all countries except those in the selected class. The map uses d3.geoPath with a Natural Earth projection, supports zoom via d3.zoom, and renders as SVG with tooltips showing country names and values.

Jan 13, 2021

Loading thumbnail…

Adjacency Matrix

This visualization displays an adjacency matrix of a network with 410 nodes, using colored rectangles along the x- and y-axes to represent node groups. The matrix cells, rendered as gray squares in both upper and lower triangles, indicate connections between nodes. Built with D3 v4, it uses SVG and animated transitions to resize and reposition matrix elements. A brush interaction on the top axis allows users to select a subset of nodes, triggering a smooth re-scaling of the matrix and axis labels to focus on the selected range.

Nov 23, 2020

Loading thumbnail…

Adjacency Matrix

This adjacency matrix displays a network of 410 nodes from the infect-dublin.edges dataset, showing connections as grey cells that appear in both the upper and lower triangles since links are rendered symmetrically. The matrix uses color-coded axis rectangles to represent node groups, with an interactive brushing feature that allows selection of a range on the X-axis. Upon selection, the matrix animates via `transition()` to filter and re-scale the display, recomputing the axis domain and cell dimensions to focus on the chosen subset. Built with d3.v4, the visualization renders as SVG and uses `d3.scaleBand`, `d3.brushX`, and chained `.attr()` calls for layout and interaction.

Nov 23, 2020

Loading thumbnail…

Force Directed Graph

This example presents a force-directed graph of nodes and links alongside an adjacency matrix, demonstrating an interactive comparison between the two visual representations of the same network data. Clicking a node in the graph highlights its corresponding row and column in the matrix, while clicking a matrix cell highlights the linked nodes in the graph. Built with D3 v6 and rendered as SVG, the visualization uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, with drag and zoom interactions enabled via `d3.drag` and `d3.zoom`.

Nov 23, 2020

Loading thumbnail…

Force Directed Graph

This example pairs an interactive force-directed node-link diagram with an adjacency matrix, showing the same network data in two complementary views. Users can drag nodes in the graph to reposition them, click a node to highlight corresponding row/column links, or click matrix cells to highlight edges. The force layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, while the matrix is rendered as SVG rectangles. Both views are synchronised via click events, with zoom support provided by a custom `d3.zoom` handler.

Nov 6, 2020

Loading thumbnail…

Untitled

This interactive parallel coordinate plot visualizes the Iris flower dataset, showing the relationships between numerical measurements (sepal width, sepal length, petal width, petal length) across three species. Each flower is represented as a polyline colored by species (setosa, versicolor, virginica) using an ordinal color scale, with a legend indicating the categories. Built with D3 v3, the visualization uses `d3.svg.axis` and `d3.svg.line` for rendering SVG, and supports axis dragging via `d3.behavior.drag` to reorder dimensions, while the background context lines fade during interaction. The data is loaded from an external CSV file.

Oct 21, 2020

Loading thumbnail…

Parallel Coordinates on Iris data set

This example visualizes the Iris flower data set with parallel coordinates, encoding each specimen as a polyline across four quantitative dimensions. The lines are colored by species via `d3.scale.ordinal`, and users can drag any axis to reorder dimensions, with animated transitions using `d3.behavior.drag`. It renders in SVG with axes from `d3.svg.axis` and includes a legend of flower classes. Data loads from a remote CSV, and axis labels are rendered with text elements.

Oct 18, 2020

Loading thumbnail…

Iris analysis

This interactive scatter plot lets users explore the classic Iris dataset by switching which four measurements appear on the x- and y-axes via dropdown menus. The visualization renders 150 points as semi-transparent circles, colored by iris species (setosa, versicolor, virginica), with a custom legend. Built with D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and a reusable `dropDownMenu` module, rendering to SVG. Axes include grids and labels, with the chart redrawing entirely on each menu selection.

Oct 18, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that displays the text “Hello HTML” alongside a dropdown menu for selecting a favorite pet, with options ranging from Dog to Goldfish. The page also includes a script that outputs “Hello JavaScript!” to the browser’s console, visible via Chrome developer tools. Styling is applied through inline CSS, setting the body to center-aligned text with a font size of 13em for dramatic visual emphasis. The code uses plain HTML elements and a simple JavaScript `console.log` call, with no external libraries or frameworks.

Sep 30, 2020

Loading thumbnail…

HTML Starter

This example shows a bare minimum HTML page that displays large, centered text reading “Hello, I’m Lucifer Morningstar” with a font size of 10em. The page uses a simple CSS style block for body text alignment and sizing, and an inline script that logs “Hello JavaScript!” to the browser’s developer console. It demonstrates the foundational structure of an HTML document with embedded styling and scripting, serving as a starting point for web-based visualization projects without relying on any external libraries or frameworks.

Sep 30, 2020