Hugo-Dominguez

@Hugo-Dominguez·7 public vizzes

Parallel Coordinate Plot

A parallel coordinate plot displays 40 leaf specimens across 14 numeric traits, with each specimen drawn as a stroked path. Users can drag axis labels to reorder the dimensions, and the paths and axes animate smoothly during reordering. The visualization uses D3 v5 with SVG rendering, relying on `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.drag` to handle interactivity. Data comes from a CSV file that includes leaf shape and texture measurements.

Jan 16, 2021

Loading thumbnail…

Forked

This example uses a scatterplot matrix to compare four leaf trait measurements—Solidity, StochasticConvexity, AspectRatio, and Elongation—across different leaf classes. It constructs multiple small multiples, each visualizing the relationship between two traits from the provided `data.csv` dataset. The code loads the data with `d3.csv`, creates scales with `scaleLinear`, and appends axes using `axisBottom` and `axisLeft`. Circles represent individual specimens, and the SVG layout dynamically positions each cell based on its row and column.

Jan 15, 2021

Loading thumbnail…

Untitled

A histogram displays the distribution of a dataset of numeric values, with bars colored on a gradient from light to dark steelblue based on frequency. A black kernel density estimation curve overlays the bars, and users can adjust both the number of histogram bins and the bandwidth of the Gaussian kernel via range sliders, triggering smooth transitions. The visualization is built with D3 v4, using `d3.histogram`, `d3.layout.histogram`, `d3.scale.linear`, and SVG rendering, with the density curve computed via a custom `kernelDensityEstimator` and drawn using `d3.line` with `d3.curveBasis`.

Jan 15, 2021

Loading thumbnail…

Fork of Fork of Parallel Coordinates

This example shows a parallel coordinates plot of leaf measurements from a CSV dataset, with each row representing a specimen and each vertical axis a feature such as eccentricity, aspect ratio, and solidity. Lines are colored by leaf class, with a legend distinguishing three classes in blue, yellow, and red. The visualization uses D3 v4 with SVG and animation, building scales via `d3.scalePoint` and `d3.scale.linear`, rendering paths with `d3.line`, and supporting interactive dragging of axes through `d3.behavior.drag`. Brushing is applied to the background paths for context, while foreground paths highlight selected data.

Jan 14, 2021

Loading thumbnail…

Fork of Parallel Coordinates

A fork of the classic parallel coordinates example displays leaf shape measurements from a CSV dataset across multiple numeric axes, with each of the three leaf classes drawn as a colored line (blue, yellow, red) and a legend identifying the classes. Users can drag axis labels to reorder dimensions, triggering animated transitions of the polylines. The visualization is built with D3 v3 using `d3.svg.line` for the paths, `d3.svg.axis`, ordinal and linear scales, and `d3.behavior.drag` for interactive axis reordering. A legend, rendered manually with SVG circles and text, indicates the class colors.

Jan 14, 2021

Loading thumbnail…

Fork of Forked

A scatterplot displays population figures for the top 10 most populous countries, with each circle’s horizontal position encoding population magnitude and vertical position mapping country names. The chart uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scalePoint for the y-axis, and d3.axisBottom/d3.axisLeft with tick formatting to convert billions to abbreviated labels. SVG circles are rendered with a steelblue fill, and grid lines extend across the plot area.

Jan 13, 2021

Loading thumbnail…

Forked

This visualization displays automobile data as a scatterplot of displacement against horsepower, with tooltips revealing each car’s name. Built with Vega-Lite and the vega-lite-api, it loads the auto-mpg dataset via D3’s `csv` function. The chart uses point marks with full opacity, scales with zero disabled, and applies custom axis and label styling from a shared config.

Jan 13, 2021