LineChart+ColorLegend

100%

LineChart+ColorLegend

✓ Published0🌍 Public

Last edited Jul 5, 2021

Created on May 7, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

82% match

Loading thumbnail…

Line Chart _ static 1.1

This line chart displays time-series data with circular markers connected by a smooth path, plotting numeric values against a linear time axis. The visualization uses React with D3 v5 scales for positioning, while SVG rendering handles the axes, grid lines, and mark elements. Data is loaded from a CSV file via the `csv` function and the chart includes formatted tick labels and hover tooltips. The styling applies a teal color scheme with a Poppins font, demonstrating a static line chart with labeled axes and responsive rendering approach.

NNYY

81% match

Loading thumbnail…

Multi Line Chart

A multi-line chart displays up to ten time series from CSV data, with each series rendered as a separate SVG path and color-coded via CSS classes. Built with React and D3 v5, the visualization uses `d3.csv`, `d3.timeParse`, `d3.scaleTime`, and `d3.line` to map dates to x-coordinates and measurements to y-coordinates. Axis ticks are formatted with `d3.timeFormat` and labeled with the y-axis title "Frequency." Series labels appear at the right end of each line, and the chart is fully responsive via a `viewBox` attribute.

Aamiralitah

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

79% match

Loading thumbnail…

Line chart_ static

A static line chart displays trends over time, plotting data points as circles connected by a path. The visualization uses React to render SVG elements, with D3 v5 utilities like `scaleLinear`, `extent`, and the `line` generator from `d3-shape` to map data coordinates. Axis components generate ticks and labels, while the `csv` loader fetches data from an external dataset. The chart includes axis labels and tooltips via SVG `<title>` elements, with styling applied through CSS classes.

NNYY

79% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays multiple time series from the Olympic dataset, with each line representing a different country or category. The visualization uses D3 v5’s `d3.line` and `d3.scaleTime` generators to map CSV data to SVG paths, while axes are rendered via `d3.axisBottom` and `d3.axisLeft`. React manages the component lifecycle, and the SVG output is styled with external CSS. The chart focuses on comparing trends across series, with each line distinguished by color and label.

MMuriel

78% match

Loading thumbnail…

Linechart Version 5

This interactive visualization lets users explore temperature data over time through either a line chart or an area chart, with dropdown menus to select axes and a grouping variable that triggers a color legend. The charts are rendered as SVG with D3 v5, using scales like `scaleTime` and `scaleLinear`, axes from `axisBottom` and `axisLeft`, and a tooltip that updates on mouse movement. A slider adjusts point opacity, a number input changes line width, and a button toggles between chart types.

SSchmittYannic

78% match

Loading thumbnail…

Line Chart

This line chart displays closing values over time, using a smooth natural curve to connect data points. The chart renders as an SVG with React components, leveraging D3 v5 functions including `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` for scales and axes. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into Date objects. The visualization includes labeled x and y axes with tick marks, while the line itself uses a teal stroke with rounded joins, omitting point markers as indicated in the commented-out circle elements.

GGayan Priyadarshana

78% match