Fork of NASCAR Scatterplot With Dropdown, Filter

100%

Fork of NASCAR Scatterplot With Dropdown, Filter

✓ Published0🌍 Public

Last edited Aug 4, 2022

Created on Aug 4, 2022

Forked from NASCAR Scatterplot With Dropdown, Filter

A NASCAR scatterplot displays race winners by starting position or other selectable statistics across years, with each point colored by track name. A dropdown menu switches between metrics like payout, caution flags, lead changes, and winning time. Hovering over the legend highlights all points for a specific track while fading others. The visualization uses React with D3 scales (scaleTime, scaleLinear, scaleOrdinal) for axes and coloring, rendering SVG circles, and loads data from a CSV file.

AI-generated description

This scatterplot is an expansion on a previous viz I created that shows NASCAR winners by starting position, split by year. This plot colors the points by the track name, adds a dropdown and a legend. The dropdown allows for the selection of different statistics pertaining to the race winners. In addition, hover capability has been added so that hovering over a track in the legend will highlight all of the dots pertaining to that track. These edits will provide the viewer with an opportunity to look for patterns among tracks and track types, and among several different variables. This data comes from a rendition of the NASCAR dataset, which spans from 1975 to 2003.

MIT Licensed

Similar vizzes

Loading thumbnail…

NASCAR Scatterplot With Dropdown, Filter

This interactive scatterplot displays NASCAR race winner statistics from 1975 to 2003, plotting year on the x-axis against a user-selectable y-axis metric, including starting position, payout, caution flags, lead changes, and winning time. A dropdown menu from ReactDropdown enables switching between these attributes, while points are colored by track name using a d3.scaleOrdinal color scale. Hovering over the color legend highlights data points for a selected track and fades others to 12% opacity. The visualization uses d3.scaleTime and d3.scaleLinear scales, renders SVG circles via React components, and loads CSV data with d3.csv.

RRobert Johnson

94% match

Loading thumbnail…

NASCAR Winners Plot with Menu

This interactive scatter plot displays NASCAR race statistics, comparing race years against selectable metrics such as start position, payout, track length, or caution flags. A dropdown menu updates the y-axis attribute dynamically, while circle color encodes track name and size encodes race length. Built with React and D3 v5, it uses scaleLinear, scaleOrdinal, and CSV-loaded race data with SVG rendering for marks and axes.

RRobert Johnson

89% match

Loading thumbnail…

Fork of NASCAR Statistics Dashboard

This dashboard displays NASCAR race statistics across multiple coordinated views, including a stacked bar chart, scatter plot, simple bar chart, and legend of race tracks. The interface uses React with SVG rendering via D3 v6, loading race winner data from a CSV file using the `csv` function. The implementation includes custom React components for axes, color legends with hover interactions, and dropdown menus for filtering, with a flexbox layout organizing the visualization panels.

CCurran Kelleher

87% match

Loading thumbnail…

Fork of Fork of Fork of NASCAR Statistics Dashboard

This dashboard presents a grid of six panels showing NASCAR race statistics, with distinct colored sections for a scatter plot, stacked bar chart, map, and simple bar chart. The visualization uses React to compose the layout and relies on reusable D3.js components for SVG axes, legends, and data marks. The ColorLegend module displays a static list of racing tracks with color swatches and labels, while other panels are initialized as empty containers. The dashboard imports a CSV dataset of race winners, which is prepared with type conversions for numerical fields like Payout and Caution Flags.

Ccolbygogan

86% match

Loading thumbnail…

AIT684 Fork of Fork of NASCAR Statistics Dashboard

This dashboard presents NASCAR race statistics in a multi-view React layout with separate panels for a stacked bar chart, map, simple bars, scatter plot, color legend, and car maker finishes. Each panel is color-coded for visual distinction. The scatter plot uses D3 scales and SVG circles to plot race data, while the color legend displays track names with ordinal color mapping. Data loads from a CSV file containing race winners, and the layout uses Flexbox for responsive panel arrangement.

CCrossZeigler

85% match

Loading thumbnail…

Fork of Fork of NASCAR Statistics Dashboard

This dashboard presents NASCAR race statistics through six linked views: a stacked bar chart, map, simple bars, scatter plot, color legend, and car maker finishes panel, arranged in a two-row flexbox layout. The interface allows users to explore race winners across tracks and years. The visualization is built with React and D3 v6, using SVG for rendering, with data loaded from a CSV file via d3.csv. Components include custom axes, color legends with hover interactions, and a scatter plot that displays driver finishes with tooltips.

RRenee

85% match

Loading thumbnail…

NASCAR Winners by Starting Position, Dropdown Added

This scatterplot shows NASCAR winners’ starting positions across race years from 1975 to 2003, with each point colored by track name and sized by track length. A dropdown menu filters the view to a single track, dimming non-selected points. The visualization is built with Vega-Lite and D3 v5, using `vl.selectSingle` and `vl.menu` for the interactive filter, and it loads data from a CSV via `d3.csv` to encode categorical colors and quantitative positions.

RRobert Johnson

84% match

Loading thumbnail…

NASCAR Car Maker Finishes, Dropdown Added

This scatterplot visualizes NASCAR car maker finishes from 1975 to 2003, with circles sized by count of instances for each finish. A dropdown menu allows filtering by individual track, changing point colors to match track-specific palettes from other visualizations. The chart uses Vega-Lite API with `vl.selectSingle` and `vl.menu` for interactive filtering, `vl.markPoint` for rendering, and `vl.tooltip` for hover details. Data is loaded from a CSV via `d3.csv`.

RRobert Johnson

82% match