Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend Scatterplot to determine Useful Count of rating per year

✓ Published1🌍 Public
Aaishwarya8615
Last edited Nov 6, 2019
Created on Oct 29, 2019

This interactive scatterplot visualizes drug ratings against useful counts, with each point colored by the year of the rating. A color legend allows users to hover over a year to highlight matching data points while fading the rest, easing comparison of temporal trends. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for categorical color mapping, and SVG circles rendered via custom React components. The data comes from a CSV file loaded through D3’s `csv` parser, with axes and legend built from reusable `AxisBottom`, `AxisLeft`, and `ColorLegend` components.

AI-generated description

An Interactive Color Legend Scatter plot for Drug Rating Data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend Scatterplot to determine Useful Count of rating per year

This interactive scatterplot visualizes the relationship between drug ratings and useful counts across years, with each point colored by year. A color legend allows users to hover over a year to highlight only that year's data points while dimming the rest, making it easy to compare temporal patterns. Built with React and D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and SVG circles for marks. The data is loaded from a CSV file using the `d3.csv` parser, and the legend and axes are custom React components.

Aaishwarya8615
99% match
Loading thumbnail…

Drug Ratings Date Histogram

This visualization displays a date histogram of drug ratings, with each bar representing the total rating count for a specific time interval across the dataset. The example uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the x and y axes respectively. The d3.histogram function bins the data, while custom AxisBottom, AxisLeft, and Marks components generate the tick marks and rectangular bars. Data comes from the Drug Ratings Dataset CSV file, which is fetched using d3.csv and parsed with a row function that converts ratings to numbers and dates to JavaScript Date objects.

BBhojarajHG
80% match
Loading thumbnail…

Drug Ratings Date Histogram

A date histogram displays the total Drug Ratings per month from a CSV dataset of drug reviews. The visualization aggregates individual ratings into monthly bins using D3's `d3.histogram`, `d3.timeMonths`, and `d3.sum`, then renders the result as SVG rectangles. The React-based app uses `d3.scaleTime` and `d3.scaleLinear` for axes, with custom `AxisBottom`, `AxisLeft`, and `Marks` components. Tooltips appear on hover via SVG `<title>` elements.

Aaishwarya8615
80% match
Loading thumbnail…

Drug Vs Rating

The visualization is a scatterplot showing the relationship between drug names, their useful count, and user ratings. Each circle represents a drug, colored by its rating value (from 0 to 10). The x-axis shows drug names, the y-axis displays usefulCount, and tooltips reveal the condition being treated. The code uses vega-lite-api to construct the chart, with data loaded via d3.csv from a GitHub-hosted CSV file. Circles use `markCircle` with opacity and size settings, and color encodes the rating field, while axes are configured through the custom config.js.

Aaishwarya8615
79% match
Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Ppnlinyz
76% match
Loading thumbnail…

Scatter Plot with Interactive Color Legend

This scatter plot visualizes death statistics by year, with each point representing a demographic group’s death count. The color legend encodes sex, and hovering over a legend item fades non-matching points while highlighting the selected category. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG rendering. Data comes from a Gist CSV file, though sex, ethnicity, and age dropdowns remain non-functional.

PPeter Maida
76% match
Loading thumbnail…

Happiness and Depression rates with color legend

This scatter plot visualizes the relationship between Happiness Scores and depression rates across all ages, with points colored by year and a color legend that supports interactive filtering. Hovering over a legend year highlights only the corresponding data points and fades the rest. The visualization uses React components for rendering SVG elements, with D3 scales like `scaleLinear` and `scaleOrdinal` to map data to positions and colors. Data is loaded via D3’s `csv` from a GitHub gist, and axes are built using custom React components.

NNikithakatta30
76% match
Loading thumbnail…

Scatter Plot with Color Legend

A React-driven scatter plot visualizes the iris dataset, displaying four numeric attributes as selectable X and Y axes via dropdown menus. Each circle represents a flower, colored by species through a legend using `scaleOrdinal`. The SVG rendering uses `d3.scaleLinear` and `d3.extent` for axes, with React state managing the attribute selection. The code imports `csv` from D3 v5, uses React hooks like `useState` and `useEffect`, and custom components like `AxisBottom`, `AxisLeft`, `Marks`, and `ColorLegend` structure the visualization. A tooltip reveals exact values on hover.

PPhronesis
76% match