vntchang@gmail.com

@niuee·2 public vizzes

Parallel Plot

This parallel plot visualizes the Iris dataset, showing relationships between four flower measurements (sepal length, sepal width, petal length, petal width) using semi-transparent colored polylines to distinguish the three Iris species. Each vertical axis represents a measurement dimension scaled independently with `scaleLinear`, while `scalePoint` positions the axes horizontally. The visualization uses d3's `line` function to generate SVG paths for each data point. Users can drag draggable attribute labels below the plot to reorder the axes, dynamically reorganizing the visualization through mouse event handlers and DOM manipulation.

Oct 2, 2023

Loading thumbnail…

Fork of Fork of Scatter Plot

This example displays the Fisher Iris dataset as a scatter plot using D3 version 7. The visualization, rendered as an SVG, plots sepal length against petal length, with each data point drawn as a red, semi-transparent circle. The code uses D3's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` functions to build the coordinate system and axes. Although the HTML includes a dropdown for selecting an X-axis attribute, the JavaScript currently does not implement any interactive behavior, instead rendering a static plot with axis labels and a title.

Sep 22, 2023