Skip to main content
SimilarExport ZIP
100%

Scatter Plot with Shape

✓ Published0🌍 Public
KKhatera Alizada
Last edited Mar 12, 2023
Created on Mar 12, 2023

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`.

AI-generated description

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

See also:

MIT Licensed

Similar vizzes

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

Fork of D3 Scatter Plot

This scatter plot visualizes health expenditure data over time, with each circle representing a year’s expenditure value. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub Gist, then maps it through `scaleLinear` scales for the x and y axes. Axes are rendered with `axisBottom` and `axisLeft`, while circles are drawn using SVG elements. The code explicitly parses the `year` and `Expenditure` columns as numbers, and the chart fills the entire browser window with margins applied to the plot area.

KKhatera Alizada
82% match
Loading thumbnail…

Fork of Scatter Plot with Shape

This visualization is a scatter plot showing the relationship between patient age and heart rate, with data points shaped by gender. It uses D3 v7 to render symbols from the `symbolsFill` set, mapped via `scaleOrdinal`, and includes a custom legend for the shape encoding. The plot leverages `scaleLinear` for both axes and fetches healthcare data from a remote CSV. Key APIs include `d3.csvParse`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and the `d3.symbol` generator for drawing point shapes.

Aaniteshterala2000
81% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes customer data from a CSV file, showing the relationship between annual income and spending score, with each dot colored by gender. The visualization uses D3.js v7 to render SVG circles, with a tooltip that appears on mouseover to display detailed customer information like age, purchase frequency, and satisfaction rating. The chart includes axis labels, a title, and a legend, with scales computed via `d3.scaleLinear` and `d3.extent` for data domains.

119h61a05c9@cvsr.ac.in
78% match
Loading thumbnail…

Scatter plot

This scatter plot visualizes customer data from a CSV file, showing the relationship between annual income and spending score, with each dot colored by gender. The visualization uses D3.js v7 to render SVG circles, with a tooltip that appears on mouseover to display detailed customer information like age, purchase frequency, and satisfaction rating. The chart includes axis labels, a title, and a legend, with scales computed via `d3.scaleLinear` and `d3.extent` for data domains.

119h61a05c9@cvsr.ac.in
78% match
Loading thumbnail…

Reusable Scatter plot aSSIGNMENT

This interactive scatter plot visualizes healthcare data, plotting patient age against cholesterol levels with gender-based color coding (blue for male, pink for female). The visualization includes labeled axes, a title, and a legend, with a periodic redraw every five seconds. Built with D3.js, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` function, rendering SVG elements. Data is loaded asynchronously via `csv` from a GitHub-hosted healthcare dataset, demonstrating a modular approach to creating configurable chart components.

Vvineelaramulapalli32
78% match
Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the relationship between height and weight for individuals, colored by gender. It displays data points as circles with a tooltip showing exact values on mouseover, along with labeled axes and a color-coded legend. The visualization loads data from a CSV file via `d3.csv` and renders with SVG. It uses D3's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to map data to coordinates, axes, and categorical colors for male and female observations.

AAreeba Hassan
77% match