黃

黃歆善

@QuteP·12 public vizzes

Example themeriver

This stacked bar chart displays the performance of twelve universities across five teaching, research, and outreach metrics, with bars sorted by total score. A checkbox enables sorting values, though it is disabled in the code. The visualization uses D3.js v3 with ordinal and linear scales, SVG rendering, and axis components. Mouseover interactions highlight individual segments and display tooltips with metric names and values. Data comes from the provided college.csv file, which is loaded via d3.csv.

Oct 13, 2023

Loading thumbnail…

Example themeriver

This example shows a stacked bar chart of U.S. state population data across seven age groups, with bars sorted by total population in descending order. The visualization uses D3.js (v3) with SVG rendering and includes an interactive checkbox to toggle value sorting, though the checkbox is initially disabled. Users can hover over individual bars to display tooltips showing the age category and count. The chart employs d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for axes, with data loaded from a CSV file using d3.csv.

Oct 13, 2023

Loading thumbnail…

HW02-Parallel Coordinates chart

This interactive parallel coordinates plot visualizes the Iris flower dataset, with each line representing an individual sample and colored by species (setosa, versicolor, or virginica) across four numeric measurements plus class. Users can reorder the axes by dragging dimension labels, which are implemented using the Sortable library, triggering a full re-render via D3 v7. The visualization uses D3 scales, axes, and SVG paths, with CSS classes defining the color encoding for each species group.

Oct 13, 2023

Loading thumbnail…

Example stacked barplot

This stacked barplot visualizes the distribution of award recipients by country and year, with each bar segment representing a different place and the full bar height indicating the total number of awards. The chart uses D3.js v3 with SVG rendering and animation, employing `d3.time.scale`, `d3.scale.ordinal`, `d3.svg.axis`, and `d3.layout.stack` to build the layers. A tooltip appears on hover, and the data comes from the awards.csv file, with colors assigned via a predefined palette in the color range array.

Oct 13, 2023

Loading thumbnail…

HW04-Brushable Scatter Plot Matrix

A brushable scatter plot matrix displays pairwise relationships among four measurements of the iris dataset, with histograms along the diagonal and colored scatter plots for each trait combination by species. Users can drag a rectangular brush across any cell to select data points, which highlights matching points across all other cells. Built with D3 v4, the visualization renders as SVG and uses `d3.brush`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and `d3.histogram` for the diagonal distributions. The axes are generated via `d3.axisBottom` and `d3.axisLeft`.

Oct 6, 2023

Loading thumbnail…

Abalone Correlation Matrix

This visualization shows the correlation matrix for physical measurements of abalones, comparing length, diameter, height, various weights, and rings (age). Each cell is colored according to the strength of correlation, revealing strong relationships among size and weight variables and weaker correlations with age. The code uses D3 v4’s scale functions and SVG rendering to draw a grid of colored rectangles. Precomputed correlation values for both female and male abalones are embedded as data arrays, with axis labels placed along the top and left edges for each variable.

Oct 6, 2023

Loading thumbnail…

Fork of Scatter Plot With Menus(Iris)

An interactive scatter plot of the Iris dataset lets users explore relationships between variables. Two dropdown menus, built with a reusable `dropdownMenu` function, select which attributes appear on the x- and y-axes. The visualization uses D3 v7's `scaleLinear` for numeric fields and `scaleBand` for the categorical "class" column, rendering points via `transition` animations. Axis labels update dynamically, and axes are drawn with `axisBottom` and `axisLeft`. The code loads data from `iris.csv` and scales circles with a radius of 10.

Sep 23, 2023

Loading thumbnail…

Customizing Axes

A bar chart displays the top 10 most populous countries from a CSV file, with country names on the y-axis and population on the x-axis. The bars are drawn as SVG rectangles, while the axes are customized using D3 v7’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` functions. The x-axis tick labels are reformatted with `format` to abbreviate large numbers, and gridlines span the chart via negative tick sizes. The y-axis domain line and ticks are removed, and custom text labels are added for the chart title and axis title.

Sep 22, 2023

Loading thumbnail…

Scatter Plot With Menus

This interactive scatter plot lets users explore the relationship between any pair of numeric columns in the auto-mpg dataset by selecting variables from two dropdown menus. D3 v7 updates the axes and circles with a smooth transition when a new column is chosen. The visualization uses d3.scaleLinear, d3.axisLeft, and d3.axisBottom to render the SVG chart, with the dropdown menu implemented as a reusable function. Data loads asynchronously from a CSV file, and circles animate from the center to their positions.

Sep 19, 2023

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each point representing a vehicle. The visualization uses D3.js v7 to load data from a CSV file and render an SVG with scaled axes and semi-transparent red circles. The code implements linear scales, axis generators with grid lines, and custom labels, with data parsed from the auto-mpg dataset.

Sep 18, 2023

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population figures for ten countries, from China to Mexico, with population values in thousands. The chart uses D3 v7’s `scaleLinear` and `scaleBand` to map population and country names, respectively, and renders bars as SVG `rect` elements. Axes are generated with `axisLeft` and `axisBottom`, while data is loaded from a CSV file via `d3.csv`. Steel-blue bars with labeled axes present the ranked population data clearly.

Sep 17, 2023

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a yellow smiley face from SVG primitives, complete with eyes, eyebrows, and a mouth. The eyebrows animate up and down using chained `transition().duration()` calls, shifting the eyebrow group’s `transform` attribute over two seconds. The code uses `d3.select` and `d3.arc` from the D3 v7 library, setting positions via `attr` and leveraging SVG circles, rectangles, and a path for the arc-based mouth.

Sep 17, 2023