nanegole

@nanegole·12 public vizzes

Untitled

A ThemeRiver visualization displays changes in Massachusetts home sale prices over time, stacked into flowing streams by bedroom count. The chart uses D3 v6 to load CSV data, transforms it via the `d3.stack` generator, and renders smooth SVG areas with `d3.area` and `curveBasis`. Time and price scales map dates to the x-axis and cumulative price ranges to the y-axis, while each stream is colored by housing category.

Nov 4, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message using a plain HTML page. It relies solely on standard web technologies, with CSS styling controlling font size and alignment, and no JavaScript logic beyond the document structure. The page is a minimal demonstration of embedding styles directly in the `<head>` section and applying them to a styled `<div>` element. It serves as a basic, static visualization of text rendering, requiring no external libraries or data sources.

Nov 4, 2023

Loading thumbnail…

Fork of HTML Starter

This example renders a single centered message, “Hello HTML!”, in large type using a CSS class that sets the font size to 13em and aligns the text. It demonstrates a minimal HTML page that combines an embedded `<style>` block for presentation and plain HTML markup for content, with no external libraries or JavaScript logic. The page relies entirely on CSS for styling and does not include any data-driven visualization or interactive behavior.

Nov 4, 2023

Loading thumbnail…

Fork of Fork of Stack Chart Template

This example displays stacked bar charts of mortality data by cause across age groups for South African women in 2013, drawn from WHO data. Users can toggle between raw death counts and percentage distributions via radio buttons, triggering smooth transitions between views. The visualization uses D3.js v3’s `d3.layout.stack`, ordinal and linear scales, SVG axes, and CSS transitions for interactive updates.

Oct 22, 2023

Loading thumbnail…

Fork of Fork of HW04-Brushable Scatter Plot Matrix

This is a brushable scatter plot matrix of the Iris dataset, showing pairwise relationships among sepal length, sepal width, petal length, and petal width. The matrix uses colored circles to distinguish the three Iris species. Diagonal cells display histograms of each trait, while off-diagonal cells show scatter plots with axes. The visualization uses D3 v4 with linear scales, axes, and brushing to enable interactive exploration. Data is loaded from a CSV file and rendered as SVG elements.

Oct 16, 2023

Loading thumbnail…

Fork of HW04-Brushable Scatter Plot Matrix

This example is a brushable scatter plot matrix of the Iris dataset, showing pairwise relationships between sepal and petal measurements with points colored by species. The matrix features histograms along the diagonal and scatter plots in off-diagonal cells, where users can brush to highlight selections across all panels. Built with D3 v4 and SVG, it uses `d3.brush()` for interactive brushing, `d3.scaleLinear` and `d3.scalePoint` for positioning, and `d3.histogram()` to bin data for the diagonal distributions. The visualization is derived from the classic brushable scatter plot matrix example, adapted to include per-cell axes and histograms.

Oct 16, 2023

Loading thumbnail…

Fork of Brushable scattered plot

A brushable scatter plot matrix of the classic Iris flower dataset, rendered in SVG with D3 v7. The four measured features are paired across all combinations, showing categorical color-coded points for the three species. Brushing a region in any scatter plot filters the data across the entire matrix, updating the diagonal histograms to reflect the selected subset with species-specific stacked colors. The visualization uses `d3.scalePoint`, `d3.scaleLinear`, and `d3.brush` to coordinate interactions.

Oct 16, 2023

Loading thumbnail…

Fork of HW04-Brushable Scatter Plot Matrix

Oct 14, 2023

Loading thumbnail…

hw3

This visualization displays a correlation matrix for the Abalone dataset, split into three separate heatmaps for the male, female, and infant abalone subsets. Each cell shows the correlation coefficient between two attributes, color-coded from red (negative) to blue (positive), with the numeric value overlaid. Hovering over a cell highlights it and displays the specific attribute pair in the text area below. The code uses D3 v5 with SVG rendering, leveraging `d3.scaleLinear` for color mapping and the `jz.arr.correlationMatrix` function from the jeezy library to compute correlations. The data is loaded from the `abalone.data` file.

Oct 9, 2023

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of the Iris parallel coordinate plot visualizes the classic Iris dataset across four measured attributes: sepal length, sepal width, petal length, and petal width. Each of the 150 samples is drawn as a colored line, with distinct colors assigned to the three Iris species. Users can drag any axis to reorder the attribute columns, and the lines and axes animate smoothly to their new positions using d3’s drag behavior and transitions. The visualization is rendered as SVG, with axes generated via d3.axisLeft and lines constructed using the d3.line generator.

Oct 2, 2023

Loading thumbnail…

Fork of Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing measurements of sepal and petal length and width for three flower species. Each polyline traces one flower across four vertical axes, colored by species classification. Users can reassign any of the four displayed attributes via dropdown menus using React state, while hovering over the color legend filters lines by species. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for axes and colors, and d3.line to render the paths in SVG.

Oct 2, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. The visualization includes dropdown menus that allow users to dynamically select which data columns are mapped to the X and Y axes, with the plot updating through D3 transitions. The code uses `d3.csv` to load the data, `scaleLinear` for axis scaling, and `axisBottom`/`axisLeft` for rendering axes. A D3 ordinal color scale distinguishes the species, with a legend showing the categorical mapping. The visualization is built with D3 v5, rendering SVG elements with animated circle transitions.

Oct 1, 2023