Junhao CHen

@JHaoC·3 public vizzes

D3 Course 11: Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between attributes of cars from the auto-mpg dataset by selecting different columns for the x- and y-axes via dropdown menus. The visualization is built with D3 v5, using a modular component pattern with separate functions for data loading, dropdown menus, and the scatter plot itself. The plot uses an SVG rendering with D3 scales and axes, and refactors the general update pattern to animate transitions smoothly when the selected axes change.

Apr 20, 2020

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to position bars and render axes. Axes are customized with tick removal and abbreviated population labels via `format('.3s')`. The data is loaded as CSV and rendered as SVG rectangles with a steelblue fill.

Apr 13, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 398 cars from the UCI Machine Learning Repository’s Auto MPG data set. The visualization uses d3.v5 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with tick marks, while circles are appended using `selectAll('circle').data().enter()`. The code manually parses CSV values with unary plus operators before rendering, and styles the plot with red, semi-transparent circles. Axis labels and a title are added as SVG text elements with custom font sizing.

Apr 11, 2020