Trista Lee

@ashuantw·6 public vizzes

Fork of Fork of Brushable Scatterplot

This brushable scatterplot matrix displays the classic Iris flower dataset, showing how four sepal and petal measurements relate to three iris species. Each cell in the grid plots one measurement pair, with points colored red, yellow, or blue by species. Users can drag a brush across any cell to highlight corresponding data points across all other scatterplots, with brushed points remaining colored while unselected points turn gray. The visualization uses D3 version 3 APIs including `d3.svg.brush()` for the interactive brushing, `d3.scale.linear()` for axes, and coordinates rendered as SVG circles.

Oct 13, 2023

Loading thumbnail…

HW1 Scatter Plots for Iris

This interactive scatter plot explores the Iris dataset, letting users compare any two of the four flower measurements via dropdown menus. The chart renders 150 species-classified points with a D3 transition that animates them from the center to their positions on the axes, which update smoothly with each selection. Using D3 v7 scales and axes, it draws an SVG with colored circles for each Iris class and includes a legend for identification. The visualization demonstrates the distribution and clustering of the three species across different feature combinations.

Sep 29, 2023

Loading thumbnail…

Fork of Iris parallel coordinate plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing how sepal and petal measurements vary across three species of iris flowers. Users can click and drag any vertical axis to reorder the axes, which instantly updates the polyline paths that trace each flower’s characteristics. The visualization is built with D3 v5, using `d3.scalePoint` and `d3.scaleLinear` for positioning, while `d3.drag` handles the interactive reordering with smooth transitions. Species are distinguished by color through custom path strokes, and axis labels plus a legend clarify the data.

Sep 29, 2023

Loading thumbnail…

Untitled

This example displays a scatterplot matrix of the Iris dataset, showing pairwise relationships between sepal length, sepal width, petal length, and petal width, with points colored by species. The visualization uses D3 v5 to render SVG circles and axes, and implements linked brushing through `d3.svg.brush`. Dragging a brush over any cell highlights matching points across all other cells, while a gray overlay indicates unselected data. The code loads the data via `d3.csv` and maps each trait’s domain to linear scales.

Sep 29, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 setup by rendering the text “Hello D3 version 7” in the center of the page. It uses the `select` API from D3 to target the `body` element and set its text content. The page loads D3 v7.8.5 from a CDN, and the main script imports the `select` function specifically. The styling applies an extremely large font size, though the data itself is static and hardcoded rather than loaded from an external source.

Sep 21, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows the classic “Hello World” of web development, displaying the text “Hello HTML!” centered on the page in large type. The styling uses the CSS `font-size` and `text-align` properties within a `<style>` block, while the message is placed directly in the HTML body. No external libraries or JavaScript APIs are used; the visualization is a static text element rendered by the browser’s default HTML and CSS rendering pipeline. The code demonstrates a minimal setup for a responsive page layout.

Sep 20, 2023