Skip to main content
SimilarExport ZIP
100%

Memory Complaints Progression with Age

✓ Published1🌍 Public
BBashir Gulistani
Last edited Sep 21, 2024
Created on Sep 20, 2024

This example shows how average memory complaints rise with age, plotted as an orange line with color-coded circular markers for five age groups from 60–65 to 80–85. The visualization uses D3.js v7 APIs including `scaleLinear` for axes and positioning, `line` for path generation, and `axisBottom`/`axisLeft` for tick marks. Data is hardcoded in the script, with the x-axis formatted as hyphenated age ranges and the y-axis representing average complaint levels. SVG path styling applies `fill: none`, `stroke: orange`, and a stroke width of 2, while markers use `scaleSequential` with `interpolateOranges` for gradient coloring.

AI-generated description

An approximation of a line chart using D3.js!

Watch the video and study the code to learn about:

  • SVG Path Elements
  • fill, stroke, stroke-width
  • stroke-linecap, stroke-linejoin
  • Vanilla HTML SVG Paths
  • D3.line
  • AI Assist

See also:

Full Playlist: Constructing Visualizations

MIT Licensed

Similar vizzes

Loading thumbnail…

What is the impact of memory complaints on Alzheimer’s diagnosis?

This grouped bar chart compares the number of Alzheimer’s diagnoses against non-diagnoses for patients grouped by whether they report memory complaints, revealing the association between self-reported memory issues and diagnosis outcomes. The data is aggregated from a CSV file and rendered as SVG using D3.js, with `d3.scaleBand` for the categorical axes and `d3.scaleLinear` for the count scale, while `d3.axisBottom` and `d3.axisLeft` label the chart. Colors distinguish diagnosis status via a custom ordinal scale, and a legend clarifies the two categories.

BBashir Gulistani
68% match
Loading thumbnail…

Distribution of Alzheimer's Diagnosis Across Age Groups

This grouped bar chart shows the distribution of Alzheimer's diagnoses across five-year age intervals for patients aged 60 to 90. The visualization compares the counts of diagnosis-positive and diagnosis-negative individuals within each age group, using a color-coded legend to distinguish between the two categories. The chart is rendered as an SVG using D3's `scaleBand` for the age group and diagnosis category axes, with a linear `scaleLinear` for the patient counts. Data from the CSV is aggregated in JavaScript by grouping patient ages and tallying diagnosis statuses.

BBashir Gulistani
67% match
Loading thumbnail…

How do MMSE scores vary with Age and BMI across different diagnosis statuses? (Sample 100 Data Points)

This parallel coordinates chart shows how MMSE scores vary with Age and BMI, with each polyline representing one patient and colored by their Alzheimer's diagnosis status. The visualization uses 100 randomly sampled data points from the provided CSV, revealing potential patterns across the three dimensions. The code leverages D3.js APIs including `d3.scalePoint`, `d3.scaleLinear`, `d3.line`, and `d3.extent` to construct the axes and polylines. An interactive legend allows viewers to hover over diagnosis categories, though the opacity transition logic currently leaves all lines visible.

BBashir Gulistani
64% match
Loading thumbnail…

Average Sleep Duration vs. Age

This visualization shows how average sleep duration varies with age, plotting aggregated data from a sleep efficiency dataset as circles on a scatterplot. The display updates to show other sleep metrics—including efficiency, deep sleep, light sleep, and REM sleep—through a dropdown menu. Built with D3 v7, the code uses scaleLinear for axes, flatRollup to aggregate data by age, and the scatterPlot module to render circles. Data is loaded from a remote CSV file, with axis labels provided by a separate axes module.

MMartha Cash
64% match
Loading thumbnail…

Activity 6 Question 3

This scatter plot displays the relationship between PM2.5 air quality levels and the number of health complaints across eight dates in March 2023. Each point’s shape and color encode a severity level: circles represent level 1 (green), triangles level 2 (orange), and squares level 3 (red). The visualization uses D3 v6 with an SVG renderer, employing `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.symbol` with a `shapeMap` to generate distinct point glyphs. The data is hardcoded in the script as a constant array.

BBharath Vupputuri
64% match
Loading thumbnail…

Avg Cholesterol by Age

A bar chart with an overlaid line shows average total cholesterol levels across six age groups from 60 to 90 years, revealing a slight upward trend with age. The visualization groups patients into five-year intervals and calculates the mean cholesterol per group, with points colored on a gradient from gold to orange. It uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.line to connect the averages, rendering as SVG. The chart draws on patient data from a CSV file, with axes labeled for age group and cholesterol level in mg/dL.

BBashir Gulistani
63% match
Loading thumbnail…

Average Mark for each module

This bar chart displays the average marks for each age group from 18 to 69, sourced from the attend_data.csv file. It uses D3 v4 with SVG rendering and animated transitions, where bars sequentially grow in height. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value, while mouseout restores the original state. The chart includes axes with percentage tick labels and custom styling.

BBrahmareddym1996
63% match
Loading thumbnail…

Average Mark for each module

This bar chart displays the average marks for each age group from 18 to 69, sourced from the attend_data.csv file. It uses D3 v4 with SVG rendering and animated transitions, where bars sequentially grow in height. Hovering over a bar triggers a mouseover event that highlights it in orange, enlarges it, and displays its exact value, while mouseout restores the original state. The chart includes axes with percentage tick labels and custom styling.

BBrahmareddym1996
63% match