Skip to main content
Log in
C

chingching17

@chingching17·11 public vizzes

Loading thumbnail…

Horizon chart

This example visualizes hourly traffic data for the Von der Heydt street over multiple days using a horizon chart. Each horizontal band represents a separate day, with the area chart showing traffic volume over time, and the color intensity encoding the magnitude of values that extend beyond the chart’s baseline. The visualization is built with D3 v5, using `d3.csv` to load the data, `d3.nest()` to group entries by date and name, and `d3.area()` with a curve basis to generate the smooth SVG paths for each series.

Nov 3, 2023
Loading thumbnail…

stacked bar chart

This stacked bar chart displays the weighted scores of universities across five categories: teaching, research, citations, industry income, and international outlook. The chart reads the data from `university.csv` and renders it as an SVG, with each bar representing a university and segmented by score category. Users can interactively sort the universities by any of the five scores, in either ascending or descending order, using dropdown menus. The visualization uses D3 v4 APIs including `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.stack`, and `d3.axisBottom` to construct the chart.

Oct 18, 2023
Loading thumbnail…

Brushable Scatterplot

This interactive scatterplot matrix displays the Iris dataset, showing pairwise relationships between four floral measurements. Each off-diagonal cell contains a scatterplot of data points colored by species, while diagonal cells display histograms of individual feature distributions. Users can brush rectangular regions across any plot to highlight corresponding points in all other cells, enabling rapid comparison of multi-dimensional correlations. The visualization is built with D3 v4, using d3.brush for the linked selections, d3.scaleLinear for axes, and d3.axisBottom/Left for tick marks, rendered as SVG.

Oct 9, 2023
Loading thumbnail…

Brushable scatterplot2

This interactive scatterplot matrix displays the iris dataset, showing pairwise relationships between four flower measurements (sepal and petal length and width) alongside histograms on the diagonal. The visualization uses d3.csv to load the data and d3.scaleLinear with d3.axisBottom and d3.axisLeft for axes. Points are colored by species using d3.scaleOrdinal, with colors distinguishing setosa, versicolor, and virginica. The chart is built entirely with SVG, and while brushable functionality is mentioned in the title, the code shown does not implement brushing interactions.

Oct 9, 2023
Loading thumbnail…

Correlogram

This correlogram visualizes correlations among eight numeric measurements of abalone, split into three side-by-side panels for male, female, and infant specimens. Each panel uses a symmetric matrix layout: the lower-left triangle displays correlation coefficients as colored text, while the upper-right triangle represents the same values as scaled circles. Hovering over any circle reveals its exact correlation in a tooltip. The code computes correlations using the `jz.arr.correlationMatrix` utility, renders the chart with D3 selections and scales (`d3.scaleLinear`, `d3.scaleSqrt`), and colors values with a diverging scale, with the dataset loaded from a CSV file.

Oct 7, 2023
Loading thumbnail…

Correlation Matrix

This interactive correlation matrix visualizes relationships among eight physical measurements of male abalone from the abalone.csv dataset. The code uses D3 v4/v5 to render an SVG grid, where each cell’s color—scaled via chroma-js from tomato to steelblue—represents the correlation strength between variable pairs. A hover interaction highlights selected cells and displays a tooltip. The visualization is built with D3’s scaleBand for axes and data2grid to structure the correlation matrix data.

Oct 7, 2023
Loading thumbnail…

hw1_scatter_plot

This scatter plot displays the classic Iris dataset, showing relationships between four flower measurements (sepal length/width and petal length/width) for three Iris species. Users can dynamically select which measurements appear on the x- and y-axes through dropdown menus, triggering a re-render of the visualization. The plot uses D3 v5 with `scaleLinear`, `axisBottom`, and `axisLeft` to generate axes with gridlines, while colored circles represent the three species—Iris-setosa, Iris-versicolor, and Iris-virginica—with a corresponding legend. Data is loaded from a CSV file using D3’s `csv` method.

Oct 3, 2023
Loading thumbnail…

Iris visualize parallel coordinates

This visualization uses a parallel coordinates plot to display the Iris flower dataset, with each of the four measurements (sepal length, sepal width, petal length, petal width) represented as a vertical axis. Users can reorder the axes using dropdown menus, and each of the 150 flowers is drawn as a colored line (blue, orange, or red) corresponding to its species. The chart is built with D3 v5, using `d3.scaleLinear` for each dimension, `d3.scalePoint` for axis positioning, and `d3.axisLeft` for rendering the scales.

Oct 1, 2023
Loading thumbnail…

hw1_scatter_plot

This scatter plot visualizes the Iris flower dataset, showing the relationship between two selected features (sepal length, sepal width, petal length, or petal width) chosen via dropdown menus. Points are colored by species (Iris-setosa, Iris-versicolor, Iris-virginica) using CSS classes. The visualization is rendered with D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with data loaded from a CSV file and interactive legends displayed on the side.

Sep 30, 2023
Loading thumbnail…

original version of hw1_scatter_plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as sepal and petal length and width. Users can select which attributes to plot on the x and y axes via dropdown menus. Each of the three Iris species is represented by a distinct colored circle, with a legend on the right identifying the categories. Built with D3.js v5, the visualization uses `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` to render ticks, loading data from an external CSV file.

Sep 24, 2023
Loading thumbnail…

vis hw1 scatter plot

This gallery example demonstrates a minimal D3.js v7 scatter plot. The page displays the text “Hello D3 version 7” in the center of the browser window, rendered via the `select` function from D3’s `d3` package. The code uses the `d3.min.js` library, loaded from an unpkg CDN, and applies the `text` method to set the message. The implementation is a straightforward starting point, with body styling centered and no actual scatter-plot data or visualization logic present.

Sep 23, 2023