plchao

@plChao·9 public vizzes

Fork of Brushable Scatterplot

This fork of a brushable scatterplot presents a matrix of scatterplot cells for exploring the classic Iris flower dataset, using four measured traits (sepal and petal length and width). Each cell compares two traits, with points colored by species (setosa, versicolor, virginica) via a simple color map. Using D3 version 3, the code creates a grid of small multiples, with axes ticked and labeled, and implements linked brushing: dragging a rectangle within any cell highlights corresponding points across all other cells, dimming unselected ones. The brush interactions rely on `d3.svg.brush` and callback events, while data is loaded from a local `iris.csv`.

Oct 9, 2023

Loading thumbnail…

Fork of Correlation Matrix

Three side-by-side correlation matrices visualize relationships among physical measurements of abalone from the `abalone.csv` dataset. Each matrix combines numeric correlations in its lower-left triangle with scaled circles in the upper-right, using a diverging color scale from `chroma.scale` (or a D3 linear scale) to encode strength and direction. The code builds the matrices with `d3.scalePoint` for axes, `d3.axisTop` and `d3.axisLeft` for labels, and `d3.csv` to load data. Hover interactions highlight cells and show exact correlation values via a tooltip.

Oct 7, 2023

Loading thumbnail…

Iris visualize

This interactive scatterplot displays the classic Iris flower dataset, allowing users to compare any two of the four measured features—sepal length, sepal width, petal length, and petal width—by selecting them from dropdown menus. Each of the 150 flowers is rendered as a semi-transparent circle colored by species, with a legend identifying the three Iris classes. Built with React and D3 v5, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.extent` to compute scales, and `d3.axisBottom` and `d3.axisLeft` for the axes. A `change` event listener re-renders the plot whenever the axis selections change.

Oct 3, 2023

Loading thumbnail…

Iris visualize parallel coordinates

This example visualizes the Iris dataset using a parallel coordinates plot, displaying four continuous measurements (sepal length, sepal width, petal length, petal width) as parallel axes. Lines represent individual flowers, colored by species (blue, orange, green) with a legend. Interactive dropdowns let users reorder the axes, and the plot redraws accordingly using `d3.csv`, `d3.scaleLinear`, `d3.scalePoint`, `d3.line`, and `d3.axisLeft`, rendering as SVG via React.

Sep 30, 2023

Loading thumbnail…

Iris_Parallel_Coor_P

This interactive visualization presents the classic Iris dataset as a parallel coordinate plot, with each of the 150 flowers represented as a colored line traversing four parallel axes for sepal and petal lengths and widths. D3.js v6 constructs the chart using `scaleLinear`, `scalePoint`, and `line`, while the React dropdown library loads the dataset. The legend circles classify the three Iris species. Users can hover over any line to highlight all flowers of that class while dimming the others, revealing clustering patterns across the four dimensions.

Sep 30, 2023

Loading thumbnail…

pokemon map

This interactive map visualizes the locations of Pokémon species from the Paldea region, filtered by type and stat ranges. Users toggle type checkboxes and adjust HP sliders to display corresponding markers on a Leaflet map overlaid with a regional image. The visualization uses D3.js to load and filter CSV data, while Leaflet’s `L.marker` and `L.divIcon` create custom colored pins with popups showing species details. A second view links to alternative chart-based explorations.

Jan 10, 2023

Loading thumbnail…

pokemon map

This example overlays Pokémon sighting locations onto a Leaflet map of Taiwan using colored, diamond-shaped markers that encode each creature’s primary type. It loads a CSV of Pokédex entries via `d3.csv`, filters for a target species, and maps coordinates through Leaflet’s `L.marker` and `L.divIcon`. An OpenStreetMap tile layer and an image overlay provide geographic context, while a color dictionary maps type names to hex values for the custom HTML marker styles.

Jan 10, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub supports ES6 module imports and external library loading to render a simple static message. It uses D3 v5, imported via UNPKG from a CDN, to select the `#message` div and set its text. The text content comes from a local ES6 module, `myMessage.js`, which exports the string "Hello VizHub!". The page is styled with a CSS file, centering the message at a large font size.

Nov 11, 2022

Loading thumbnail…

Fork of D3 Starter

A minimal D3 starter page displays the text “Hello D3 version 7” centered in the browser body, with the title “Fork of D3 Starter” set in the HTML head. The example imports the `select` function from the d3 module in `index.js` and uses it to target the `body` element and set its text content. It loads D3 v7.6.1 from the unpkg CDN via a script tag, though the commented-out `bundle.js` suggests an optional build step. The page’s large 13em font size demonstrates basic text styling alongside the library’s simplest DOM selection and manipulation.

Oct 1, 2022