Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
VVignesh Nallamothu
Last edited Apr 1, 2025
Created on Apr 1, 2025

This chart visualizes the sleep duration of 17 individuals as a smooth area graph, with the filled region emphasizing the distribution of hours per person. The SVG rendering is built using D3 v6, employing `d3.scalePoint`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveMonotoneX` to generate the shaded area and its boundary line. Custom CSS styles the area and line, while `d3.axisBottom` and `d3.axisLeft` produce rotated and labeled axes for the categorical names and numerical hours.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

A line chart shows sleep duration in hours for 17 named individuals, with each name on the x-axis and duration from 0 to 9 on the y-axis. The SVG visualization uses d3.scalePoint for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.line to generate the path connecting data points. Axes are rendered with d3.axisBottom and d3.axisLeft, with rotated bottom labels for readability. The chart's static dataset lists names and sleep durations directly in code, styled with steelblue strokes and labeled axes.

Bbhargavinalamothu@gmail.com
93% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Reusable D3 Scatter Plot

This chart visualizes the sleep duration in hours for a list of seventeen named individuals, with each name plotted along the x-axis and its corresponding duration on the y-axis. A single steelblue line connects the data points to reveal the variation across the group. The visualization is built with D3.js v6, using `d3.scalePoint()` for the categorical name axis and `d3.scaleLinear()` for the numeric duration axis. The line is generated with `d3.line()` and rendered as an SVG path, with rotated x-axis labels for readability.

VVignesh Nallamothu
93% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between sleep duration and age, with each point representing an individual’s reported hours of sleep plotted against their age. The visualization uses a reusable `scatterPlot` function built with D3 v6, which configures linear scales for both axes, draws circles with a fixed radius, and appends axis labels. Data is loaded asynchronously via `d3.csv` from a remote gist URL, with numeric parsing applied to the `Sleep Duration` and `Age` fields. The SVG fills the entire browser window, and the chart is rendered using standard D3 selections and joins.

Bbhargavinalamothu@gmail.com
88% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This example shows a scatter plot of sleep duration against age, with each circle representing a person’s data point. The visualization uses D3.js v6 to load a CSV dataset, apply linear scales, and render axes with labels. Circles are drawn with an SVG selection join, while the chart is built as a reusable function with configurable properties for width, height, data, margins, and radius. The plot is sized to fill the browser window and updates its dimensions accordingly.

Bbhargavinalamothu@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot shows the relationship between sleep duration and age, with age on the y-axis and sleep duration on the x-axis, using data from a CSV file fetched from a GitHub gist. The visualization is built with D3 v6, rendering circles as SVG elements within a full-window canvas. The code implements a reusable scatter plot function with configurable width, height, margins, and radius, and uses D3's scaleLinear for axis scaling and axisLeft/axisBottom for the axes. Axis labels are added as text elements via SVG.

Bbhargavinalamothu@gmail.com
87% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays the relationship between age and sleep duration, showing sleep duration on the x-axis and age on the y-axis. It uses d3.csv to load data from a remote GitHub gist, d3.scaleLinear for x and y scales, and d3.axisLeft and d3.axisBottom to render axes. The visualization is built with d3 v6, rendering circles to an SVG, with the chart size that adapts to the window dimensions.

Bbhargavinalamothu@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Fork of Reusable D3 Scatter Plot

This reusable scatter plot visualizes the relationship between sleep duration and age from a CSV dataset loaded via `d3.csv`. It renders blue circles positioned with `d3.scaleLinear` scales and adds axes using `d3.axisBottom` and `d3.axisLeft`. Built with D3 v6, the SVG chart computes domain padding by subtracting and adding one to the data extents.

Bbhargavinalamothu@gmail.com
86% match
Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot visualizes the relationship between sleep duration and age, using data loaded from a CSV file. The code defines a reusable `scatterPlot` function with configurable properties for width, height, data, accessors, margin, and radius. It renders circles via D3’s data join and uses `d3.axisLeft` and `d3.axisBottom` for axes, with linear scales mapping sleep hours (0–11) and age (10–30). The SVG output fills the browser window.

VVignesh Nallamothu
86% match