Skip to main content
Log in
E

evonne0930.cs11@nycu.edu.tw

@moonymercury·5 public vizzes

Loading thumbnail…

Fork of Iris Parallel Coordinate Plot

This fork of the classic Iris parallel coordinate plot visualizes four flower measurements—sepal length, sepal width, petal length, and petal width—with colored lines for the three Iris species. Users can drag any axis to reorder the dimensions, which dynamically rearranges the paths and updates the axis positions. The code uses D3 v5 with `d3.scalePoint`, `d3.scaleLinear`, `d3.axisLeft`, `d3.line`, and `d3.drag` to render SVG paths and handle interactive reordering with smooth transitions. The data comes from the bundled `iris.csv` dataset, with species distinguished by color.

Sep 21, 2024
Loading thumbnail…

Scatter Plot of Iris

This interactive scatter plot visualizes the classic Iris dataset, showing measurements of sepal length, sepal width, petal length, and petal width for three species of iris flowers. Users can dynamically select which measurement appears on the x-axis and y-axis using dropdown menus, with each species color-coded via a categorical ordinal scale. Built with D3 v5, the visualization uses `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. The plot includes labeled axes and a title, with data loaded from a CSV file using `d3.csv`.

Sep 15, 2024
Loading thumbnail…

Fork of Scatter Plot

This fork of a scatter plot displays the top ten most populous countries using a circular point for each nation, with population on the x-axis and country names on the y-axis. The code loads population data from a CSV file using `d3.csv`, scales the values with `scaleLinear` and `scalePoint`, and renders an SVG via D3 v5. It uses `axisLeft` and `axisBottom` to draw gridlines, custom tick formatting to abbreviate large numbers, and assigns each circle a color from a rotating palette.

Sep 15, 2024
Loading thumbnail…

Fork of Fork of Scatterplot for peng bird dataset

This interactive scatter plot visualizes the Palmer Penguins dataset, mapping flipper length on the x-axis and body mass on the y-axis for three penguin species, each colored distinctly. It uses d3.csv for data loading, d3.scaleLinear for axes, and d3.axisLeft and d3.axisBottom to render scales. Circles represent individual penguins, with the SVG rendered directly in the browser using d3.select and join operations. The visualization also includes custom axis labels and a title, with data sourced from a GitHub-hosted CSV file.

Sep 12, 2024
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot visualizes the Penguins Dataset, showing the relationship between bill length and flipper length across individual penguin specimens. The visualization uses D3.js to render circles scaled through `scaleLinear` and positioned on Cartesian axes, with axis labels added via the `@curran/axis-labels` package. The implementation separates layout configuration from rendering through a reusable `viz` function that handles axis generation, inner rectangle fill, and circle opacity. Data is loaded from `@curran/penguins`, mapping specific dataset fields to x and y coordinates.

Sep 12, 2024