Y

YunLing

@yunling890420·17 public vizzes

Loading thumbnail…

HW5_311553050

This interactive stacked bar chart visualizes the 2024 Times Higher Education World University Rankings, breaking down each university's overall score into five component scores: teaching, research, citations, industry income, and international outlook. Users can re-sort the bars by any of these sub-scores using radio buttons, in either ascending or descending order. Built with a custom D3.js 3.5.6 script, the chart loads data from a CSV and uses `d3.layout.stack()` to aggregate the component scores, with category colors from `d3.scale.category20()`. The visualization supports transitions between sorted states, applying the new data through `transitionCount()` which re-stacks and updates the rectangles.

Loading thumbnail…

Fork of Fork of Stack Chart Template

This example shows a stacked bar chart of the three data types (type1, type2, type3) across Chinese provinces, with the chart title referencing WHO data on deaths from illnesses in 2013. It uses D3.js (v3.5.6) with d3.layout.stack, d3.scale.ordinal, and d3.scale.linear to render the stacked bars as SVG. The visualization includes interactive radio buttons to toggle between raw counts and percentage views, though the corresponding transition logic is not fully implemented in the visible code. The data comes from local CSV files (data3.csv).

Loading thumbnail…

HW8_311553050

This interactive Sankey diagram visualizes the flow of car attribute combinations from the Car Evaluation dataset. Seven sequential attribute stages—buying, maintenance, doors, persons, luggage boot, safety, and overall acceptance level—are displayed as linked nodes, with link thickness representing the frequency of each attribute pair. Built with React and D3.js (version 3.5.16), the visualization uses the custom `d3.sankey` module for layout and SVG paths for links. Nodes are draggable, and hovering reveals exact counts. The underlying data is parsed from a raw CSV string, with each row contributing to the aggregated combination counts.

Loading thumbnail…

Fork of HW2_311553050

An interactive parallel coordinate plot displays the Iris dataset, with each flower’s measurements drawn as a polyline across four vertical axes. The axes correspond to sepal length, sepal width, petal length, and petal width, and users can reassign these columns via dropdown menus. Lines are colored by species—setosa, versicolor, or virginica—using a categorical color mapping. The visualization uses the d3 library’s `scalePoint`, `scaleLinear`, `axisLeft`, and `line` functions, with SVG rendering. Data is loaded via `d3.csv` from a remote URL.

Loading thumbnail…

Example

This example visualizes the correlations among 26 random variables (columns 'a' through 'z') in a triangular heatmap matrix. Synthetic data is generated with random numbers, and a correlation matrix is computed using `jz.arr.correlationMatrix` from the jeezy library, then laid out with the data2grid library. D3 v4 renders the grid as SVG rectangles, with colors mapped through a chroma-js scale from tomato to steelblue. Hovering highlights the corresponding axis ticks and displays a tooltip with the exact correlation value, while the color legend uses an SVG linearGradient.

Loading thumbnail…

HW4-311553050

This scatter plot matrix visualizes the Iris dataset, showing pairwise relationships between four flower measurements. The diagonal cells display histograms of each individual attribute, while off-diagonal cells show scatter plots colored by species, using orange, teal, and purple to distinguish Iris setosa, versicolor, and virginica. Users can brush a rectangular region in any cell to highlight corresponding data points across all other scatter plots, with brushed circles turning gray. The visualization is built with D3.js v3, using `d3.svg.brush`, `d3.histogram`, and linear scales, rendering as SVG elements.

Loading thumbnail…

HW3_311553050

This example shows a correlation matrix for abalone measurements, with eight variables (v1–v8) displayed as a triangular grid of colored cells. A dropdown menu lets the viewer switch between male, female, and infant subsets of the data. Each cell is filled using a red-white-steelblue chroma.scale diverging palette centered on the average correlation, with the correlation value printed inside. The visualization uses d3.scaleBand for axes, d3.axisTop and d3.axisLeft for labels, and transitions to fade in the SVG rectangles, with a gradient legend rendered below.

Loading thumbnail…

Iris Scatter Plot with Menus

An interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements by choosing which variables appear on the x- and y-axes from two dropdown menus. Points are colored by iris species using d3.scaleOrdinal and schemeCategory10, with a corresponding color legend generated by a custom colorLegend module. The visualization is built with D3 v5, rendering SVG circles via a reusable scatterPlot function that updates scales and axes when the menu selections change.

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the iris dataset, showing sepal length against sepal width for three flower species, with each species colored distinctly via a custom color legend. The visualization uses D3 v5 to load CSV data and build an SVG scene, employing `scaleLinear` for the axes, `scaleOrdinal` for color encoding, and `axisBottom`/`axisLeft` to render gridlines. Semi-transparent circles reveal overlapping points, while a reusable `colorLegend` module generates a categorical legend with labeled circles and a background rectangle.

Loading thumbnail…

HW2_311553050_RUN

This interactive parallel coordinate plot visualizes the Iris dataset, showing four measured attributes for three flower species. Users can reassign each of the four axes to different columns using dropdown menus, allowing exploration of relationships between variables. The visualization uses D3.js v5 with SVG rendering, employing `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` to draw colored polylines for each sample. A legend identifies the species, and class-specific colors distinguish the three Iris varieties throughout the plot.

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive visualization displays the classic Iris dataset as a parallel coordinate plot, with each flower sample represented as a polyline across four axes: sepal length, sepal width, petal length, and petal width. The plot shows how the three iris species—setosa, versicolor, and virginica—cluster distinctly, particularly on the petal measurements, using translucent colored strokes and a legend to distinguish them. The SVG chart is built with D3 v5, using `scalePoint` for the categorical axes, `scaleLinear` for the value range, `scaleOrdinal` for color mapping, and `line` generators to draw the paths.

Loading thumbnail…

HW1_311553050_Run

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two of the four flower measurements via dropdown menus for the x- and y-axes. The visualization is built with d3.v5, using SVG rendering and a custom scatterPlot module that employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft. Data points are colored by species using d3.scaleOrdinal with a schemeCategory10 palette, and a semi-transparent color legend is rendered alongside the plot. The chart updates dynamically when the user selects different measurement columns.

Loading thumbnail…

HW1_311553050

This interactive scatter plot visualizes the Iris dataset, displaying the relationship between two user-selected flower measurements (sepal length, sepal width, petal length, petal width) on the x- and y-axes. Points are color-coded by iris class using `d3.scaleOrdinal` with `d3.schemeCategory10`, and a color legend is rendered as an SVG group. Two dropdown menus allow the viewer to change the axes. The plot uses `d3.axisBottom` and `d3.axisLeft` with grid lines, and updates dynamically via D3's data join pattern.

Loading thumbnail…

Making a Bar Chart

This example displays a horizontal bar chart of the ten most populous countries, using population data from a CSV file. D3 v5 scales are used to map countries to y-axis bands and population values to bar widths, with axes formatted to abbreviate large numbers. The chart is rendered as SVG, with gridlines and labels styled via CSS. The code imports specific functions from the d3 library, including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, `csv`, and `max`.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with D3.js, rendered as SVG shapes and animated with the transition API. The code uses D3 v5 to construct a yellow circle head with eyes and a path-based mouth, generated via the `arc` function with specified inner and outer radii. Eyebrows move up and down over two seconds using chained `transition` calls, showcasing animation of SVG attributes. The example relies on D3's `select` and `append` for DOM manipulation, with geometry defined by variables for spacing and offsets.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape primitives—circles, rectangles, lines, and paths—arranged in a 960×500 viewport with a global scale transform. It shows how inline SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes (`.lines`) style the line and path elements with custom stroke colors and line joins. The code uses raw SVG markup within an HTML document, applying a `transform="scale(1.5)"` to enlarge all shapes and a `translate` to offset a group of pink shapes. No external JavaScript libraries are employed; styling relies entirely on a linked stylesheet.

Loading thumbnail…

HTML Cars Report

This example displays a simple cars report listing three used vehicles with their model years and prices. It uses plain HTML markup with a `ul` element for the list and an external CSS stylesheet for styling. The CSS applies a monospaced font at 3em size to the body and highlights the first car, a 2012 Nissan Leaf, in red using the `.highlighted` class. The page demonstrates fundamental HTML list rendering and basic CSS class-based styling without JavaScript or data-visualization libraries.