Skip to main content
100%

Multiple Line Climate Plot with Zoom

✓ Published0🌍 Public
Aaaronmunoz
Last edited Apr 2, 2018
Created on Apr 2, 2018

This example shows a dual-panel line chart of global climate temperature anomalies from five datasets (GISS, HAD, NOAA, RSS, UAH) over time. The top panel displays the full time series, while the bottom panel contains a smaller overview of the same data. A brush selection on the bottom panel controls the zoom level of the top panel, redrawing it to show only the selected time range. The visualization is rendered with SVG using D3 v3, and the brush interaction demonstrates a practical technique for exploring dense time-series data.

AI-generated description

This serves as an example of how to add a zoomable feature to a plot using a "brush". By selecting a window width in the bottom graph, the top graph is redrawn with that window extent. For this data this may not be all that interesting, but in principle it is an interesting technique.

forked from <a href='http://bl.ocks.org/natemiller/'>natemiller</a>'s block: <a href='http://bl.ocks.org/natemiller/7dec148bb6aab897e561'>Multiple Line Climate Plot with Zoom</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Multiple Line Climate Plot with Zoom

This visualization displays monthly global temperature anomaly data from five climate datasets—GISS, HAD, NOAA, RSS, and UAH—as multiple overlaid line series across time. The main chart shows the full time range, while a smaller focus chart beneath it displays the same data with a brushed window. Users can drag or resize the brush on the bottom chart to zoom the top chart into a specific time period, which updates the visible range of the line plot accordingly. The technique demonstrates linked brushing between two views of the same dataset, with the top chart redrawn to match the selected extent.

Aaaronmunoz
94% match
Loading thumbnail…

Multiple Line Climate Plot with Zoom

This example shows monthly global temperature anomalies from five climate datasets (GISS, HAD, NOAA, RSS, UAH) in a zoomable multi-line chart. A large focus panel displays all series, while a smaller context panel beneath it serves as a brush-based navigation tool. Dragging the brush window updates the focus panel’s x-axis domain and redraws the lines accordingly. The visualization uses D3 v3 with SVG rendering, `d3.svg.brush` for zooming, and `d3.time.scale` for date handling, with data loaded from a CSV file.

PPacsangon
93% match
Loading thumbnail…

Brush & Zoom line chart

This brush & zoom line chart visualizes hourly environmental data from CIMIS Station 125, plotting multiple meteorological variables such as air temperature, wind speed, and soil temperature over time. The main chart displays the selected time range as a series of colored lines, while a smaller context view beneath it shows the full time series. Users can brush over the context chart to define a focus window, and the main chart responds with a smooth zoom transition, allowing for detailed inspection of specific periods. The visualization, built with D3 v4 and rendered in SVG, uses a shared x-scale for both views, enabling intuitive linking between the overview and detail.

EEfratVil
79% match
Loading thumbnail…

Linechart Version 5

This interactive visualization lets users explore temperature data over time through either a line chart or an area chart, with dropdown menus to select axes and a grouping variable that triggers a color legend. The charts are rendered as SVG with D3 v5, using scales like `scaleTime` and `scaleLinear`, axes from `axisBottom` and `axisLeft`, and a tooltip that updates on mouse movement. A slider adjusts point opacity, a number input changes line width, and a button toggles between chart types.

SSchmittYannic
73% match
Loading thumbnail…

[A11] Starter Chart (Brushing, Filtering, and Zoom/Pan)

This example shows interactive multi-series line charts of daily temperatures in New York, San Francisco, and Austin, loaded from a TSV file. Users can brush to zoom and pan along the time axis, click a city’s line to toggle its visibility, and hover to highlight a specific series. Built with React and D3 v7, it uses `d3.zoom` for scaling and translation, `d3.axisBottom` for time-axis updates, and `d3.curveBasis` for smooth line rendering in SVG with animation transitions.

Cctan13@dons.usfca.edu
73% match
Loading thumbnail…

Line chart with Multiple Lines

This example visualizes a week of temperature readings from multiple cities around the world as a multi-line chart. The visualization uses D3 v5 to render SVG paths, with color distinguishing each city via a categorical color scale. Temperature data is loaded from a CSV, and axes are drawn using D3’s `axisLeft` and `axisBottom` functions. A legend, built with a custom `colorLegend` module, maps each color to its city. The lines use a basis curve and a multiply blend mode to handle overlapping strokes.

YYedrup
73% match
Loading thumbnail…

Line Chart with Multiple Lines

This visualization displays a week of temperature readings from multiple cities around the world as smooth, overlapping line charts. The chart sorts cities by their final temperature values and uses a color legend to distinguish them. Built with D3 v5, the code employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line` with `curveBasis`, `nest`, and `axisBottom`/`axisLeft`. A mouseover interaction uses a `bisector` to find the nearest data point and displays a tooltip with the timestamp and temperature. The data comes from a CSV file loaded via `d3.csv`.

Iinu231
72% match
Loading thumbnail…

multi-line test

This example displays a multi-line chart tracking a single time series dataset from 1750 onward, with each year’s value plotted as a point on an SVG canvas. The visualization uses d3.v4 to generate the line path and adds a hover interaction with a tooltip and a Voronoi overlay for precise mouse tracking. The chart includes context lines and a focus highlight on hover, with all rendering handled via SVG elements and D3’s data-binding methods.

ZZoeLeBlanc
72% match