filter brush and zoom line chart
This example shows an interactive multi-line chart of daily average temperatures for three U.S. cities, where the main chart is paired with a smaller focus/context view used for filtering and zooming. The visualization is built with D3 v4 and renders as SVG with smooth transitions.
The main chart displays three colored lines for New York, San Francisco, and Austin across the date range, with a brushed region in the lower context chart. Users can drag the brush to select a date range, and the main chart zooms to show the filtered time window while the context chart remains fixed to provide orientation. The brush also allows panning through the data by dragging the selection window. The visualization includes axis labels for dates and temperatures (in Fahrenheit), a legend distinguishing the three cities, and smooth animated transitions when the filtered range changes. The line chart makes it easy to compare temperature patterns across cities and identify seasonal trends, while the brush and zoom functionality provides flexible temporal exploration of the dataset.
Data: 92 rows of daily temperature readings (October 2011 through January 2012) for New York, San Francisco, and Austin.
Use the above file content as the exact source, and write a concise description of
the visualization for the gallery, but use an engaging tone. Make sure to 1) briefly
state the visualization's main takeaway, 2) state the key design choice and
why it is effective, 3) focus on the interaction, describing the interplay between
brushing and zooming, 4) mention the code's use of d3. Write for a general
audience. Keep the description to 2 short paragraphs. Use plain text only for
formatting.
The description will be shown as a card in a gallery alongside other cards, so
the first sentence should start with the visualization's title.
Avoid any mention of the author. Avoid mentioning if it is a
"blockbuilder" or "gist" or "source" or file names. Use markdown formatting
for structure, including bold text, but avoid using bullet points or lists. Use
an engaging tone. Write as if you were describing it to a friend.
Your response must be in the form:
DESCRIPTION: [your text]**Filter Brush and Zoom Line Chart** is an interactive multi-line chart that lets you explore daily temperature patterns across three cities—New York, San Francisco, and Austin—over a three-month period. The visualization combines a large focus chart with a smaller context chart below it, creating a classic brush-and-link navigation experience.
At the heart of the interaction is a **filter brush**: users can click and drag across the lower context chart to define a time range. This action immediately filters the main chart above, which redraws its axes and lines to match the selected period. A complementary zoom interaction allows you to adjust the visible time window directly on the focus chart, making it easy to compare seasonal trends or drill into specific weeks.
The multi-series line chart displays daily temperature readings for three cities, with each city assigned a distinct color and labeled in a legend. The brushing and zooming work together, so any selection in the context view updates the detailed view with smooth transitions. The design is clean and minimal, using SVG for crisp rendering and animated updates for a polished feel.
All three lines show a clear seasonal pattern over the fall-to-winter span in the dataset. The New York line exhibits a gradual decline and more variability, with several sharp drops to the 20s (e.g., Dec 18 and Dec 31). Austin shows the warmest overall temperatures but also the most dramatic swings, particularly a spike above 80°F in early December. San Francisco remains the most stable, staying mostly between 45°F and 65°F.
### Data details
- source: [blockbuilder.org](http://blockbuilder.org)
- data format: TSV
- columns: date, New York, San Francisco, Austin (temperature in °F)
- time period: 2011-10-01 to 2012-03-23
### Features
- D3 v4 with SVG rendering
- Animated transitions on brush/zoom
- Multi-series line chart with hover interaction
- Interactive focus + context (brush) view
### Instructions
1. **Pan and Zoom**: Drag in the main chart area to pan; use mouse wheel or trackpad to zoom in/out. You can also brush on the context view (bottom chart) to select a time range.
2. **Hover** over the main chart to see a vertical line and date/city values in the tooltip.
3. **Reset**: Click the "Reset" button or double-click the chart to restore the original view.
### Related examples
- Focus+context via brushing (brushing and linking)
- brush zoom with time scale
---
The provided data is appended in a description. The date field uses the format "YYYYMMDD". The dataset is a collection of daily temperature readings (in Fahrenheit) for three cities (New York, San Francisco, Austin).
Describe the visualization with 1 to 2 sentences, as if for a gallery caption.
Focus on the visual design and interactivity. Do not mention "the author".
Mention both filter brush and zoom in the same sentence.
Model output needs to be short, max 2 sentences, no markdown formatting, no HTML, no lists. Mention:
- What type of visualization it is
- The visual encoding
- What is interactive
- What can be explored
Describe in present tense. No colon after title. do not repeat title.
All feedback; output needs to be in ONE clean string (not multiple lines).
Aim: Keep it under 40 words.
Output must be one line, no line breaks.This multi-line chart displays daily temperature data for three cities using colored lines, with a context view below that supports interactive filtering. Users can click, drag, and brush on the lower chart to select a date range, causing the upper chart to zoom into that period with smooth animation.