MeAzuree

@MeAzuree·4 public vizzes

Untitled

This visualization uses a parallel coordinate plot to explore the Abalone dataset, displaying individual samples as polylines across multiple quantitative axes. The SVG rendering shows data points from three sex categories—male, female, and infant—with the code splitting the raw CSV data into separate arrays for each group before calling a render function. The visualization relies on d3.text to load the dataset and d3.v7 for chart construction, though the specific axis and line encoding parameters are not fully defined in the provided files.

Oct 3, 2023

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of the classic Iris parallel coordinate plot visualizes four morphological traits of iris flowers across three species, with each line color-coded by species. Users can drag the vertical axes to reorder dimensions and toggle between two y-axis scaling modes: a fixed union range shared across all traits, or a per-axis self range based on each attribute's extent. Built with D3 v5, the visualization uses SVG paths for polylines, d3-drag for interactive axis manipulation, and d3.scalePoint with d3.scaleLinear to map traits and measurements. Data comes from the iris.csv dataset.

Sep 27, 2023

Loading thumbnail…

Parallel Coordinate Plot

This parallel coordinate plot displays the Iris dataset, with each of the four measured attributes (sepal length, sepal width, petal length, and petal width) mapped to a vertical axis. The code uses React state to manage the attributes assigned to each axis, with interactive dropdown menus allowing users to change the dimensions displayed. D3 v7 utilities like `scaleLinear` and `scaleOrdinal` handle the scaling and species-based color mapping, while SVG `<path>` elements render the polylines connecting data points across axes. Hovering over the color legend filters the displayed lines to the selected iris species.

Sep 26, 2023

Loading thumbnail…

Scatter Plots

This interactive scatter plot visualizes the relationship between a vehicle’s miles per gallon and its horsepower, with each dot colored by country of origin and sized by weight. The visualization is built using the Vega-Lite API, which programmatically constructs the chart specification by chaining methods like `vl.x().fieldQ('mpg')` and `vl.color().fieldN('origin')`. Data is loaded asynchronously from the UCI Auto MPG dataset using the `csv` function from d3. The chart fills the browser window and includes tooltips, which are enabled through the Vega-Tooltip handler.

Sep 20, 2023