Skip to main content
SimilarExport ZIP
100%

NASCAR Dashboard Legend

✓ Published0🌍 Public
RRobert Johnson
Last edited Nov 15, 2021
Created on Nov 15, 2021

This dashboard legend lists 27 NASCAR track names, each paired with a colored dot to ensure consistent color mapping across other visualizations in the dashboard. The SVG rendering uses d3.scaleOrdinal with a manually defined color array to assign distinct fills to the circles, while text labels display the track names in black. The code appends the colored circles and labels as separate selections, positioning them with incremental y-coordinates inside a white rectangular frame with a black border.

AI-generated description

A legend containing the names of the NASCAR Tracks, with the dots colored by their names, so that they will be consistent with the other visualizations (Las Vegas Motor Speedway will always be the same color).

If the track names should be colored the same as the dots, replace

.style('fill', 'black')

with

.style('fill', function (d) { return color(d); })

MIT Licensed

Similar vizzes

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
80% match
Loading thumbnail…

Nascar Dashboard I- Just Plots

This dashboard presents four NASCAR data plots: a map of track locations, a bar chart of starts before first wins, a stacked bar chart of top drivers by track, and car maker finishes. It uses the Vega-Lite API with `vl.markCircle`, `vl.markBar`, and `vl.layer` to render the visualizations. The map uses an Albers USA projection from a topojson file, while other plots pull data from remote CSVs. Interactive multi-selection via `vl.selectMulti` filters points and bars by track name, adjusting opacity for highlighted marks.

RRobert Johnson
78% match
Loading thumbnail…

NASCAR Dashboard II- Different Plots

This dashboard presents four interactive visualizations of NASCAR statistics. A map of the United States displays race tracks colored by name, with a scatter plot showing racing starts before a driver’s first win. A circle plot visualizes winners by year and starting position, with point size encoding track length. A point chart shows car maker finishes. The visualizations use the vega-lite-api with D3.js for data loading. Interactive selections allow clicking on tracks to filter displays. The map uses topojson data for U.S. states, while CSV datasets provide track locations and race statistics.

RRobert Johnson
78% match
Loading thumbnail…

NASCAR Dashboard IV- Dropdowns, Different Plots

This dashboard displays four NASCAR visualizations: a map of track locations, bar charts of driver starts before first wins and top winners, and a scatter plot of starting positions among winners. Each visualization includes an independent dropdown menu and interactive tooltips, with points and bars resizing based on selections. Built with d3.v5 and the Vega-Lite API, the visualizations use `vl.selectSingle` with a menu binding for filtering, `markGeoshape` and `markCircle` for the map, and `markBar` for histograms. The data is loaded via D3’s `csv` from GitHub gists, with tooltips handled by Vega Tooltip.

RRobert Johnson
78% match
Loading thumbnail…

NASCAR Statistics Dashboard

This dashboard presents a comprehensive view of NASCAR race statistics from 1975 to 2003, combining multiple visualization types to explore driver performance, track characteristics, and car manufacturer finishes. The interface integrates a scatter plot with interactive dropdown controls for examining different race metrics, a color-coded map showing track locations, stacked bar charts displaying top winners, and additional bar and point charts. Built with React and D3, the visualizations use SVG rendering, with the map employing d3.geoPath for geographic display and Vega-Lite APIs for several chart types. The scatter plot includes hover interactions on its color legend to highlight specific tracks, while tooltips provide detailed race information.

RRobert Johnson
77% match
Loading thumbnail…

Fork of Nascar Dashboard I- Just Plots

This dashboard presents four NASCAR visualizations: a map of track locations, a bar chart of starts before first wins, a stacked bar chart of top winning drivers by track, and a chart of car maker finishes. Built with Vega-Lite API and D3.js, it uses layered geoshape and circle marks with Albers USA projection, interactive selection for filtering, and tooltips. Data is loaded from external CSV files via D3’s `csv` method, with custom styling configured in a separate config file.

AAndre J Denais
77% 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
76% 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
76% match