weird_danger

hw7

This visualization presents a correlation matrix for three subsets of the Abalone dataset: Male, Female, and Infant. The grid layout displays correlations as colored cells, with a separate legend for scale reference. Built with D3 v4 and the data2grid library, it renders three SVG matrices side by side, mapping data values to visual attributes within an HTML container.

(fork) 1

This interactive streamgraph visualizes quarterly median sale prices for houses and units with varying bedroom counts, sourced from the data.csv file. Users can reorder the legend categories through drag-and-drop, which triggers a redrawing of the stacked time-series chart via the `render` function. The visualization uses D3.js v6 for creating the SVG, scaling axes, and rendering the tooltip, while Sortable.js handles the reordering. The y-axis is fixed between -4,000,000 and 4,000,000 to accommodate the stacked values.

Final Stacked Bar Charts_4 with animation

This interactive visualization, built with D3.js, displays Times Higher Education World University Rankings for 2024 as horizontal stacked bar charts. Each bar represents a university's performance across five weighted score categories (teaching, research, citations, industry income, international outlook), with segment lengths proportional to each score. Users can sort the chart by category and toggle between ascending and descending order using dropdown menus implemented with `d3.select` and event handlers. A hover tooltip reveals precise category values. The visualization animates a typewriter-style instruction text using JavaScript `setTimeout`, while axes and scales are rendered using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisTop`.

Fork of CSV Dataset Test

This fork of the CSV dataset template renders a bar chart of population estimates for select countries, sourced from the penguins dataset’s CSV-loading pattern. The chart uses `d3.scaleLinear` and `d3.scaleBand` to map populations to bar widths and countries to vertical positions, with axes from `d3.axisLeft` and `d3.axisBottom`. Data is parsed in `index.js` by converting each population string to a number and multiplying by 1000, then drawn as SVG rectangles.

Stacked Bar Charts_3

This example visualizes the Times World University Rankings 2024 as a set of stacked horizontal bar charts, with each bar representing a university and its segments showing scores for teaching, research, citations, industry income, and international outlook. Users can sort the universities by any of these criteria in ascending or descending order via dropdown menus. Built with D3.js, the visualization uses `scaleLinear`, `scaleBand`, `scaleOrdinal`, and the `stack` API to generate the SVG chart, while a custom tooltip displays exact segment values on hover. The data comes from a CSV file.

Tooltip test

This interactive scatter plot displays the Iris flower dataset, allowing users to compare sepal and petal measurements across three species. Two dropdown menus dynamically change the x- and y-axis variables, updating the axes and data points accordingly. Hovering over a point reveals a tooltip with the species and the selected measurement values, while the plot uses d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/axisLeft for rendering. The visualization is built with D3 v5, rendered as SVG, and styled with CSS.

Stacked Bar Charts_2

This interactive stacked bar chart visualizes the Times Higher Education World University Rankings 2024, breaking down each university's overall score into five components: teaching, research, citations, industry income, and international outlook. Users can sort the universities by either total score or any individual criterion and toggle between ascending and descending order. Built with D3.js (version 7.9.0), the visualization uses `d3.stack()` to generate the stacked segments, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the continuous x-axis. Hovering over any segment displays a tooltip showing the university name and the component score. The data is loaded from a CSV file containing 2024 ranking information.

Stacked Bar Charts_1

This stacked bar chart visualizes Times Higher Education World University Rankings 2024 data, showing the distribution of five score components—teaching, research, citations, industry income, and international outlook—across universities. Users can sort the bars by any component in ascending or descending order via dropdown menus. The visualization uses d3.stack for data grouping, d3.scaleBand and d3.scaleLinear for axes, and tooltips with mouseover events to reveal individual score details. The SVG-based rendering loads data from a CSV file, with each bar segment colored according to its corresponding performance metric.

dropdownmenu rearchitect TEST (FINAL!!!)

This interactive scatter plot visualizes the Iris flower dataset, with dropdown menus that let users select which measurement (sepal length, sepal width, petal length, or petal width) appears on the x- and y-axes. The chart uses d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render axes and colored circles representing three iris species. A custom dropdownMenu module built with d3 data joins updates the plot whenever a selection changes.

FINAL scatter_plot_matrices

This interactive scatter plot matrix visualizes the classic Iris flower dataset, showing the relationships between four morphological features across three species. Each off-diagonal panel displays a scatter plot of one feature pair, color-coded by species (red for setosa, blue for versicolor, green for virginica), while diagonal panels show histograms of individual feature distributions. The visualization uses D3 v5 with `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.brush`, and `d3.histogram` APIs, rendering all elements as SVG. Users can brush within any scatter plot to select data points and filter the entire matrix, highlighting corresponding observations across all panels.

scatter_plot_matrices _3

This scatter plot matrix visualizes the Iris dataset, showing pairwise relationships between sepal length, sepal width, petal length, and petal width, with points colored by species. Using D3.js v5, the matrix displays scatter plots for off-diagonal cells and histograms along the diagonal, enabling comparison of feature distributions. The code implements d3.brush for interactive selection, d3.scaleLinear and d3.scalePoint for positioning, and d3.histogram for binning diagonal distributions. A legend with colored dots identifies the three Iris species, rendered as SVG elements.

try

This scatter plot matrix uses D3 v5 to visualize the classic Iris dataset, comparing four flower measurements across all pairwise combinations. The matrix diagonal displays histograms of each feature, while the off-diagonal cells show colored scatter plots where each data point is colored red, blue, or green according to its species. The visualization uses `d3.scaleLinear` for the axes, `d3.scaleOrdinal` for the categorical color mapping, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.histogram` to compute the distribution bins.

scatter_plot_matrices _2

This example shows a scatter plot matrix for the Iris dataset, displaying pairwise relationships between sepal and petal measurements. Each off-diagonal cell contains a scatter plot colored by species, while the diagonal cells show histograms of individual traits. The visualization uses D3 v5 with SVG rendering, leveraging `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.brush`, and `d3.histogram` to build the matrix. Data loads from a CSV file, and users can brush cells to explore correlations across dimensions.

BARS scatter_plot_matrix

This visualization combines a scatter plot matrix with histograms along the diagonal to explore the classic Iris dataset. Using D3.js v5 with SVG rendering, it displays pairwise relationships between four flower measurements, colored by species. When users select data points, the histograms dynamically update to show the distribution of selected measurements. The code uses D3's `scalePoint`, `scaleLinear`, and `histogram` APIs to arrange the plots and compute bin counts, with the Iris dataset loaded from a local CSV file.

scatter_plot_matrices _4

A scatter plot matrix displays pairwise relationships among four Iris flower measurements, with histograms along the diagonal showing each feature's distribution. Points are colored red, blue, and green to distinguish the three Iris species, making clusters and correlations between sepal and petal dimensions visible. The visualization uses D3 v5 to build the matrix, employing `d3.scalePoint` for positioning, `d3.scaleLinear` for axes, `d3.histogram` for the diagonal, and `d3.brush` for interactive selection. Data comes from the classic Iris dataset loaded from a CSV file.

Scatter_plot_matrices _4

A scatter plot matrix of the Iris dataset displays pairwise relationships among four floral measurements, with histograms on the diagonal and color-coded points by species. Built with D3 v5, the visualization uses `d3.brush` for interactive selection, `d3.scaleOrdinal` for color mapping, and `d3.histogram` for density distributions. Axis labels are positioned via `d3.scalePoint`, and the layout adapts to the window size.

Correlation matrix FINAL！！！

This visualization presents three correlation matrices for abalone measurements, split by sex (male, female, and infant), with each cell colored by Pearson correlation using a rainbow scale from -1 to 1. The D3.js v4 code computes correlations via `jz.arr.correlationMatrix` and renders the grid with `data2grid`, while axis labels are rotated, and hovering over a cell highlights the corresponding row and column labels with a tooltip. The underlying dataset is loaded from a CSV file, and the SVG output is styled with CSS for selected states and interactive feedback.

Fork of Flowers menu dropdownmenu TEST

This interactive scatter plot displays the Iris flower dataset, mapping sepal length and width for each sample. A dropdown menu, built with a custom `dropdownMenu` function, lets users select different data columns. The visualization uses d3.v5's `scaleLinear`, `axisLeft`, and `axisBottom` to render the axes and circles, with data loaded from a CSV file. Color-coded legends for the three Iris species appear alongside the plot.

brushable_scatter_plot_matrices _2

This interactive scatter plot matrix displays the Iris dataset, showing pairwise relationships between sepal and petal measurements across three flower species. Users can brush any of the twelve small multiples to highlight corresponding data points across all other plots, with non-selected points fading to gray. Built with D3 v5, the visualization uses SVG rendering with `d3.brush` for the interactive selection, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` to color-code species as red, blue, and green. The data is loaded as CSV and parsed into numeric fields before rendering.

brushable_scatter_plot_matrices _1

This interactive scatter plot matrix explores the Iris flower dataset, showing the relationships between sepal length, sepal width, petal length, and petal width. Users can select any two dimensions for the x and y axes, with points colored by species (setosa, versicolor, virginica) using a color legend. The visualization uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisBottom and d3.axisLeft to render gridlines and tick marks. Circles are drawn as SVG elements with opacity set in CSS, and axis labels are rotated using SVG transforms.

Correlation-matrix Abalone 1 no tooltip

Three side-by-side correlation matrices visualize relationships among eight physical measurements of abalone, split by sex into male, female, and infant groups. Each grid cell is colored with a sequential rainbow scale from −1 to 1, revealing how measurement correlations differ across the three categories. The code uses `d3.scaleBand` for axes, `d3.scaleSequential` with `d3.interpolateRainbow` for color, and `jz.arr.correlationMatrix` plus `data2grid.grid` to compute and arrange the correlations. Data comes from a CSV file of abalone measurements rendered as SVG rects.

Test

This example compares the correlation between physical measurements of male, female, and infant abalones by displaying three separate correlation matrices, one for each sex. Each matrix is rendered as an SVG using D3.js v4, where the color of each cell represents the strength of the correlation between two variables. The data comes from the Abalone dataset, and the visualization is divided into three panels for direct comparison. The code uses `d3.text` to load the CSV dataset and defines a `render` function to compute and display the correlations for each group.

parallel coordinates for h/w (interactive -- FINAL!!)

This interactive parallel coordinates plot visualizes the Iris dataset, showing four measurements (sepal length, sepal width, petal length, petal width) across three flower species. Each colored polyline represents one observation, with red, blue, and green distinguishing Iris-setosa, Iris-versicolor, and Iris-virginica. Using d3.line and d3.scalePoint, the chart maps each dimension to a vertical axis. Users can drag any axis horizontally via d3.drag, which reorders the dimensions and smoothly transitions the paths with d3.transition, enabling exploration of relationships between different variable pairings. The axes display tick marks and rotated labels generated with d3.axisLeft.

parallel coordinates for h/w (interactive)

This interactive parallel coordinates plot visualizes the Iris dataset, showing sepal length, sepal width, petal length, and petal width for three flower species color-coded red, blue, and green. Users can drag the vertical axes horizontally to reorder dimensions, with paths and axis labels updating smoothly via D3 transitions. The visualization uses D3 scales (scalePoint, scaleLinear), d3.line for path generation, d3.axisLeft for axes, and d3.drag for interactive axis repositioning, rendering in SVG with 300ms animated transitions. All four numeric columns are scaled from 0 to 8.

parallel coordinates for h/w (with labels)--interactive

This interactive parallel coordinates plot displays the Iris dataset, showing all 150 flowers with their sepal and petal measurements across four parallel axes. Each line represents an individual flower, colored by species (Iris-setosa, versicolor, and virginica). The SVG rendering uses D3.js 7.9, with `d3.scalePoint` and `d3.scaleLinear` for axis scaling. The visualization supports interactive axis dragging via `d3.drag`, allowing users to reorder the axes and explore correlations between measurements.

parallel coordinates for h/w (with labels)--interactive

This interactive parallel coordinates plot visualizes the four measured features (sepal length, sepal width, petal length, petal width) of the classic Iris dataset, with each of the 150 samples represented as a polyline. Lines are colored by species (setosa, versicolor, virginica) using a D3 ordinal scale. Users can drag axis labels to reorder dimensions, triggering smooth transitions via `d3.transition()`. The implementation uses D3.js (`d3.scalePoint`, `d3.drag`) and renders as an SVG with CSS animations, drawing data from a local CSV file.

parallel coordinates for h/w (with labels) --interactive

This interactive parallel coordinates plot, rendered with SVG, visualizes the Iris dataset, showing the sepal and petal measurements of three flower species. Each polyline represents a single flower, with its path crossing four vertical axes for each measurement and its color indicating the species through a D3 ordinal scale. Users can drag the axis labels to reorder the dimensions, which triggers an update to the chart's data mapping and path generation. The visualizations are constructed using D3's `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and a custom `d3.drag` interaction.

parallel coordinates for h/w (with labels)

A parallel coordinates plot displays the four numerical measurements (sepal length, sepal width, petal length, petal width) from the Iris dataset, with each of the 150 flowers represented as a polyline connecting its values across four vertical axes. Lines are colored by species—red for Iris-setosa, blue for Iris-versicolor, and green for Iris-virginica—with a legend shown to the right. The visualization uses D3.js v7, specifically `d3.scalePoint`, `d3.scaleLinear`, and `d3.axisLeft`, to render the axes and paths as SVG elements. A fixed y-domain of 0–8 is applied across all dimensions.

parallel coordinates for h/w (non-interactive)

A parallel coordinates plot displays the four numerical measurements of the Iris dataset—sepal length, sepal width, petal length, and petal width—as vertical axes, with each flower represented by a polyline connecting its values. The lines are colored by species (red, blue, green) with 30% opacity to reveal overlapping patterns. Built with D3.js, the visualization uses `d3.scalePoint` for axis positioning, `d3.scaleLinear` for value scaling, and `d3.line` to generate the polylines. A static SVG rendering, it includes a title and a legend with colored squares and species names, and loads data from a CSV file via `d3.csv`.

Scatter plot of Iris

This interactive scatter plot visualizes the Iris flower dataset, showing measurements of sepal and petal length and width for three species. The visualization uses d3.select, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal to render circles colored by species (red for setosa, blue for versicolor, green for virginica) with an opacity of 0.3. Users can dynamically select which measurements to plot on the x and y axes via dropdown menus. The SVG rendering includes grid lines, labeled axes, and a title, with data loaded from a local CSV file.

Fork

This interactive scatter plot from the gallery visualizes the classic Iris flower dataset, with three species (setosa, versicolor, and virginica) distinguished by red, blue, and green semitransparent circles. Built with D3.js, it uses `d3.csv` to load data, `d3.scaleLinear()` for axis scaling, and `d3.scaleOrdinal()` for color mapping. Two dropdown menus let users choose which numeric attribute (sepal length/width or petal length/width) maps to the X and Y axes, triggering a full re-render of the SVG plot via the `render` function.

Fork of Flowers dropdownmenu TEST

This interactive D3.js scatter plot lets users explore the Iris flower dataset through a dropdown menu that selects the x-axis numeric column (sepal or petal length), while the y-axis always shows sepal width. The visualization uses D3's `scaleLinear`, `axisBottom`, and `axisLeft` functions to render axes with grid lines, and a custom `dropdownMenu` function handles the user selection. Data is loaded from a local CSV file and point colors correspond to the three Iris species, with a legend displayed to the right.

Flowers menu TEST

This visualization presents a scatter plot of the Iris flower dataset, mapping sepal length against sepal width on linear scales. Each flower species appears as a colored circle, with red, blue, and green markers distinguishing Iris-setosa, Iris-versicolor, and Iris-virginica. The chart includes a dropdown menu offering "Sepal" and "Petal" options. Built with D3 v5, the code uses `scaleLinear`, `axisLeft`, `axisBottom`, and `csv` to load and render the data as SVG elements.

Fork of Cars Scatter Plot for menu TEST

This D3.js (v5) visualization renders the classic Iris flower dataset as a scatter plot, displaying sepal length against sepal width. A dropdown menu above the chart offers "Sepal" and "Petal" options, which currently only log selections to the console. The plot uses `d3.scaleLinear` for axes, which are rendered with `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a local CSV file, and circles are appended directly to an SVG element, with the `d3.select` API managing the SVG and menu interactions.

Scatter Plot Test

A scatter plot displays the population of ten countries, with each country positioned along the vertical axis and its population on the horizontal axis. The visualization uses D3.js modules including `scaleLinear` for the population scale, `scalePoint` for the categorical country axis, and `axisLeft` and `axisBottom` to render the chart’s axes. Population values are formatted using D3’s `format` function to abbreviate large numbers. Data is loaded from a CSV file, and the chart is rendered as SVG.

Scatter Plot H/W

Scatter Plot Test

This scatter plot visualizes the ten most populous countries, with population values plotted along the x-axis against a categorical y-axis of country names. Using D3.js, it employs `scaleLinear` for the population axis and `scalePoint` for the categorical positioning, with data loaded via `csv('data.csv')`. The chart’s grid lines extend across the plot from axis ticks, and labels are formatted to display billions. The source data is a custom CSV listing countries and their populations, rendered as an SVG with a circular mark for each country.

Customizing AxesTest

This bar chart displays the population of ten countries, ordered alphabetically, with horizontal bars scaled linearly to population size. Built with D3 v7, it uses `scaleBand` for categorical y-axes and `scaleLinear` for quantitative x-axes, formatting large numbers with the `format` function. The SVG renders axes with `axisLeft` and `axisBottom`, and the data comes from a CSV file parsed via `d3.csv`.