JunheZhang66

@JunheZhang66·4 public vizzes

Scatter Plot with Menus

This scatter plot visualizes car data from the UCI Auto MPG dataset, allowing users to interactively select which numeric columns map to the x- and y-axes via dropdown menus. The code uses d3.v5 with `scaleLinear`, `axisBottom`, and `axisLeft` to generate the axes, while a custom `dropdownMenu` module handles the selection UI. Data loading uses the `csv` function, and the rendering employs SVG with animated transitions on the circles, which are styled with red fill and opacity.

Jul 6, 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. Each red, semi-transparent circle represents a car, with axes labeled accordingly. Built with D3 v5, the visualization uses `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. Data is loaded via `csv` and parsed into numeric values, with a gridline effect achieved by custom tick sizes.

Jul 4, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, adjusting tick sizes, and formatting tick labels with abbreviations like "B" for billions. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs, rendering to SVG. Data is loaded from a CSV file and scaled in the code before being plotted as steel-blue rectangles.

Jun 29, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes by removing domain lines, styling tick labels, and adding axis titles with custom formatting, such as converting values to billions with the `format('.3s')` function. The visualization uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG, with data loaded from a local CSV file.

Jun 29, 2020