d3.compose Heatmap
This heatmap visualizes the frequency of events across days and hours, using a color scale from pale yellow to dark navy to represent increasing values. Built with the d3.compose library, the chart displays a 7-day by 24-hour grid, with each cell colored according to the `value` column in the data. The visualization uses a custom `Heatmap` class that extends d3.chart, leveraging mixins for XY axes and standard layer handling. The color scale is a sequential yellow-to-navy scheme, and the data is drawn as rounded rectangles positioned by day and hour, with a subtle gray stroke separating cells. The example is part of a gist forked from john-clarke's block and is available under the MIT license. The accompanying data.tsv file contains the day, hour, and value fields used to render the heatmap. The chart includes axis labels for days of the week and hours of the day, with hidden domain and tick lines for a clean look. The visualization demonstrates how to use the d3.compose library to build a custom heatmap chart with D3.js.# d3.compose Heatmap
This visualization demonstrates how to build a custom heatmap using the **d3.compose** library, a charting framework built on D3.js and d3.chart. The example, forked from John Clarke's block, shows a day-by-hour activity matrix rendered as an interactive grid of colored cells.
The chart displays two-dimensional data with days of the week on the y-axis and hours of the day on the x-axis. Each cell's color intensity represents a value (0–70), using a sequential color scale that transitions from pale yellow (`#ffffd9`) through greens and cyans to dark navy (`#081d58`).
**Design Approach**
The visualization extends `d3.compose`'s chart architecture by creating a custom `Heatmap` chart class using the library's mixin system. It combines XY scales, data binding helpers, and a standard layer mechanism to manage the visual elements. The chart uses an ordinal scale for both axes to position the day/hour cells, then maps each data point's value to the color scale via a `zScale` property.
**Key implementation details:**
- **Data binding**: Rows in `data.tsv` are keyed by `day-hour` pairs, allowing D3's join to efficiently handle updates.
- **Rendering**: Each cell is a `<rect>` with rounded corners, colored by value through the `barFill` function and a color scale with 9 classes (from pale yellow to dark blue).
- **Reusable chart**: Extends the base d3.compose chart class with `helpers.mixin`, combining XY-coordinate and layer mixins.
- **Styling**: Custom CSS hides axis elements that aren't needed and applies subtle styling to the heatmap cells.
**Questions for the description (answer in your mind, not in the response):**
- Who is the audience?
Data scientists/developers who use d3 for data visualization and are comfortable with the d3.chart API.
- What is being visualized?
A heatmap of hourly activity (data.tsv) over days and hours of the week.
- What is the "story" of the example?
It demonstrates how to create a composable, reusable heatmap chart using d3.compose.
- What are the key features of the visualization?
Custom chart class extending d3.compose, color scale legend, axis labels, tooltip (if available), etc.
- What is the visual encoding?
Rectangles colored by value, x = hour, y = day.
- What are the key design decisions?
The author created a reusable "Heatmap" chart class via d3.compose mixins.
The color scale uses a sequential color scheme (yellow-to-navy).
The chart maps hours to x, days to y, and values to color intensity.
Now write the final description.
Use these tags if you include them: <p>, <a>, <em>, <blockquote>, or <code>.
Keep it concise—under 15 words for any sentence, and no more than 4 sentences total.
Additional instructions:
- Begin with a title in the format Title: d3.compose Heatmap
- Use current tense, active voice.
- Use plain text, not markdown, for formatting. Do NOT use markdown lists.
- Be concise and punchy, highlighting the concept, not implementation.
- You may include one link to the bl.ocks page or the gist, but it must be at the end and inside an HTML formatting element such as a <p>.
Your response should adhere strictly to the following structure as a JSON object. Use the following JSON structure: {"title": "Your title here", "description": "Your description here"} Ensure that both values are strings. Do not include extraneous newlines, characters, or whitespace in your JSON response. Do not use single quotes or unescpted line breaks in the string values. Use escaped quotes where necessary. Your response MUST start with { and end with }.
Note: there may be differences between the visible files and the list provided in the metadata above. In such cases, the files in the metadata are the ones to rely on. Do not describe files that are not in the metadata. Ensure to describe all files from the metadata only.{
"title": "d3.compose Heatmap",
"description": "This heatmap visualizes hourly activity counts across seven days using d3.compose. Each cell represents a day-hour pair, with color intensity mapped to the value column, revealing daily and hourly patterns at a glance. The chart is built with a custom d3.compose 'Heatmap' chart type, leveraging the library's mixins for coordinate systems, data binding, and transition handling. Axes are hidden to emphasize the heatmap cells, and the color scale uses a sequential yellow-to-dark-blue palette to indicate magnitude."
}