lzb1003

@lzb1003·6 public vizzes

snazzy scatter plot: w/ color legend

A scatter plot of the Iris dataset displays sepal and petal measurements, with points colored by species. The visualization uses interactive dropdown menus to select which measurement appears on each axis. Built with React and D3 v6, it renders SVG circles, axes, and a categorical color legend. Data is loaded from a CSV file, and the color scale uses distinct semi-transparent hues for each species.

Dec 17, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

Two dropdown menus control which numeric attributes of the wine quality dataset are plotted on the x- and y-axes. The scatter plot uses React for the interface, with d3.scaleLinear for axes, d3.extent for domains, and SVG circles for marks. Each circle includes a native `<title>` tooltip, while the menus are built with ReactDropdown. The data loads asynchronously via d3.csv.

Dec 17, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, allowing users to compare any two measured attributes (sepal length, sepal width, petal length, petal width, or species) through interactive dropdown menus that control the x- and y-axes. The SVG rendering uses React components for the axes and marks, with D3’s `scaleLinear` and `extent` functions computing the plot scales. Data is loaded asynchronously from a CSV file via `d3.csv`, with axis labels and tick formatting provided by D3’s `format` helper.

Dec 17, 2020

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes automobile data from the UCI Machine Learning Repository's Auto MPG dataset, displaying the relationship between miles per gallon (mpg) on the x-axis and vehicle weight on the y-axis. The visualization employs D3.js v5 to create an SVG-based scatter plot, with each point representing a car model. The code uses `csv()` for data loading, `scaleLinear()` for both axes, and `axisBottom()` and `axisLeft()` for tick generation. The implementation includes a button interface using `buttonAction` to potentially filter data, though the current rendering displays all vehicles as red, semi-transparent circles with a title labeled "Iris Scatter Plot."

Dec 17, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between free sulfur dioxide and total sulfur dioxide in red wine samples from the UCI Machine Learning Repository’s Wine Quality dataset. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render axes with gridlines and red circles as data points. The SVG chart is generated from a CSV file loaded via `d3.csv`, with axes labeled “density” and “pH,” though the title indicates horsepower versus weight. Data fields are converted to numeric values before rendering.

Dec 16, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Red semi-transparent circles represent individual vehicles, with axes labeled and scaled using d3.scaleLinear and d3.extent for domain calculation. The visualization renders as SVG, using D3 v5 selection methods like d3.select and d3.csv for data loading, along with axisBottom and axisLeft for tick marks and gridlines. Circle radius is fixed at 10 pixels, while margins and axis labels are styled via CSS.

Dec 16, 2020