ravencyan

@ravencyan·3 public vizzes

0816043_HW2

This example uses D3 v5 to create an interactive parallel coordinate plot of the Iris dataset, visualizing four flower measurements (sepal length, sepal width, petal length, petal width) as polylines colored by species. Users can drag the vertical axes to reorder them, with a d3.drag handler updating the line paths and axis positions in real time. The code renders with SVG, animates transitions via transition.attr, and includes a legend for the three Iris species. The linear scale for the y-axis and point scale for the x-axis are defined using d3.scaleLinear and d3.scalePoint.

Oct 16, 2022

Loading thumbnail…

HW2_old

This example shows an interactive parallel coordinate plot of the Iris dataset, where users can reorder the four displayed axes (sepal length/width, petal length/width) via dropdown menus. Each of the 150 flowers is drawn as a semi-transparent polylined path, colored by species (setosa, versicolor, virginica). The visualization uses React and D3 v5, employing `scalePoint` for axis positioning, `scaleLinear` for value mapping, and `axisLeft` to render tick marks. A static legend distinguishes the three species, while SVG rendering handles all drawing.

Oct 15, 2022

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, encoding each observation as a colored circle based on its species. Dropdown menus allow viewers to switch which flower measurements appear on the x- and y-axes. The React component uses `useState` to manage axis selections, while D3 v5 functions like `scaleLinear`, `scaleOrdinal`, and `extent` handle scaling and domains. Axes are drawn as SVG elements in separate `AxisBottom` and `AxisLeft` components, and `Marks` renders the circles with tooltips, all styled with a Poppins font.

Oct 2, 2022