shish's multiseries line and combined chart

100%

shish's multiseries line and combined chart

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

This example presents two linked visualizations of a sleep health dataset: a multi-series line chart and a combined chart. The line chart plots Age against Sleep Duration, Stress Level, and Daily Steps using d3.line with d3.scaleLinear axes, while colored dots and tooltips show exact values. The combined chart reuses the same scales and color encoding to display the data differently. The code loads data via d3.csv, applies SVG rendering, and includes interactive mouseover events with tooltip transitions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart examines the relationships between study hours, sleep hours, and exam scores for 187 students. The visualization displays three trends on a shared axis, with each series represented by a distinct color. Built with D3.js v7 and rendered as an SVG, the code uses `d3.text` and `d3.dsvFormat` to efficiently parse the comma-delimited CSV data file. The chart automatically detects column names and scales, providing a clean overview of how these academic factors correlate with performance.

RRamdas Dheeraj

78% match

Loading thumbnail…

Multi-Series Line Chart (Student_ID vs Hours, Sleep, Score)

This example uses a multi-series line chart to compare hours studied, sleep hours, and exam scores for each student, allowing viewers to spot trends across the dataset. The D3.js code loads a CSV file, dynamically detects column names, and renders three colored lines on a shared axis. It employs `d3.dsvFormat` for parsing and `d3.select` for SVG manipulation, with a custom legend indicating each series. The chart is rendered as an SVG with a dark theme and styled axes.

RRamdas Dheeraj

78% match

Loading thumbnail…

shish's scatterplot- ice6

This scatterplot visualizes the relationship between sleep duration and stress level, with each point representing a participant. The x-axis shows sleep duration in hours, while the y-axis tracks stress levels. Semi-transparent steelblue circles, each with a radius of five pixels, reveal the distribution and density of data points. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks. The data comes from a sleep health dataset loaded via `d3.csv`, and the chart is rendered as SVG within a styled HTML page.

SSai Shishir Koppula

77% match

Loading thumbnail…

Combined Chart

This combined chart displays average study hours as bars and average exam scores as a line, grouped by sleep-hour bins. It uses `d3.rollups` to aggregate the CSV data and a dual-axis layout with an SVG render. The chart is built with D3 v7, featuring flexible column detection and dark-themed styling.

RRamdas Dheeraj

73% match

Loading thumbnail…

Multiline & Combined

Two D3.js v7 SVG charts display monthly data from ICE.csv. The first is a multi-series line chart plotting signups, revenue, and support tickets over time on a shared axis, using distinct pastel strokes and a legend. The second combines a bar chart of revenue with an overlaid line for support tickets, using shared time and value scales. Both charts employ d3.csv, d3.timeParse, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft.

Mmaddulanagasanjana@gmail.com

73% match

Loading thumbnail…

Sleep Health- Interactive Visualization Dashboard

This interactive dashboard visualizes sleep disorder prevalence across low, medium, and high stress levels, using 100% stacked bars with animated transitions. Users filter by gender and toggle between all categories or disorders only, with hover tooltips and clickable legend items that isolate healthy versus disordered sleep groups. Built with React and D3 v7 (d3.scaleBand, d3.stack), the SVG chart renders from a CSV dataset and updates bins and counts dynamically. The animation and ordinal color scale highlight how higher stress correlates with increased Insomnia and Sleep Apnea rates.

Ccsabavath@wpi.edu

72% match

Loading thumbnail…

Fork of Assignment 5 - Prototype 2

This interactive scatter plot visualizes the relationship between sleep duration and stress level, with individual data points colored by gender. The visualization, built with React and D3 v7, loads data from a Kaggle CSV file and renders an SVG chart. It includes axes with labels, a legend, and per-gender dashed trend lines computed via least-squares regression. Tooltips display detailed information about each person’s ID, gender, sleep duration, stress level, and sleep disorder. The chart employs D3’s `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` functions for scaling and axes, with `schemeTableau10` providing the color palette.

Ccsabavath@wpi.edu

72% match

Loading thumbnail…

Multi Line Plot

This multi-line chart visualizes daily fitness trends—steps, calories burned, and average heart rate—over a 150-day period. The data is loaded from a CSV via `d3.csv` and rendered as three overlaid lines, each scaled to a common y-axis using fixed multipliers. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators, with an SVG grid and legend, to compare the metrics' daily evolution.

Ssivaniammisetti2002@gmail.com

72% match