Skip to main content
Log in
S

sb15jr@student.aau.dk

@boletteeh·4 public vizzes

Loading thumbnail…

Tutorial 3

This interactive scatter plot visualizes the Iris dataset, displaying measurements like sepal and petal length and width. Users can switch the X and Y axes between these numeric attributes via dropdown menus. The plot uses React for the user interface and D3 scales and axes for rendering, with SVG circles for data points and tooltips. The Iris dataset is loaded from a CSV file via D3's `csv` function.

May 5, 2024
Loading thumbnail…

Wine quality

This interactive scatter plot explores the chemical attributes of white wine samples from a dataset of wine quality. Users select any two attributes via dropdown menus to visualize their relationship, with axis labels updating dynamically and points rendered as circles. The visualization uses D3.js for scales and CSV parsing, React for state management and UI components, and SVG for rendering. The data comes from a GitHub-hosted CSV file of wine quality measurements.

May 5, 2024
Loading thumbnail…

Tutorial 2

This interactive scatter plot visualizes the Iris dataset, letting users explore the relationships between sepal and petal measurements and species. Dropdown menus filter which attributes appear on the x- and y-axes. Built with React and D3.js v5, it uses `scaleLinear` for axes and CSV data fetched via `d3.csv`. Hovering over a point reveals its x-axis value via a tooltip. The visualization is rendered as an SVG, with axes and data marks created through custom React components.

May 5, 2024
Loading thumbnail…

Fork of Stylized Bar Chart

This fork of a stylized bar chart visualizes the Iris dataset as a scatterplot, plotting petal length against sepal width as circles with tooltips on hover. The React and D3 v5 code uses `scaleLinear`, `extent`, and `format` from d3 to handle scales and tick labels, while custom `AxisBottom`, `AxisLeft`, and `Marks` components render the SVG axes and data points. Data is loaded asynchronously via `csv` from a GitHub gist, with styling applied through Poppins fonts and CSS classes.

May 5, 2024