Ethan-Wu-juniper

@Ethan-Wu-juniper·4 public vizzes

Fork of Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Machine Learning Repository's Auto MPG data set, displaying relationships between attributes such as horsepower, weight, and acceleration. Users select which columns map to the X and Y axes via dropdown menus, triggering a re-render of the visualization. The plot uses d3's `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and a custom `scatterPlot` module with animated transitions via `transition().duration(2000)`. SVG circles represent individual cars, with axes and labels rendered using d3's `axisBottom` and `axisLeft` APIs.

Oct 11, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

Two dropdown menus let the user select which columns of the Auto MPG dataset map to the X and Y axes of a scatter plot, with each point representing a car. As the selection changes, the axes, labels, and circles update with a smooth 2-second transition animation. The visualization is built with D3 v5, using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes, and a reusable `dropdownMenu` function to generate the HTML select elements. Data loads from a CSV file containing car specifications like horsepower, weight, and acceleration.

Sep 25, 2022

Loading thumbnail…

Fork of Bowl of Fruit - General Update Pattern Special Cases

Five apples render in an SVG bowl, then a visual sequence removes one apple, changes another to a lemon, and deletes a third, demonstrating D3’s general update pattern with enter, update, and exit selections. Using d3.select, selection.merge, and ordinal scales for color and radius, the code binds fruit data to groups and updates circles and text via render calls on timed intervals.

Sep 23, 2022

Loading thumbnail…

Fork of Cars Scatter Plot

This fork of the cars scatter plot visualizes the relationship between horsepower and weight using data from the UCI Machine Learning Repository’s Auto MPG dataset. Each red, semi-transparent circle represents a car, positioned by its horsepower and weight values, with axes labeled accordingly. The code uses d3.csv to load the data, d3.scaleLinear for both scales, and d3.axisLeft and d3.axisBottom to render the axes with gridlines. The SVG canvas is 960 by 500 pixels, with a 60-pixel top margin for the title and a 150-pixel left margin for the y-axis label.

Sep 19, 2022