Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot with Color

โœ“ Published0๐ŸŒ Public
Mminjunglalaa
Last edited Dec 24, 2020
Created on Dec 24, 2020

This example presents a scatter plot of Korean movie character data, showing age on the x-axis and character appearance ratio on the y-axis, with each point colored by disability type (physical, visual, or hearing impairment). The visualization uses React for component structure, D3.js (v5) for scales and axis rendering, and SVG for drawing the circles. Data is loaded from a CSV file using D3's `csv` function, and the color scale is created with `d3.scaleOrdinal`, while axes use `d3.scaleLinear`.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnailโ€ฆ

D3 bar graph

This example demonstrates a D3 bar graph that reads from a CSV file about characters in Korean films, including their movie name, age, gender, and disability type. The code initializes the visualization by loading the data with `d3.csv`, then iterates through the rows to log each characterโ€™s English name and gender to the console, preparing for later chart construction. The implementation uses D3 v6 within a React framework, with the HTML page referencing the D3 library via a CDN script tag.

Pparkseora
78% match
Loading thumbnailโ€ฆ

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes depression data across different age groups, allowing users to dynamically select which attributes appear on the x and y axes via dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data points as SVG circles, with axis components rendered through custom React components. The dataset is loaded asynchronously using d3.csv from a remote URL. Users can switch between sepal measurements and species attributes, with axis labels updating accordingly to reflect the selected variables.

NNikithakatta30
77% match
Loading thumbnailโ€ฆ

Fork of Scatter Plot with Color

This scatter plot visualizes the relationship between Happiness Score and ageStandard, with each point colored by country. The visualization uses React with SVG rendering, employing d3โ€™s scaleLinear for axes, scaleOrdinal for categorical color mapping, and format for tick labels. Data is loaded from a CSV via d3.csv and parsed with numeric coercion. Hovering over a circle reveals a tooltip showing the happiness score.

NNikithakatta30
77% match
Loading thumbnailโ€ฆ

Fork of Scatter Plot with Color

A React and D3 v5 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each point is colored by species using `d3.scaleOrdinal`. The chart uses `d3.scaleLinear` for axis scales, reusable React components for axes and marks, and SVG circles with tooltips. Data is loaded asynchronously from a CSV URL using `d3.csv`.

JJakob Waibel
76% match
Loading thumbnailโ€ฆ

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with points colored by species. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.scaleOrdinal for categorical colors. The SVG rendering includes custom axis components and circles with tooltips via SVG `<title>` elements, with data loaded asynchronously using d3.csv.

SShafi
75% match
Loading thumbnailโ€ฆ

Scatter Plot with Color Legend

This scatter plot visualizes death statistics by year and cause, with each point colored by sex using a red and blue ordinal scale. The React-based component uses D3 v5 scales for positioning axes and circles, rendering as SVG. A color legend on the right explains the sex encoding, while dropdown menus allow selecting different death metrics. The current implementation filters data by age group, though the README notes the sex, ethnicity, and age menus are not fully functional. Data is loaded from a CSV file via D3โ€™s CSV parser.

PPeter Maida
75% match
Loading thumbnailโ€ฆ

Fork of Scatter Plot with Color Legend

This visualization uses a scatter plot to explore the classic Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis, with points colored by species via an ordinal color scale and SVG circles. The chart includes custom React components for axes and a discrete color legend, built with d3.scaleLinear, d3.scaleOrdinal, and d3.extent for domain computation. The data is loaded asynchronously using d3.csv, and the SVG rendering is handled through Reactโ€™s JSX syntax.

YYedrup
75% match
Loading thumbnailโ€ฆ

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris dataset, showing petal length against sepal width for three iris species. The React-based chart uses d3.scaleLinear and d3.scaleOrdinal to map data values to positions and categorical colors, with SVG circles rendered as marks. Axes are generated via custom reusable components (AxisLeft, AxisBottom), and the data is loaded asynchronously from a CSV file using d3.csv.

AAnu Wat
75% match