huangweijie0310102@gmail.com

@kongfusmallside·9 public vizzes

Fork of D3 Starter

This example demonstrates how to build a simple D3.js (version 6) application, starting with a basic SVG scene that includes a colored leaf-like shape and a dark background. The code defines the SVG container with explicit width and height attributes and uses inline path data to render the geometric forms. It serves as an introductory template, highlighting the fundamental structure for creating static vector graphics with D3, and is accompanied by a README and a video tutorial to guide new users.

Jan 4, 2024

Loading thumbnail…

Fork of Fork of hw4

This visualization presents the classic Iris dataset as a scatterplot matrix, with each cell comparing two of the four measured features. The diagonal cells display histograms of each feature, while the off-diagonal cells show scatterplots of the data points. The code uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.scalePoint`, and `d3.axisBottom`/`d3.axisLeft` to construct the axes. Each histogram is built with `d3.histogram`, and the points are colored by species using a custom color function. The visualization also includes a legend that allows users to select data subsets, which the histograms then update to reflect the filtered categories.

Oct 15, 2023

Loading thumbnail…

Fork of hw4

This visualization presents a scatterplot matrix of the Iris dataset, showing pairwise relationships among sepal length, sepal width, petal length, and petal width. The diagonal cells display histograms of each variable, with colored overlays accumulated by species. The code uses d3.csv for data loading, d3.scalePoint for positioning subplots, and d3.histogram to bin values. Points are colored by species using custom hex codes, while axis labels and ticks are rendered via d3.axisBottom and d3.axisLeft. The SVG canvas is sized to the window and centered with a flexbox container.

Oct 15, 2023

Loading thumbnail…

Fork of hw1_scatter_plot

An interactive scatter plot of the Iris dataset displays three species of iris flowers, colored by class, with dropdown menus that let users choose which sepal and petal measurements to plot on each axis. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to compute scales and render gridlines, while a legend identifies the species groups. Data is loaded from a local CSV file using D3's `csv` API, and the chart redraws as selections change. The SVG canvas and CSS classes style each species with distinct colors and opacity.

Oct 12, 2023

Loading thumbnail…

Parallel Coordinate Plots

This parallel coordinate plot visualizes the Iris flower dataset, displaying four morphological attributes (sepal length, sepal width, petal length, and petal width) for three species of iris. Each sample is represented as a polyline connecting its attribute values across parallel axes, with lines colored by species (setosa, versicolor, and virginica) using a D3 ordinal color scale. The visualization uses D3 v7 with an SVG rendering approach, employing native `d3.axisLeft` and `d3.line` APIs for constructing the axes and polylines. An interactive dropdown menu allows users to reorder the four axes, triggering a redraw of both the vertical axes and the connecting lines via a custom `redrawParallelCoordinates` function. The data is loaded from an external CSV file using `d3.csv`.

Oct 1, 2023

Loading thumbnail…

Fork of Homework2

This interactive parallel coordinate plot visualizes the Iris dataset, with each polyline representing a flower sample colored by species (red, blue, green). Users can drag any of the four vertical axes to reorder them dynamically, with the lines and axis positions smoothly transitioning via D3 v5’s `drag` and `transition` APIs. The visualization uses `d3.scalePoint` and `d3.scaleLinear` for positioning, rendered as SVG paths with axis labels.

Oct 1, 2023

Loading thumbnail…

Fork of Bubble Chart new

This interactive bubble chart visualizes the classic Iris dataset, plotting flower measurements as circles on a scatterplot. Users select from sepal and petal attributes via dropdowns to update the x and y axes. The D3 v6 code loads data with `d3.csv`, creates an SVG canvas, and uses `d3.scaleLinear` and `d3.axisBottom` to map positions and axes. When attributes change, a transition with a 500-millisecond duration animates the circles to their new coordinates, providing dynamic exploration of the data.

Sep 24, 2023

Loading thumbnail…

Scatter Plots

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length for each flower sample. The example demonstrates a clean separation between React and D3 responsibilities, showing how a React wrapper component manages the SVG lifecycle while D3 functions handle data processing, scaling, and rendering. The visualization uses `d3.scaleLinear` for axis scaling and `d3.axisLeft`/`d3.axisBottom` for axes, with SVG circles rendered via D3's selection join pattern. The code serves as a starter template for scalable React-D3 integration projects.

Sep 24, 2023

Loading thumbnail…

Fork of Bubble Chart new

This bubble chart compares beverage manufacturers by plotting glucose levels on the x-axis and beverage ratings on the y-axis, with bubble size representing calorie content and color distinguishing brands. The visualization includes legends for both bubble size and brand colors. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeSet1` for color assignment, and renders as SVG circles. The data is loaded from a CSV file containing ratings, calories, and glucose values for various beverages.

Sep 24, 2023