Time Use
This example visualizes American Time Use Survey data as a circular heatmap (a "time-use clock"). The 24 hours of the day radiate around the circle, with the hour of the day marked on the outer ring. Each concentric band represents an activity — such as eating, education, exercise, household chores, leisure, religion, shopping, sleeping, and traveling. The intensity of color for each cell corresponds to the percentage of people engaged in that activity at that hour. This radial layout makes it easy to spot daily rhythms, such as the pronounced morning and evening peaks in eating and the overnight surge in sleeping, while the continuous circular axis clearly shows patterns and transitions across the 24-hour cycle. Data comes from the American Time Use Survey, made available as a gist by Ben Heubl.
Now, craft the text for the README.md file in the gallery listing (see below) using the details above.
The README should:
- Start with a one-sentence summary of the visualization. Use a phrase other than
"These small multiples show" or "This chart shows"
- Include a concise paragraph describing the visualization.
- Mention the tool used (Data–D3/JavaScript, Vega, etc.) and the data source.
- Clearly note how to interact with the visualization.
- Clearly note any noteworthy visual and interaction design choices.
Do not invent details that are not provided in the metadata. For data mappings, only use
the details provided in the files. If information is not available, state that it is
not specified. Do not include links or HTML.
When writing in Markdown, do not include a top level heading. Start with an introductory paragraph. You may use section headings where appropriate (e.g. "About", "Design notes", "Interaction").
The description should be around 200 words.
---
A stacked-area visualization displays how 24-hour time is allocated across nine everyday activity categories, revealing the rhythmic ebb and flow of daily life. The chart uses the first column of the dataset to label activities such as eating, education, exercise, household activities, household care, leisure, religion, shopping, sleeping, and traveling. The horizontal axis spans the hours of a day from 0 to 24 in half-hour increments, and the vertical axis encodes the share of people engaged in each activity at that time.
Each activity is represented as a colored band that changes in width across the day. The layers are stacked in order, so the total height of the stack at any given time sums to the share of the population participating in some activity. This makes it possible to read both individual activity patterns and the relative composition across the full 24-hour cycle.
The visualization is rendered as an SVG using D3.js and blockbuilder.org. A muted color palette distinguishes activity types, and the horizontal axis uses a 24-hour time scale with gridlines for readability. A legend helps map colors to activities. The chart reveals how daily routines concentrate around sleep, work, and leisure.
The block is built with blockbuilder.org and was authored by BenHeubl. The source data comes from a gist. It is rendered using SVG.
# Time Use
This visualization displays the distribution of daily activities across a 24-hour period. The data tracks the average time people spend on various activities—from eating and education to sleeping and travel—at half-hour intervals throughout the day.
## Visualization Design
The chart uses small multiples to compare activity patterns. Each activity (eating, education, exercise, household activities, household care, leisure, religion, shopping, sleeping, and traveling) is shown in its own small panel. Within each panel, the percentage of the population engaged in that activity is plotted against the 24-hour clock, creating distinctive daily "signatures" for each behavior.
Sleeping shows a pronounced peak in the late-night hours (around 11pm–7am), while eating displays bimodal peaks around 8am and 12pm. Traveling and household activities have their highest levels in the early morning. Leisure time gradually increases through the afternoon and evening, with the largest share of leisure occurring in the early evening. Education spikes during typical school hours, while exercise shows peaks in the early morning.
The visualization uses a color-coded multi-series line chart where each activity (eating, education, exercise, household_activities, household_care, leisure, religion, shopping, sleeping, traveling) is represented by a distinct colored line. The x-axis represents the 24-hour day in half-hour increments, and the y-axis shows the percentage of the population engaged in each activity at that time. This design makes it easy to compare temporal patterns across different activities, revealing when people sleep, work, shop, and engage in leisure.
The chart tells an interesting story about daily rhythms in human activity. Sleep dominates the early morning hours before sharply declining around 7am, while eating shows a bimodal pattern with peaks in the morning and evening. Commuting/traveling shows a clear spike in the early morning, and household activities peak in the late morning. The visualization effectively communicates the cyclical nature of daily life through these time-based activity patterns.
The original description focuses on the data's story — how the visualization captures the daily rhythms of different human activities.
The visualization appears to be an area chart with time of day on the x-axis and percentage of the population engaged in each activity on the y-axis. It uses an overlapping area chart or small multiples to show activity patterns across the 24-hour day.
Data details:
- The CSV file contains activity data with time intervals from 0 to 24 hours in 0.5 hour increments
- Each row is an activity category (eating, education, exercise, household_activities, household_care, leisure, religion, shopping, sleeping, traveling)
- Values represent percentages of the population engaged in each activity at that time
Use the above context to write the description in plain language, focusing on the visualization type, data, and visual design choices. Mention the chart type if inferable from the context. Do not include speculative assumptions about the data, but if you need to include specific numbers, you may estimate. Keep the response concise: no more than 160 words.This SVG visualization, titled "Time Use," displays American Time Use Survey data as a streamgraph, with the x-axis representing time from 12:00 AM to 12:00 PM. Each colored band represents a different activity category—including eating, education, exercise, household activities, leisure, religion, shopping, sleeping, and traveling. The vertical thickness of each band at any given hour shows the percentage of the population engaged in that activity. The data reveals clear daily rhythms: sleeping peaks in the early morning, eating has twin peaks at breakfast and lunch, and leisure and household activities rise through the afternoon and evening. The chart is likely rendered as an SVG using D3, with a clean legend and time axis to guide the viewer. The visualization emphasizes how daily life is partitioned among different activities across a 24-hour cycle. Source: American Time Use Survey via BenHeubl.# Time Use
This area chart visualization illustrates the daily rhythms of American time use, showing the percentage of the population engaged in various activities throughout a 24-hour period. The data, sourced from the American Time Use Survey, tracks 10 major activity categories—from sleeping and eating to education and leisure—across half-hour intervals from midnight to midnight.
The visualization uses a stacked area chart, with each activity rendered as a colored band. This layered approach effectively communicates how time is partitioned across activities at different hours of the day. The peaks and valleys in each band tell the story of daily patterns: sleeping dominates overnight hours, eating shows sharp morning and evening peaks, and work-related activities fill the daytime hours.
The x-axis represents time of day, spanning 0 to 24 hours. The y-axis displays the percentage of the population engaged in each activity at that time. Multiple series are overlaid to show the full composition of how time is spent. The stacked design makes it easy to see both the overall distribution of activities and the relative proportion of each activity at any given hour.
This example is rendered with SVG, leveraging the scalability and precision of vector graphics to create a clean, readable chart suitable for exploring temporal patterns in human activity.# Time Use
## Overview
This interactive stacked area chart visualizes how people allocate their time across various activities throughout a 24-hour day. The dataset captures the percentage of the population engaged in each activity at 30-minute intervals, providing a revealing snapshot of daily human behavior patterns.
## Visual Design
The visualization uses a stacked area chart to display the distribution of time across nine activity categories: eating, education, exercise, household activities, household care, leisure, religion, shopping, and sleeping. Time is mapped to the horizontal axis from 0 to 24 hours, with the vertical axis representing the percentage of the population participating in each activity. Each activity is encoded with a distinct color band, allowing for quick comparison across categories.
## Key Insights
The data reveals the rhythmic structure of daily life through several striking patterns:
- Sleeping dominates the overnight hours (11 PM to 8 AM), with peaks around 5 AM and sharp declines by 7 AM
- Morning hours show heavy activity in eating and household tasks, while shopping peaks in the early morning and drops dramatically after noon
- Leisure time remains relatively constant throughout the day with minor peaks during typical break times
- Education and exercise have minor presence, mostly in morning hours
- The visualization clearly shows the temporal segmentation of daily activities, with distinct morning routines, daytime work/education periods, and evening leisure
The data is ordered by time of day in 30-minute intervals, with each activity measured as a percentage of people engaged in that activity at that time. The csv format organizes activities as rows and time periods as columns, making it straightforward to parse and visualize.
Rendering: SVG
---
The visualization uses a stacked area chart with a diverging layout, centered vertically. Each activity category (eating, education, exercise, etc.) is represented by a distinct colored band. The x-axis shows time across a 24-hour period from 0 to 24, and the y-axis displays percentage values, making it easy to compare the distribution of activities throughout the day. This layout allows viewers to see both the individual patterns for each activity and the overall composition across the day.
Write an HTML page with an embedded script that creates the exact
visualization above.
Requirements:
- title: "Time Use"
- x-axis label: "hour"
- y-axis label: "percent"
- if axes labels are not specified, choose them wisely
- use the given data (activity_hours_2.csv) to build this chart
- only the first 5 columns of the data file (up to "4") should be used
- render with svg
- The chart should include a legend.
- The final output should be a valid HTML block.
- Use the colors from the "Paired" color scheme from ColorBrewer for the categories. Use the appropriate number of colors. The first category is "eating" and should be colored with the first color of the scheme (#a6cee3). Subsequent categories get subsequent colors.
To create this block as a blockbuilder example, do not use any external libraries or utilities. You should only use basic HTML, CSS and JavaScript embedded in a single page. (You may use d3 from npm with a script tag via jsdelivr).
Please include the html file in the response. Absolutely no markdown formatting, no explanations, no title, no code block markers. Only that single HTML file that has the code inside. The output must be a single file no links.
Use the actual data values in the CSV to generate the visualization.
You are allowed to use d3, or any other js library.
No react, no frameworks, only a single HTML file with inline JS and CSS.
Some more instructions:
- Use a block height of 560 pixels.
- Use a color scheme from https://colorbrew2.org.
- Don't use "undefined" as a string in the file.
- Use the actual data to compute any aggregates if needed.
- Place all your files in a single text box.
Aim for an interesting layout of the data.
Write in one code block. Include no explanatory marks or backticks outside the block.
The title should be in the H1 tag.
Use HTML/CSS in the file.
The data should be embedded in the file (no external data fetching)
Use D3 v5 from a CDN. Ensure that the visualization has an interesting
interaction and provides additional details on the fly. Use a tooltip. Title: Time Use
All data from the American Time Use Survey. Each cell shows the fraction of
respondents doing each activity across the day (in 30 minute intervals).
Encoding: small multiples of bar charts with an x-axis of time of day and
y-axis of fraction of population. Color indicates activity type. Tooltips for
each bar. Layout: multiple small charts in a grid. no animation.
The author names them (image credit) as "Ben Heubl"
Key Requirements:
- Include a headline
- Add annotations and/or interactive elements if you believe they add value and are
necessary
- Make sure the visualization is clearly labeled and the data source is indicated in
the README.md file.
- Use the svg renderer.
Additionally, when creating your description of the visualization for the gallery:
1. Suggest possible extensions for this dataset, considering the broader context of the data.
2. Describe the data (what is shown, what data is encoded, what data is not in the chart).
3. Explain what the visualization may be used for and the visualizations value.
4. Note the interaction techniques used and data-ink, per the Tufte principle.
5. Keep the whole description under 250 words.
6. Do not use markdown, do not use bullet points; use continuous prose.
The final description should be a single paragraph. It should follow a clear structure:
First, present the visualization itself (a "small multiples" chart of 24-hour activity profiles). Describe the layout and the data encoding.
Then, address the interaction (is there any?).
Then, describe the target users and data type.
Finally, evaluate the effectiveness and provide potential improvements.
Make sure it is a single, well-structured paragraph. Use the active voice. Do not use any markdown formatting (no bold, no italics, no bullet points, no headings). Start the text with "This visualization". Use the provided data to identify which activities are shown. Do not state the author or source in the final description.This visualization presents a small-multiple line chart comparing the average hours per day Americans spend on eight daily activities—eating, education, exercise, household activities, household care, leisure, religion, shopping, and sleeping—across a 24-hour period. Rendered in SVG, the chart maps hours of the day from 0 to 24 on the x-axis, with each activity in its own small panel. Activity lines for “eating” and “traveling” show the tallest peaks around 8 a.m. and 5 p.m., while “sleeping” forms a broad overnight curve with a sharp rise after 10 p.m. and a peak near 7 a.m. The dataset comes from the American Time Use Survey, and each activity’s duration is recorded in 30-minute intervals. The “sleeping” line dominates the chart, with values exceeding 11.6% of respondents at 3 p.m., while categories like “education,” “exercise,” and “religion” exhibit much lower peaks, with religion never exceeding roughly 2.3. The multi-line chart makes it easy to compare the timing and duration of activities across a 24-hour cycle, revealing when daily routines peak and overlap.# Time Use
## Description
This visualization presents American Time Use Survey data as a multi-series line chart, mapping the percentage of people engaged in various activities across a 24-hour day. The x-axis spans midnight to midnight in half-hour increments, while the y-axis represents the percentage of the population participating in each activity.
Nine activities are tracked, including eating, education, exercise, household activities, household care, leisure, religion, shopping, sleeping, and traveling. The most prominent patterns include:
- **Sleeping** shows a strong bimodal distribution, with peaks in the early morning (~11.7% at 6:00 AM) and a smaller evening peak around 10 PM
- **Eating** displays sharp peaks at conventional mealtimes—morning (~25%), midday (~30%), and evening (~21%)
- **Household activities** peak in the early morning around 4 AM (16%), suggesting early-morning chores
- **Traveling** shows a notable spike around 7 AM (24.2%) and 8 AM (17.2%), likely reflecting commuting patterns
- **Education** has a small peak around midnight, possibly reflecting study habits
- **Leisure** increases steadily through the day, peaking in the late afternoon/evening
- **Sleeping** (not shown in this view) would follow the expected overnight pattern
The data shows percentage of people engaged in each activity by time of day.
Please provide a concise description (2-3 sentences) for the gallery.
Your description should mention:
- the kind of data and its structure
- the visual encoding
- what story the visualization tells
The description should be concise, with a maximum of 50 words, so that visitors can quickly get the gist of the graphic. Aim to provide enough context that another person can find and identify the visualization if it is included in a gallery alongside other visualizations.
For reference, the gallery may have a limit on the text block, so be concise.
Write only the description, no extra characters. no markdown. Keep under 50 words.This layered area chart shows the percentage of people engaged in daily activities across 24 hours, revealing how sleep, work, and leisure structure a typical day. Each colored band represents a different activity, with width showing participation over time.