Skip to main content
Log in
S

sunnyshih0312@gmail.com

@AnchingShih·10 public vizzes

Loading thumbnail…

HC

This visualization shows air pollution measurements over time using a horizon chart, a technique that reduces vertical space by layering offset copies of a line chart with varying color bands. It displays multiple pollutant types as separate horizontal ribbons, allowing compact comparison of trends. The chart is rendered as SVG using D3 v6, with scales constructed via `scaleLinear` and `scalePoint`, and axes via `axisTop` and `axisLeft`. Data is loaded from a CSV file and preprocessed before being passed to a custom `HorizonChart` function that uses `d3.area` for the layered paths.

Oct 25, 2024
Loading thumbnail…

Scatter Plot Matric

A scatter plot matrix visualizes pairwise relationships among four traits of the Iris dataset (sepal length/width, petal length/width), with off-diagonal cells showing colored points by species and diagonal cells displaying histograms of each trait. Built with D3 v4, it uses `d3.scaleLinear` for axes, `d3.histogram` for binning, and `d3.brush` for interactive selection, rendering SVG with `d3.axisBottom` and `d3.axisLeft` labels.

Oct 2, 2024
Loading thumbnail…

corr

A heatmap displays pairwise Pearson correlations among eight numeric measurements from the Abalone dataset, with sex as a categorical attribute. Selected columns recompute the correlation matrix, while a color legend maps continuous values from pink to steel blue. The visualization uses D3 v5 scales and axes to render SVG rectangles and text, with dropdown menus controlling the dataset subset.

Sep 28, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This interactive correlation matrix visualizes the relationships between 26 random variables (columns a–z) generated in the browser, computing a correlation matrix and rendering it as a grid of colored squares. Built with D3 v4, it uses `d3.scaleBand` for axes, `chroma.scale` for the diverging color scale from tomato to steelblue, and `d3.axisTop`/`d3.axisLeft` for labels. Hovering a cell highlights the corresponding row and column labels and displays a tooltip with the correlation value. The data is synthetic, created with `jz.num.randBetween` and processed via `data2grid`.

Sep 28, 2024
Loading thumbnail…

Fork of Fork of test

This visualization displays a correlation matrix for the mtcars dataset, using both numeric labels and scaled circles to represent correlation coefficients between variables. The lower triangle shows values as text while the upper triangle uses circles whose radius encodes magnitude, with a diverging color scale from red to white to navy mapping correlations from -1 to 1. Built with D3 v3, the SVG renderer positions cells using ordinal scales and includes a color legend constructed from small rectangles. The data comes from a CSV file containing precomputed correlation values.

Sep 27, 2024
Loading thumbnail…

916

This interactive parallel coordinate plot visualizes the classic Iris dataset, displaying four measured attributes for three flower species. Built with D3 v5, it renders each flower as a colored polyline across vertical axes, with colors distinguishing Iris setosa, versicolor, and virginica. Users can drag any y-axis label to reorder the axes, dynamically repositioning the corresponding coordinate lines. The implementation uses `d3.scaleLinear` and `d3.axisLeft` for axes, with `d3.drag()` handling the interactive reordering and `d3.transition()` animating the axis shifts.

Sep 16, 2024
Loading thumbnail…

Fork of Interactive Color Legend

A fork of the "Interactive Color Legend" visualization, this scatter plot displays the classic Iris Dataset, plotting sepal length against petal length. The visualization uses D3.js, specifically `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for color mapping. Hovering over a color legend item highlights the corresponding data points in the plot, while dimming others, using a `selection.join` pattern. The interaction is managed through state handling with `setHoveredValue` and `hoveredValue`, showcasing an effective way to explore categorical data.

Sep 15, 2024
Loading thumbnail…

testing

This example presents two scatter plots of the Penguins dataset, one comparing sepal length to sepal width and another comparing bill length to flipper length. The code uses D3's `scaleLinear`, `extent`, and axis components imported from `@curran/axis-labels` to render the plots. It leverages D3's `.join` operator for efficient incremental updates of SVG circles, with adjustable radius and opacity. The visualization is driven by the `viz` function, which takes column selectors and margin configuration as parameters, allowing simple reuse for multiple attribute pairs.

Sep 15, 2024
Loading thumbnail…

311460003_HW1

This example uses the classic Iris dataset from `data.csv` to demonstrate a basic data import. The code imports the dataset using the `import data from './data.csv';` statement and logs it to the console. The visualization relies on JavaScript's `console.log` to output the parsed data, with styling defined in `styles.css` for a monospace font. The chart itself is not rendered; the focus is on the initial data-loading process.

Sep 14, 2024
Loading thumbnail…

HW1_Simple Scatter Plot

This example shows the relationship between bill length and flipper length in the Penguins Dataset, with each penguin represented as a circle positioned by two linear scales. The scatter plot uses D3's `scaleLinear` and `extent` functions to map the data to screen coordinates, along with `axisLeft` for the y-axis. Axes and labels are rendered using the `@curran/axis-labels` library, which adds text for both dimensions. The visualization is built entirely with plain SVG elements (`rect` and `circle`) and reads data from the `@curran/penguins` package.

Sep 14, 2024