Daniel0710

@Daniel0710·3 public vizzes

Iris Parallel Coordinate Plot

The Iris Parallel Coordinate Plot visualizes four numeric measurements—sepal length, sepal width, petal length, and petal width—for three iris species, with each polyline colored by class. Users can drag any vertical axis horizontally to reorder dimensions, which dynamically updates the paths and axis positions via d3.drag and transitions. The visualization uses d3.csv to load the Iris dataset, d3.scalePoint and d3.scaleLinear for axes, and renders with SVG paths and circles, including a legend showing the species-to-color mapping.

Oct 23, 2020

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris flower dataset, encoding four measurements (sepal and petal length/width) on the x- and y-axes. Users select the axes from dropdown menus, which re-renders the plot. The visualization distinguishes the three Iris species by color and includes a legend. Built with D3 v5, the example uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the chart, and renders all elements as SVG, including the axes, axis labels, title, and data points.

Oct 23, 2020

Loading thumbnail…

heytgggg

This scatter plot shows the relationship between horsepower and weight for cars, using data from the UCI Machine Learning Repository's Auto MPG dataset. The plot renders red, semi-transparent circles positioned by linear scales for both axes. The visualization is built with D3 v5, using `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to create the SVG chart. Axis labels and a title are added as text elements, with styling defined in the accompanying CSS file.

Oct 4, 2020