Interactive Color Legend with Menus

Interactive Color Legend with Menus

Yyyaaa1

100% match

Scatter Plot with Color Legend

This example shows a scatter plot of Udemy courses, mapping the number of subscribers along both axes while coloring each point by course subject. The visualization includes a categorical color legend on the right, with circles using d3.scaleOrdinal for color mapping and d3.scaleLinear for positioning. The React components render SVG elements, with axes built from custom AxisBottom and AxisLeft components, and the data is loaded via d3.csv from a GitHub gist. A hover handler on the legend logs the selected subject value.

DdaojunL

85% match

Interactive Color Legend with Menus

This interactive scatter plot explores the relationship between two user-selected attributes from the College Dataset, showing each institution as a circle colored by its public or private status. Two dropdown menus, built with ReactDropdown, control which numeric columns (such as Enroll, PhD, or Outstate) appear on the x and y axes. A custom color legend, implemented as an SVG component, highlights points of one category on hover while fading the others, using d3.scaleOrdinal for color mapping and d3.scaleLinear for axis scales. All marks and axes render as React components with d3 scales, with data loaded asynchronously via d3.csv.

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between academic attributes such as applications, enrollment, and faculty credentials. Users select X and Y axes via dropdown menus, while a color legend distinguishes public from private institutions. Hovering over legend items highlights matching points and fades others using React state management. The visualization uses D3 scales and SVG rendering, with React components for axes, marks, and interactive controls, demonstrating a React-D3 integration pattern for exploratory data analysis.

Interactive Color Legend with Menus

This interactive scatter plot visualizes the College Dataset, showing relationships between attributes like enrollment numbers and faculty PhD percentages, with points colored by public/private status. Users select X and Y axes from dropdown menus built with ReactDropdown, while hovering over the color legend highlights matching points and fades others. The visualization uses React for component composition, D3 scales for positioning and color mapping, and renders data as SVG circles with axis components from D3.

Yyinhao0424

Scatter Plot with Color Legend for Udemy Courses

This scatter plot visualizes Udemy courses, showing the relationship between course price (x-axis) and the number of subscribers (y-axis). Each circle represents a course, colored by its subject category via a color legend on the right. The visualization uses React with D3 v5 to render an SVG, employing `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for the categorical color mapping, and `d3.format` for axis tick labels. Data is loaded from a CSV file using `d3.csv`.

DdaojunL

Interactive Color Legend with Menus

An interactive scatter plot of the College Dataset explores relationships among academic metrics. Dropdown menus switch the X and Y attributes, while hovering over the ordinal color legend highlights points from either public or private institutions by fading non-matching circles. The React and D3 v5 implementation uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage selections and hover interactions, rendering the SVG marks with reusable axis and legend components.

Interactive Color Legend with Menus

This interactive scatter plot explores the College Dataset, showing relationships between academic metrics like enrollment, admissions, and faculty qualifications. Users dynamically select which attributes appear on the x and y axes using React dropdown menus, while the color legend distinguishes public versus private institutions. Built with React and D3 v5, the visualization uses `scaleLinear` and `scaleOrdinal` for positioning and coloring, rendering as SVG. Hovering over legend items filters the displayed points and fades non-matching data, providing an interactive way to compare institutional characteristics.