richartothman@gmail.com

@richartothman·5 public vizzes

Fork of Cars Scatter Plot

This scatter plot displays earthquake records from the UCI Machine Learning Repository’s Auto MPG Data Set, plotting year on the x-axis against earthquake magnitude on the y-axis. Each semi-transparent circle represents a single earthquake event. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render the axis ticks with gridlines. The code applies SVG rendering, with margins and axis labels styled via external CSS.

Jan 1, 2024

Loading thumbnail…

109550199 Iris Parallel Coordinate

This visualization displays the classic Iris dataset as an interactive parallel coordinate plot, with each of the 150 flowers represented by a semi-transparent line connecting four morphological measurements. The three species (setosa, versicolor, and virginica) are distinguished by a categorical color scale. Built with D3 v5, the axes are draggable, allowing users to reorder dimensions and explore cluster separations. The implementation uses `d3.scaleLinear`, `d3.scalePoint`, and `d3.drag` to handle axis repositioning and update the `svg` paths accordingly.

Oct 2, 2023

Loading thumbnail…

HW2 Trial

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal length and width. Users can select which measurements appear on the x- and y-axes via dropdown menus, and the points are colored by species (setosa, versicolor, or virginica). The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` for scales and axes. Data is loaded from a CSV file using `d3.csv`, and the plot updates dynamically when the axis selections change.

Oct 1, 2023

Loading thumbnail…

Fork of Fork of Cars Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal dimensions for three species of iris flowers. Users can select which measurement to display on each axis using the dropdown menus, and the plot updates accordingly. Points are color-coded by species using a d3.scaleOrdinal with a viridis color palette. The visualization is built with D3 v5, using d3.csv, scaleLinear, axisBottom, and axisLeft to render the SVG scatter plot with axes, gridlines, and labels.

Sep 29, 2023

Loading thumbnail…

Making a Barchart

This example shows a horizontal bar chart ranking ten countries by population, with the longest bar representing China and the shortest representing Mexico. The bars are rendered as SVG rectangles, with widths proportional to population values read from a local CSV file and scaled using `d3.scaleLinear`. Country names are positioned along the vertical axis using `d3.scaleBand` for categorical spacing. The code loads data with `d3.csv`, converts population strings to numbers, and appends rectangles via `selectAll` and `enter`. The chart uses D3 v5.

Sep 23, 2023