Fork of blood pressure

100%

Fork of blood pressure

✓ Published0🌍 Public

Last edited Mar 23, 2024

Created on Mar 23, 2024

Forked from Temperature in San Francisco Line Chart

This visualization shows the relationship between age and sleep duration for a group of individuals, with each person represented as a point on a scatterplot and connected by a smooth line. The chart uses D3.js v5 to load CSV data from a GitHub gist, parse the numeric fields, and render the SVG visualization. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `curveBasis` to create the curved trend line. The line is styled in maroon with a thick stroke, while gridlines and axis labels are formatted with custom CSS. The data source is a public dataset on sleep health and lifestyle.

AI-generated description

This above line chart is created by using html, css and d3.js.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Area graph for sleping time and population

This area graph visualizes the relationship between sleeping hours and age group count. The x-axis represents sleeping time, while the y-axis shows the count of individuals within each age group. Using D3.js v5, the visualization renders an SVG with a smooth, curved line and a purple filled area beneath it. The chart loads CSV data from a remote GitHub gist, applies time and linear scales, and includes labeled axes with custom styling for tick marks and text.

VVineela Reddy

82% match

Loading thumbnail…

Fork of Area graph for sleping time and population

This example displays an area graph showing the relationship between sleeping hours and age group count. The visualization uses a smoothed curve to represent the data, with the area beneath the line filled in purple. The chart includes labeled axes for sleeping hours and age group count, with a title and gridlines. The code loads CSV data from a GitHub gist and uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.area with d3.curveBasis to render the SVG graphic.

VVineela Reddy

81% match

Loading thumbnail…

Fork of Fork of Area graph for sleping time and population

This area chart visualizes the relationship between sleeping hours and age group population counts, with the x-axis mapping sleeping time and the y-axis showing age group values. The chart renders a smooth purple area beneath a black line, using d3.area and d3.line with curveBasis interpolation. Data is loaded via d3.csv from a GitHub-hosted CSV file, while d3.scaleTime and d3.scaleLinear handle axis scaling, and d3.axisBottom and d3.axisLeft generate labeled axes.

Aajaysonu

81% match

Loading thumbnail…

Fork of Sleep Efficiency vs. Age

This visualization plots sleep efficiency against age, showing a linear relationship until roughly age 20 and no relationship afterward. Each circle represents a person, colored by gender. The scatterplot uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for color encoding, and `d3.csvParse` to load the data. Axes are rendered with `axisLeft` and `axisBottom` from D3 v7.

CCurran Kelleher

81% match

Loading thumbnail…

Fork of Anv_ICE-6 Scatter plot

This scatter plot visualizes the relationship between age groups and their average deep sleep percentage, with each data point representing an individual. The visualization uses D3.js v7 within a React framework, rendering as an SVG. The code employs `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, `d3.extent` to determine domains, and `d3.axisBottom` and `d3.axisLeft` for axes. A legend is added using color ticks. The data comes from a GitHub gist, and the page uses a light blue background with Arial font.

TTekmal-Bhavana

80% match

Loading thumbnail…

Fork of Fork of Sleep Efficiency vs. Age

This scatterplot visualizes the relationship between age and sleep efficiency, with data points colored by smoking status. The chart reveals a linear trend until age 20, after which no clear correlation exists, answering the question of whether sleep efficiency correlates with age. Built with D3 v7, the visualization uses `scaleLinear` for axes, `schemeCategory10` for color encoding, and `axes.js` for labeled axis rendering. Data is fetched from a CSV and parsed via `csvParse`, then plotted with circles at 8-pixel radius with 0.6 opacity.

CCurran Kelleher

79% match

Loading thumbnail…

Fork of Area Chart of Uk Population

This visualization displays sleep duration across different ages in the UK population, using a smooth curve with an area fill beneath it. The SVG chart, built with D3 v5, maps age on the time-scaled x-axis and sleep duration on the linear y-axis. It uses `d3.area()` and `d3.line()` with `curveBasis` to create the filled curve, alongside `d3.scaleTime`, `d3.scaleLinear`, and axis generators for labels, styling ticks and axes in orange and black.

VVineela Reddy

79% match

Loading thumbnail…

Fork of Fork of BONUS ICE 1: 3D Scatter Plot

This example visualizes the relationship between age, sleep duration, and sleep efficiency as a 3D scatter plot. Each point represents an individual, with yellow markers outlined in black, positioned along three axes that display the variables. The code loads CSV data from a GitHub gist using D3’s `d3.csv` function, then constructs the trace with Plotly’s `scatter3d` type and renders it via the `Plotly.newPlot` API. Axis titles and marker styling are configured through the layout and trace objects.

DDineshK2602

78% match