Interactive Color Legend

100%

Interactive Color Legend

✓ Published0🌍 Public

Last edited Mar 14, 2023

Created on Mar 14, 2023

This interactive visualization displays prescription drug expenditure data from the Medical Expenditure Panel Survey, plotting annual out-of-pocket costs across gender categories. A color legend encodes gender groups using d3.scaleOrdinal with schemeCategory10 colors; hovering over legend items filters the scatter plot marks via d3.selection join operations, dimming non-matching points to 20% opacity. The scatter plot uses d3.scaleLinear for both axes and d3.axisLeft/axisBottom for tick marks. Data loads asynchronously from a CSV file and is parsed with d3.csvParse.

AI-generated description

A scatter plot of the Iris Dataset with a color legend.

Hover on the color legend to highlight the marks that match!

Similar vizzes

Loading thumbnail…

Fork of scatter plot out of pocket prescription drug expenditure

This scatter plot visualizes out-of-pocket prescription drug expenditure across age group 19-44, with data split by gender. Blue circles represent males, yellow circles represent females, and red circles show total expenditure across the years 2002-2014. The chart uses d3.scaleLinear for both axes and d3.scaleOrdinal for color encoding. Data is loaded from a local CSV file and parsed with d3.csvParse. The visualization implements axes through a custom axes function using d3.axisLeft and d3.axisBottom.

KKhatera Alizada

84% match

Loading thumbnail…

scatter plot health expenses

A scatter plot visualizes health expenditure by year across three gender categories (Total, Males, Females), with each data point colored via a d3.scaleOrdinal range. The chart uses d3.csvParse to load a CSV dataset, d3.scaleLinear for both axes, and custom d3.axisBottom and axisLeft components for labeled ticks. Circles are rendered with a fixed radius of 10 pixels, and axes labels indicate year and expenditure values. The visualization is fully responsive, sizing to the window dimensions, and updates dynamically through a state-based rendering pattern in d3.

KKhatera Alizada

79% match

Loading thumbnail…

Interactive Color Legend Scatterplot to determine Healthcare Expenditure per year

This interactive scatterplot visualizes healthcare expenditure against year for different continents. The visualization uses d3.scaleLinear for X and Y axes and d3.scaleOrdinal for color mapping. A color legend allows users to hover over continent names, filtering and highlighting corresponding data points while fading others. Built with React and d3.v5, the SVG rendering uses CSV data loaded via d3.csv.

Aaishwarya8615

79% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays prescription drug expenditure for individuals aged 0-18, broken down by gender, from 2002 to 2014. Three lines represent total, males, and females, allowing for comparison of spending trends over time. The visualization uses D3 v5 with an SVG renderer, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for smoothed paths, and `nest` to group data by gender. A color legend, implemented via a custom `colorLegend` function, distinguishes the categories. Data is loaded from a CSV file using `csv` and parsed with `timeParse`.

KKhatera Alizada

78% match

Loading thumbnail…

Scatter Plot with Shape

This scatter plot visualizes health expenditure data from a CSV file, showing expenditure by year and colored by gender. The visualization uses a D3.js v7 scatter plot with a shape legend to distinguish between male and female data points. The code leverages `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `d3.symbolsFill` for shapes, and `d3.symbol` to generate the point markers. A custom `axes` module handles axis rendering with labels, while the `shapeLegend` module displays the gender categories. The plot loads data asynchronously via the `fetch` API and `d3.csvParse`.

KKhatera Alizada

77% match

Loading thumbnail…

Fork of scatter plot simple Health expenses

This scatter plot visualizes health expenses over time, with each point colored by gender using a categorical scale. The visualization uses D3.js v7 APIs including `scaleLinear` for axes, `scaleOrdinal` for color encoding, and `csvParse` to load data from a remote CSV file. The plot displays three distinct data series for total, male, and female expenditure values across years.

KKhatera Alizada

76% match

Loading thumbnail…

Scatter Plot with Color Menu

This interactive scatter plot lets users explore healthcare cost data by selecting X, Y, and color attributes from dropdown menus. The D3 v5 visualization uses a time-based X-axis for the year column and linear scaling for other metrics, with color encoding via `scaleOrdinal` and `schemeCategory10`. A `colorLegend` component displays the categorical scale, while the `scatterPlot` module animates circles with `transition().duration(2000)` as users change selections, all rendered as SVG elements.

KKhatera Alizada

76% match

Loading thumbnail…

Interactive Color Legend Scatter Plot for Health Expenditure Vs Life Expectancy

This interactive scatter plot visualizes the relationship between health expenditure and life expectancy across countries, with continents encoded by color. A dropdown menu allows users to switch which attribute maps to the X and Y axes, while hovering over the color legend highlights points from that continent and fades others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles rendered via the `Marks` component. Data comes from a CSV file loaded with `d3.csv`.

Aaishwarya8615

75% match