Skip to main content
100%

sugar

✓ Published0🌍 Public
Aalanmclean
Last edited May 9, 2014
Created on May 9, 2014

This visualization displays daily blood glucose readings as multi-line time series, with each day’s measurements plotted against the time of day. A shaded horizontal band marks the target glucose range, while the most recent day’s line and points are highlighted in red. The code loads CSV data from a Google Spreadsheet via `d3.csv`, nests records by date using `d3.nest`, and renders SVG paths with `d3.svg.line` and cardinal interpolation. Circles mark individual glucose samples, and a dropdown menu populated by dates filters the highlighted series.

AI-generated description

Similar vizzes

Loading thumbnail…

glucose

The visualization displays glucose measurements over time as white line paths and circular sample points, with one day highlighted in red via the currentDate class. It uses d3.csv to load Google Spreadsheet data, d3.nest to group records by date, and d3.scale.linear with d3.svg.line and cardinal interpolation to render each day’s trend across a 24-hour time axis. A dropdown menu, populated with unique dates, lets users switch the highlighted day. The SVG chart adapts to window size using jQuery width calculations, with axes and styling defined through CSS classes.

Aalanmclean
89% match
Loading thumbnail…

Glucose levels

This visualization displays glucose (blood sugar) measurements over time as a scatter plot, with each point representing a reading from a CSV dataset. The y-axis shows sugar levels, while the x-axis uses a time scale to map dates. A semi-transparent green band highlights the safe range between 70 and 140 mg/dL, allowing viewers to quickly identify readings outside the healthy zone. The chart supports interactive zooming and panning along the time axis, implemented via d3's zoom behavior, which re-renders the dots and safety band on changes. The y-axis is fixed, and the x-axis dynamically rescales as the user navigates through the time series data.

ZZJONSSON
83% match
Loading thumbnail…

Act 6.3

This scatter plot visualizes the relationship between Glucose and Insulin levels in a diabetes dataset, with red and green circles distinguishing diabetic and non-diabetic outcomes. It loads CSV data from a GitHub repository using d3.csv, then renders the plot as SVG with d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.extent. The chart fills the browser window and includes labeled axes for Glucose and Insulin.

VVenkataSatyaRamKamini@my.unt.edu
77% match
Loading thumbnail…

activity6 task 3

This scatter plot visualizes the relationship between glucose and insulin levels in a diabetes dataset, with points colored red or green to indicate diabetic or non-diabetic outcomes. It loads CSV data from a GitHub repository using d3.csv, then applies d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map the values. The chart renders as an SVG with circles positioned via cx and cy attributes, using window dimensions to size the plot responsively.

Ssiri2001j@gmail.com
75% match
Loading thumbnail…

activity6 task3

This example visualizes a diabetes dataset as a scatter plot, mapping glucose levels on the x-axis against insulin levels on the y-axis. Data points are colored red for diabetic outcomes and green for non-diabetic outcomes, loaded from a remote CSV via `d3.csv`. The visualization uses D3 v6 with `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to render axes, while circles are positioned with `attr` and styled with `fill`. The SVG is dynamically sized to the browser window, with axis labels styled via CSS.

Bbrahmateja.edu2023@gmail.com
75% match
Loading thumbnail…

D3 Scatter Plot

This animated SVG scatter plot explores the Diabetes dataset, cycling through different x-axis variables (BMI, Glucose, Blood Pressure, Skin Thickness) every two seconds while displaying Glucose on the y-axis. Built with D3 v6, the reusable chart component uses `scaleLinear`, `extent`, and axis functions to render points. The code imports the dataset from a remote CSV URL, and the `setInterval` function drives the rotating axis animation.

AArun
74% match
Loading thumbnail…

Fork of Fork of Hello VizHub

A scatter plot visualizes diabetes patient data, showing Blood Pressure against Glucose Level, with each point colored skyblue for non-diabetic outcomes and lightgreen for diabetic outcomes. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load and parse the diabetes dataset from a GitHub URL, then render circles in an SVG. Circle radii are fixed, while additional data attributes for SkinThickness and Insulin are stored but not visually encoded. Axis labels and a title are added directly via SVG text elements.

LLakshmiPrasannaValdas@my.unt.edu
74% match
Loading thumbnail…

Activity6_task3

This scatter plot visualizes the relationship between glucose and insulin levels in a diabetes dataset, with each point colored red or green to indicate the presence or absence of diabetes based on the Outcome variable. The visualization loads CSV data from a GitHub gist using D3’s `csv` method, then constructs linear scales with `scaleLinear` and `extent` to map the data to screen coordinates. It renders SVG circles for each data point, with axes created via `axisBottom` and `axisLeft`, and includes green axis labels for Glucose and Insulin.

Vvidiyalasahithi1999@gmail.com
74% match