Fork of Fork of MedData - TimeLine 222 NESTED

100%

Fork of Fork of MedData - TimeLine 222 NESTED

✓ Published2🌍 Public

Last edited Jul 5, 2021

Created on Jun 19, 2021

Forked from Fork of MedData - TimeLine 222

A fork of the MedData timeline visualization displays nested medical measurements over time. The chart uses SVG rendering with D3 v5 to draw layered line and area paths representing different patient vitals, including heart rate and diastolic pressure, distinguished by color. A vertical time axis and tooltip are implemented, though interaction handlers are not wired. Data is loaded from a CSV file containing patient records. The visualization nests the data by measurement type using `d3.nest()` and sorts the series.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of MedData - TimeLine 222 NESTED WITHOUT AREA

This example displays time-series medical data for a single patient, filtering the dataset to show only the selected metric (Diastolic pressure) across time. The visualization uses nested line charts and area fills, with each line representing a data category and color-coded via `scaleOrdinal` and `schemeSet1`. The chart is built with D3 v5, using `nest()` to group data, SVG rendering for paths, and includes interactive tooltips and a listening rectangle for mouse events. Data is loaded from a CSV file containing patient measurements.

Ppplomith

93% match

Loading thumbnail…

Fork of MedData - TimeLine

This timeline chart displays patient medical data over time, specifically tracking diastolic pressure values. The line chart, drawn with SVG, includes an area fill and a brush interaction for zooming. The code uses d3.scaleTime and d3.scaleLinear to map data from the patient1.csv file, while d3.line and d3.area generate the visual elements. A tooltip, though its event handlers are incomplete, is positioned to show date, value, and measurement name on mouse events.

KKamilPodsiadlo

87% match

Loading thumbnail…

Fork of MedData - TimeLine 222

A line chart displays a single patient's diastolic blood pressure readings over time from 2010 to 2017, using data from a CSV file. The chart features a smoothed red line with a semi-transparent area fill beneath it, along with axes and a tooltip. Built with D3 v5, the visualization uses `scaleTime`, `scaleLinear`, `line`, `area`, and `axisBottom`/`axisLeft` to render SVG elements. An interactive zoom and mouse event handlers are included, though the tooltip functionality is partially commented out.

Ppplomith

87% match

Loading thumbnail…

Fork of MedData - TimeLine

This interactive line chart visualizes a patient's diastolic pressure over time, using a red line and a semi-transparent area to encode the data. The visualization, built with D3 v5, supports zooming and panning through a brush interface. A tooltip displays the exact date, name, and value of a data point upon mouse movement. The chart’s axes and interaction are rendered as SVG, with data loaded from a CSV file, allowing viewers to explore the temporal trends in this single vital sign.

AAndrew Babilonia

86% match

Loading thumbnail…

Fork of MedData - TimeLine TT

This fork of MedData displays a Gantt chart timeline for task scheduling, with colored bars representing task categories like development, coding, and promotion across a time scale. The visualization uses d3.timeScale and d3.timeFormat to map dates, while d3.scaleLinear with interpolateHcl generates the color gradient. The SVG rendering includes a grid background, task rectangles with rounded corners, and text labels positioned within each bar. A separate line chart component appears to be present in the code structure.

Ppplomith

82% match

Loading thumbnail…

MedData - TimeLine

This interactive timeline visualizes a patient’s diastolic pressure over time, rendered as a red area chart with a smoothed line. Users can hover over the chart to update a vertical selection line, with a tooltip displaying the date and value. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, and `area` generators, along with a brush for zooming. Data is loaded from a CSV file and filtered by the selected metric.

Ppplomith

77% match

Loading thumbnail…

Fork of D3-timeline in D3.js V3 ref from (jiahuang)

This example demonstrates a color-coded timeline visualization of patient wait times, vitals checks, and doctor visits using stacked horizontal bars. The chart renders SVG elements through D3.js v3, utilizing the `d3.timeline` plugin to map time intervals with custom colors and labels. It shows a 15-minute tick axis with formatted time labels, and includes a legend for the three activity categories. The data is hardcoded as JavaScript objects containing starting and ending times parsed with `Date.parse`.

Ffilipwydra

75% match

Loading thumbnail…

Fork of D3-timeline in D3.js V3 ref from (jiahuang)

A fork of jiahuang's d3-timeline, this example demonstrates a stacked, interactive timeline built with D3.js v3 and rendered as SVG. The chart visualizes labeled time intervals for patient statuses like "Waiting," "Vital," and "Doctor," with each segment colored and optionally labeled, and an accompanying legend. The code creates the timeline via `d3.timeline()` with stacked item rows, custom tick formatting using `d3.time.format`, and margins. SVG elements are appended manually for the legend, while the timeline itself handles axis and row rendering through its internal API.

JJason

74% match