Skip to main content
SimilarExport ZIP
100%

Fork of ICE-7 : Reusable Scatter Plot

✓ Published0🌍 Public
MM Hema
Last edited Mar 28, 2024
Created on Mar 28, 2024

This example visualizes diabetes-related health metrics in a responsive scatter plot, mapping pregnancies on the x-axis, glucose levels on the y-axis, and varying symbol shapes based on skin thickness. It uses d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, d3.symbols, and d3.symbol to generate SVG marks. The reusable chart function supports custom accessors, margins, and symbol size, drawing data from a CSV of diabetes records. The plot fills the browser window with hidden scrollbars and large axis tick text.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This scatter plot visualizes the relationship between the number of pregnancies and glucose levels in a diabetes dataset, with skin thickness encoded through symbol size. Built with D3.js, it renders an SVG that fills the browser window, using the `scatterPlot` reusable component to map data values to positions and sizes. The plot applies margins and tooltips, displaying tick labels at 24 pixels, and pulls data from a remote CSV file fetched asynchronously with `d3.csv`.

MM Hema
94% match
Loading thumbnail…

ICE-7 : Reusable Scatter Plot

This example presents a reusable scatter plot that visualizes the relationship between pregnancies and glucose levels in a diabetes dataset. The plot encodes the number of pregnancies on the x-axis and glucose concentration on the y-axis, while using different symbol shapes to represent skin thickness values. Built with D3.js, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for symbol mapping, and `symbol` to generate distinct path shapes. The chart is rendered as SVG, with the `scatterPlot` function encapsulated as a reusable component, allowing configurable width, height, margins, and data accessors. Data is loaded asynchronously from a remote CSV file.

AArun
90% match
Loading thumbnail…

Fork of ICE-7 : Reusable Scatter Plot

This visualization uses D3 to render a reusable scatter plot of COVID-19 data, plotting each country’s population against itself while encoding the dataset’s SkinThickness column through symbol shapes. The chart displays axes for both variables, with points positioned using `scaleLinear` and `extent` for domains. The code relies on `d3.scaleOrdinal` to map symbol types and `d3.symbol` to generate the path data, while `axisLeft` and `axisBottom` add the scales. Data is loaded as CSV via `d3.csv`, and the plot is rendered as SVG with a custom margin and size configuration.

MM Hema
86% match
Loading thumbnail…

Fork of AkshithaRapala - Fork of Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the diabetes dataset, mapping pregnancies and glucose levels as points on a dynamic SVG canvas. It cycles through multiple columns—Pregnancies, Glucose, BloodPressure, and SkinThickness—updating the x-axis every 100 milliseconds to animate the chart. Built with d3.scaleLinear, axisBottom, and axisTop, it encodes species as distinct shapes via the shapePath function. The plot adjusts to window dimensions and refreshes automatically, offering an interactive glimpse into the dataset’s correlations.

AArun
85% match
Loading thumbnail…

Fork of Fork of ICE-7 : Reusable Scatter Plot

This example visualizes COVID-19 data by plotting countries against death counts using a reusable scatter plot. It employs D3 v6 to load CSV data, scale axes with `scaleLinear`, and render marks via `symbol` and `symbols` for varied point shapes. The chart’s axes are generated with `axisLeft` and `axisBottom`, while margins and dimensions are configured through a custom `scatterPlot` function. The visualization is built with SVG, and the `d3.csv` module fetches the dataset from a remote URL. The code demonstrates a modular pattern where the plot function accepts configurable accessors for x, y, and symbol values, making it reusable.

MM Hema
84% match
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot displays the diabetes dataset, mapping glucose, BMI, age, and blood pressure attributes to axes. The visualization cycles through different x-axis metrics every two seconds using `setInterval`, while keeping BMI fixed on the y-axis. Built with d3.v6, the chart uses `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, with `selection.join` to bind circles to data points. The D3 module pattern via `scatterPlot()` enables configurable width, height, margins, and radius, rendering as animated SVG with steelblue circles on a light gray background.

Vvedasrivarma13@gmail.com
84% match
Loading thumbnail…

Fork of Making Scatter Plot ICE6

This visualization displays a scatter plot of the Pima Indian Diabetes dataset, plotting Glucose levels on the x-axis against DiabetesPedigreeFunction on the y-axis. Each circle is colored by the Outcome variable using d3.scaleOrdinal with two distinct colors, and size is fixed at a radius of 7. The React component uses d3.scaleLinear for both axes, with SVG rendering via React elements. The code leverages d3.csv for data loading, custom AxisBottom and AxisLeft components for tick marks, and tooltips generated through SVG title elements within the Marks component.

RRinoj-Gautam
83% match
Loading thumbnail…

ICE 7 Reusable D3 Scatter Plot

This example presents a reusable scatter plot of COVID-19 data, mapping countries along the x-axis and death counts along the y-axis. It utilizes the D3.js library (v7) within an SVG rendering context, demonstrating a modular component pattern via the `scatterPlot()` function. The main script asynchronously loads a CSV dataset using `d3.csv`, parses death values as numbers, and then invokes the chart with configurable accessors, margins, and point size. The visualization adapts to the full browser window by setting its width and height from `window.innerWidth` and `window.innerHeight`.

MM Hema
82% match