Cars Scatter Plot with Menu

Cars Scatter Plot

A scatter plot maps car data from the UCI Auto MPG dataset, plotting year against suicide counts per country. The visualization renders red, semi-transparent circles within an SVG, using scales and axes from D3 v5. It employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for ticks and grid lines, and formats data with `format`. The code reads from a CSV containing suicide and population statistics for Canada, France, and Germany, though the title and labels focus on the suicide trend.

85% match

World Suicides Scatter Plot with Menus

This interactive scatter plot explores global suicide rates, allowing users to select which categorical or quantitative attributes to map to the x- and y-axes via dropdown menus. The visualization uses the D3.js v6 library, employing `selection.join` for smooth enter, update, and exit transitions when attributes change. Data is loaded as CSV from a GitHub gist and rendered into an SVG, with circles animated between positions over a one-second transition. The chart also dynamically switches between `scalePoint` for categorical data and `scaleLinear` for quantitative data, updating the corresponding axes.

AAndre J Denais

84% match

Cars Scatter Plot with Menu

This interactive scatter plot visualizes car data from the UCI Auto MPG dataset, with points colored by country of origin (USA, Japan, Germany). Users select which numeric columns to plot on the x and y axes via dropdown menus, and can click the color legend to highlight or dim points by origin. Built with D3 v5, it uses `scaleLinear` for axes, `axisLeft`/`axisBottom` for grid lines, and SVG rendering with hover tooltips showing car names.

BBaodi

83% match

Cars Scatter Plot

This scatter plot displays suicide rates over time for Canada, France, and Germany, with each circle representing a yearly observation for a specific country and gender. The data originates from the UCI Machine Learning Repository. Using D3 v5, the visualization employs `scaleLinear` for both axes, `axisBottom` and `axisLeft` for gridlines, and SVG circles with red fill to depict the relationship between year and suicides per 1000 people, sourced from a CSV file.

Scatter Plot with Menus

This interactive scatter plot lets users explore the Suicide Rates Dataset, sourced from a public GitHub gist, by selecting different numerical attributes for both the x- and y-axes using ReactDropdown menus. The visualization renders points as SVG circles with tooltips, and axes are built with custom React components using d3.scaleLinear and d3.extent for scaling. Users can compare relationships between variables such as suicide counts, GDP, year, and per-capita GDP.

Mmnalk

Cars Scatter Plot with Menu

This scatter plot visualizes car data from the UCI Auto MPG dataset, with each circle representing a car. Users can select which numerical columns to compare on the x and y axes using dropdown menus, and can click the color legend to highlight cars from the USA, Japan, or Germany. Built with D3 v5, the visualization uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and custom `dropdownMenu` and `colorLegend` modules to render the interactive SVG chart.

BBaodi

Cars Scatter Plot with Menu

This scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, displaying cars as circles colored by country of origin (USA, Japan, Germany) with hover tooltips showing car names. Users can compare any two numerical attributes (mpg, cylinders, displacement, horsepower, weight, acceleration) via two dropdown menus. Clicking the color legend filters the data by origin, changing circle opacity to highlight selected countries. The visualization uses D3 v5 with scales (scaleLinear, scaleOrdinal), axes (axisLeft, axisBottom), and custom reusable components for the dropdown menu and interactive legend, rendered as SVG.

Cars Scatter Plot with Menu