cbruml

@cbruml·3 public vizzes

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Each circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis, with grid lines and labeled axes for readability. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the scales and axes, while loading CSV data via the `csv` function. The SVG rendering applies a green, semi-transparent fill to the circles, with custom styling defined in CSS.

Jan 6, 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. The example showcases customized D3 axes, including a horizontal axis with tick labels formatted in abbreviated units (e.g., "B" for billion) and a vertical categorical axis stripped of its domain line and tick marks. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the SVG bars and customized axes, with data loaded from a CSV file.

Jan 6, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, using data from the 2018 United Nations World Population Prospects estimate. It demonstrates customized D3 axes: the y-axis removes domain lines and ticks for a cleaner look, while the x-axis formats population values with abbreviations (e.g., “B” for billions) and adds a descriptive axis label. The code uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format`, rendering as SVG.

Jan 6, 2020