InteractiveYearLineChart

100%

InteractiveYearLineChart

✓ Published2🌍 Public

Last edited May 7, 2021

Created on May 3, 2021

An interactive line chart displays blood calcium values over time for a single patient, with a vertical red line marking a selected year. Users hover over the chart to see a tooltip with the exact date and value, while a brush allows zooming into time ranges. The chart uses d3.scaleTime, d3.line, d3.brush, and d3.bisector on data loaded from a CSV file. SVG rendering and mouse events drive the interactions, with a dashed line and tooltip circle updating dynamically.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ZoomInteractiveLineChart

This interactive line chart visualizes calcium measurement values over time for a single patient, using a smooth curve to connect data points from a CSV file. Users can zoom into the timeline using a brush gesture, which updates the x-axis domain and redisplays the data at the new scale. The chart includes a tooltip that appears on mouseover, showing the date and value at the cursor position, indicated by a red circle on the line. The visualization is built with D3 v5, using SVG rendering, scales for time and linear axes, a line generator with curve basis, and a brush for zoom interactions.

Ppplomith

85% match

Loading thumbnail…

Med Data - LineChart

This chart displays calcium concentration levels for a single patient over time. A red vertical line indicates the currently selected date, and hovering over the chart triggers a tooltip that shows the exact date and value. The visualization is built with D3 version 5, using `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render the axes and line within an SVG container. Data is loaded from a CSV file containing multiple medical markers, though only the calcium series is displayed.

Ppplomith

83% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

77% 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

77% match

Loading thumbnail…

YearInteract

This visualization shows a time series line chart where users can brush along the x-axis to zoom into a specific date range, with a double-click resetting the view. The chart renders a steelblue line using SVG paths and D3 v5's `d3.brushX`, `d3.scaleTime`, and `d3.axisBottom`, while transitions animate the axis and line when the domain changes. Data comes from a comma-separated CSV file with date and value columns.

Ppplomith

76% match

Loading thumbnail…

LineChart+ColorLegend

A multi-line chart displays patient biomarker values over time, with each line representing a different marker and a color legend identifying them. The visualization uses D3 v5 within a React application, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for path generation, and `scaleOrdinal` with `schemeSet1` for colors. Data comes from a CSV file loaded via `d3.csv`, and hovering over a line highlights it while dimming others.

Ppplomith

76% match

Loading thumbnail…

MultiLine with tooltip

A multi-line chart displays several vital-sign measurements over time for a single patient, with each line colored by metric type. The visualization uses D3 v5 to render SVG paths and includes a custom tooltip that appears on hover. The code relies on d3.nest, d3.line, d3.area, and d3.scaleOrdinal, with jQuery used for tooltip interactions. Data comes from a local CSV file with patient measurements. Mouseover events highlight the hovered line and dim the others, while a vertical gridline helps compare values across time points.

Ppplomith

75% match

Loading thumbnail…

Fork of Fork of Fork of Selecting a Year on a Line Chart

A line chart visualizing heart disease rates across age categories, with each line colored by a category and selectable by hovering over the chart. The vertical year line updates as the mouse moves, and the chart uses D3 v5 with d3.line, d3.scaleTime, d3.scaleOrdinal, d3.nest, and SVG rendering. Data is loaded from a CSV file, and the chart includes axes, a legend from colorLegend.js, and a title.

Cchandanagandla

75% match