jeffchengtw

@jeffchengtw·5 public vizzes

Untitled

This parallel coordinates chart displays four measurements of iris flowers from the classic Iris dataset, with each line colored by species using a red-green-blue scale. The plotly.js library renders the interactive visualization, while d3.csv loads the remote CSV file and unpacks its columns. One dimension, sepal length, includes a constraint range restricting that axis to values between 5 and 6 centimeters, highlighting a subset of the data. The chart uses a plotly parcoords trace with specified ranges and padding, showing relationships among sepal and petal dimensions.

Oct 21, 2022

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis. Each circle represents a flower, colored by species: lightblue for setosa, lightpink for versicolor, and yellow for virginica. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, create scales, and render axes. The visualization also incorporates sepal measurements as radius properties, though the circles maintain a fixed radius of 5 pixels.

Sep 30, 2022

Loading thumbnail…

Fork of Data Visualization- Scatter Plot with Iris DataSet

This visualization shows a scatter plot of the Iris dataset, using different colors to distinguish the three species (setosa, versicolor, and virginica). It maps petal measurements to the x and y axes while additionally encoding sepal measurements as the rx and ry attributes of each circle, creating a hybrid scatter plot. The code loads the CSV data via `d3.csv`, uses `scaleLinear` for axis scaling, and renders SVG circles with `selectAll` and `join`. Axis labels are added as text, with the petal axis rotated using `transform`.

Sep 30, 2022

Loading thumbnail…

Lab01

This example visualizes the Iris dataset as a bar chart, mapping categorical plant species along the y-axis against numeric values from a simplified test CSV file. The SVG rendering uses D3 v7’s scaleLinear and scaleBand to position bars, with axisLeft providing the categorical labels. Data is loaded asynchronously via d3.csv, and the chart’s dimensions are derived directly from the SVG element’s width and height attributes.

Sep 28, 2022

Loading thumbnail…

Untitled

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It uses D3’s `scaleLinear` and `extent` to compute scales, and renders circles with `selection.join` for data binding. The visualization is built with React 18 and D3 7, where React manages the SVG container and a D3 function handles chart drawing. Axes are added via `axisBottom` and `axisLeft`, with SVG as the rendering output.

Sep 27, 2022