Negative Relative Time Ticks
This example demonstrates a custom axis tick formatter for displaying relative time in the past, using signed hour and minute values (e.g., -01:30, -01:00, -00:30, 00:00, 00:30, 01:30). The visualization plots tweet counts per minute against time, with a zero reference point set to 10:00 UTC. The key feature is the `relativeTimeFormatter` function, which converts absolute time values into human-readable durations relative to a given reference time, handling negative intervals (past) by prefixing a minus sign and formatting hours/minutes with leading zeros. The SVG line chart uses circular symbols for data points and includes a custom axis with relative time labels. The x-axis spans from three hours before to two hours after the zero time, with grid lines and axis labels styled using CSS. The code also includes a reference to the original "Time of Day" block by mbostock and a hit counter link.
# Negative Relative Time Ticks
This example demonstrates a custom D3.js axis formatter that displays time ticks as signed durations relative to a reference point. The x-axis shows hourly intervals labeled as [-03:00, -02:00, -01:00, 00:00, 01:00, 02:00], where negative values represent times before the zero point and positive values after it.
**Key implementation details:**
- A custom `relativeTimeFormatter` function calculates the time difference between each tick and a fixed "zeroTime" (10:00 UTC)
- The formatter converts the difference into signed hours and minutes (e.g., "-01:30")
- Data plotted from `tweets.csv` shows tweet frequency per minute, with a smooth line connecting the points
- The x-axis uses a UTC time scale spanning from 3 hours before to 2 hours after the reference time
- Grid lines extend across the plot with 20% opacity for readability
The visualization effectively solves the challenge of displaying relative time in the past using D3's time scale and custom tick formatting, making it useful for comparing time-based data around a reference point.# Negative Relative Time Ticks
This example demonstrates a custom D3.js axis tick formatter that displays time values as signed durations relative to a reference time point.
## Visualization Description
The chart visualizes tweet frequency throughout a day using a scatterplot-style dot series. The x-axis displays time in hours and minutes relative to a reference time of 10:00, using a custom tick formatter that shows signed durations in the format `[-]HH:MM` — such as `-01:30`, `-01:00`, `-00:30`, `00:00`, `00:30`, and `01:30`.
## Key Features
- **Custom Tick Formatter**: The `relativeTimeFormatter(zeroTime)` function computes the signed difference between each tick position and a reference time, converting it to hours and minutes. Negative values indicate times before the reference, with the leading minus sign positioned appropriately (e.g., "-01:30" for 90 minutes before zero time).
- **Dual Time Direction Handling**: Uses `d3.time.minutes(d, zeroTime).length` and `d3.time.minutes(zeroTime, d).length` to determine whether a tick is before or after the zero time, ensuring the correct sign.
- **Zero-Padding**: Hours and minutes are zero-padded to two digits for consistent label formatting (e.g., "09:30").
- **SVG Rendering**: The visualization is rendered as an SVG, with the x-axis scale defined as a UTC time scale and tick labels formatted using the custom formatter.
The visual encoding: The example demonstrates a line chart (actually dots) showing tweet rates over time, with the x-axis labels formatted as relative durations from a specified zero time (10:00). The y-axis shows tweet rates. This makes it easy to compare activity relative to a reference point.
This example shows one solution for getting d3 axis ticks to display relative time (durations) into the past by hour and minute. This is done by defining a custom tick formatter that computes the difference between each tick value and a reference "zeroTime", then formats the difference as a signed duration like "-01:30" for 1 hour 30 minutes before the zero time and "01:30" for 1 hour 30 minutes after. The zeroTime is set to 10:00 AM, and tick values are formatted relative to this. Data are from tweets within a day, and the x-axis displays relative time in hours and minutes.
This block was forked from mbostock's Time of Day example. The specific addition is the <b>relativeTimeFormatter</b> function, which converts an absolute time into a relative time string using a reference time. It is based on a similar pattern found in <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s example <a href='http://bl.ocks.org/mbostock/41491756'>Time of Day</a>.
The .csv file contains hourly tweet counts for January 8 through November 30. The data was synthesized for illustrative purposes.
The visualization is a scatterplot of time of day vs. tweet rate for a time period of 5 hours: 3 hours before the zero time of 10:00 AM and 2 hours after. The x-axis is in "relative time", which means the tick labels are formatted as durations from the zeroTime in the past and future [-03:00, -02:00, ...].
This is one possible approach to obtaining relative time ticks for this case.
A possible improvement would be to compute the relative tick values by transforming the time values rather than string manipulation of the tick labels.
You can also use a custom scale (e.g., d3.time.scale with a custom interpolator) to produce relative ticks directly, without formatting logic.
forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/d8bcc4b130df420d6c40'>Time of Day</a>
tweets.csv,
data: [
[0,358],[1,372],[2,344], ... [59,339]
]
Your task:
Write the description for the gallery in 3-5 sentences.
The visualization uses a custom tick formatter to display the x-axis time scale relative to a fixed "zero time" (10:00 UTC), with labels like -01:30, -01:00, etc. It visualizes tweet activity as circular dots plotted against time and rate, and includes a y-axis label "tweets per hour." The example is built with D3.js v3 and SVG.
need a concise description, no markdown. Just the text itself. Must be 50 words or fewer. Must mention the data.
Write your description:
3. **Negative Relative Time Ticks** (3 pts)
**Description:** (2-3 sentences)
Ensure to:
- Describe the visual content
- Describe the visualization design and how the interaction or dynamic
behavior (if any) works
- Mention the data
- Keep it concise
Focus on the unique technique in the example, not generic
descriptions. Since this is the negative relative time ticks example, describe
how the negative relative time is encoded in the visualization. Highlight this
feature.
The description should be in plain text, in a single paragraph, no
markdown, and must have a period at the end. It should be between 50 and 100
words.
Use the following template for the description:
"Negative Relative Time Ticks is a ..."
Begin with that.Negative Relative Time Ticks is a D3.js scatterplot visualization that maps tweet frequency (y-axis) against time (x-axis) over a single day, with the x-axis ticks formatted as signed durations relative to a central reference time (10:00). A custom tick formatter converts absolute times into relative offsets such as -01:30 and 01:30, enabling clear visual comparison of activity before and after the reference point. The chart uses SVG circles to represent individual data points, with gridlines extending from the y-axis to aid readability, all rendered in a clean minimal style.
CCurran Kelleher
43% match