addword527

@addword527·10 public vizzes

Menus

Two dropdown menus let a user select which columns of a CSV file to plot on a scatterplot’s x and y axes. The visualization is built with React, using d3’s `csv` loader and the `dropdownMenu` function to create the select elements. The SVG chart updates when either menu’s value changes, displaying transaction data from Taiwan’s real-estate records.

Jan 10, 2021

Loading thumbnail…

Fork of Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying the relationship between two user-selected measurements (sepal length/width or petal length/width) on the x- and y-axes. Colored circles represent the three Iris species (setosa, versicolor, virginica) using a categorical color scale. The D3.js code builds the chart with `scaleLinear` and `scaleOrdinal` for scaling, `axisLeft` and `axisBottom` for axes, and dropdown menus trigger redraws via event listeners. Data is loaded from a CSV file, and points are rendered as SVG circles.

Jan 4, 2021

Loading thumbnail…

HW1-iris.csv

This visualization displays the classic Iris dataset as a scatterplot, plotting one of four flower measurements (sepal or petal length/width) against another on each axis. The chart uses D3 v5 to render the SVG, with `d3.csv` fetching data from a GitHub-hosted CSV file, `d3.scaleLinear` handling axis scales, and `d3.scaleOrdinal` mapping flower species to distinct colors. A dropdown-menu interface (`<select>` elements in the HTML) lets users dynamically change which measurement appears on the x-axis or y-axis, triggering a full redraw of the plot.

Dec 30, 2020

Loading thumbnail…

React Starter

This example renders a single centered message, "Hello React!", using React and ReactDOM. It demonstrates a minimal React setup with two external library scripts loaded via CDN and a separate bundle.js file. The component is defined as a functional component and mounted into the root DOM element using ReactDOM.render. The styling relies on a CSS class applied directly to the div, with the font-size and alignment set in an inline style block within the HTML document.

Nov 9, 2020

Loading thumbnail…

node-link diagrams vs. adjacency matrix

The example contrasts node-link diagrams with adjacency matrices for a Dublin contact network of 410 nodes and links derived from a TSV dataset. A force-directed layout using `d3.forceSimulation` and `d3.forceLink` positions nodes, while the adjacency matrix renders as an SVG grid where cells are highlighted on node click via `d3.select` and stroke styling. Matrix rows and columns correspond to nodes, with row and column highlighting showing connections. The code employs D3 v6 selections, drag behavior, and the `schemeCategory10` color scale for group encoding.

Nov 9, 2020

Loading thumbnail…

React Starter

A minimal React application renders the text “Hello React!” in large, centered typography. The example demonstrates the basic structure of a React project, using `ReactDOM.render` to mount a functional component into the DOM. It loads React and React-DOM from UMD builds via CDN, with the component defined in `index.js` and bundled into `bundle.js`. The styling is provided through a simple CSS class in the HTML file. No data visualization or dynamic behavior is present.

Nov 9, 2020

Loading thumbnail…

hw2

This interactive parallel coordinates plot visualizes the Iris dataset, showing each sample as a polyline connecting four dimensions (sepal/petal length and width) across vertical axes. The tool uses D3 v5's `scalePoint` for axis layout, `scaleLinear` for y-scaling, and `drag` API to allow users to reorder dimensions by dragging axis labels, which dynamically rearranges the paths via the `position` function. Lines are colored by iris species using `scaleOrdinal` with `schemeCategory10`, while SVG text and styled legend swatches indicate the three classes. The data loads from a remote CSV URL and renders as an SVG scene.

Oct 22, 2020

Loading thumbnail…

hw2

This interactive parallel coordinates plot uses the classic Iris dataset, displaying each flower as a polyline across four quantitative dimensions (sepal length/width and petal length/width with a fixed 0–8 scale). Each species is color-coded via a D3 ordinal scale. Users can drag axis labels to reorder dimensions, and brush any axis to filter foreground lines. Built with D3 v3, it uses SVG paths for rendering, with animation for smooth transitions during axis reordering.

Oct 22, 2020

Loading thumbnail…

Iris Parallel Coordinate Plots

The Iris Parallel Coordinate Plots visualize the classic Iris dataset, with each flower sample drawn as a polyline across four measured attributes. Species are distinguished by color: orange for setosa, blue for versicolor, and green for virginica. The visualization uses D3.js v3 with SVG rendering, featuring interactive axis dragging to reorder dimensions. The code leverages D3's ordinal scale for categorical colors, linear scales for numerical axes, and the `d3.behavior.drag` API to enable axis repositioning. Background polylines appear in light gray for context, while foreground lines are colored by class.

Oct 20, 2020

Loading thumbnail…

Iris Parallel Corrdinate Plots

This example displays the classic Iris dataset in a parallel coordinate plot, with each of the four floral measurements mapped to vertical axes and individual flowers drawn as colored polylines—red for setosa, green for versicolor, and blue for virginica. The visualization uses D3 v5 with SVG rendering, employing `d3.scalePoint` for horizontal axis placement and `d3.scaleLinear` for vertical scaling. Users can drag any axis horizontally via `d3.drag` to reorder dimensions and explore correlations between variables. Data comes from the bundled `iris.csv` file, and the code also renders axis labels and a legend.

Oct 17, 2020