Zoomable Area Canvas with Retina

100%

Zoomable Area Canvas with Retina

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

This zoomable area chart displays time-series power consumption data from the TBLkW.csv file, showing hourly values in kilowatts. The visualization initially presents the full dataset, and users can zoom in using the mouse wheel through d3.zoom, which rescales the time axis via `rescaleX`. Unlike typical implementations, the zoom does not center over the cursor, and the area is rendered with an explicit clip path on a Canvas element using D3 v4’s `d3.area` with a step curve. The code also handles high-DPI displays by adjusting the canvas resolution for sharper visuals on retina screens.

AI-generated description

forked from <a href='http://bl.ocks.org/interwebjill/'>interwebjill</a>'s block: <a href='http://bl.ocks.org/interwebjill/1df7087950353c7525cb6e8360276d32'>Zoomable Area SVG</a>

which was forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4015254'>Zoomable Area</a>

Zoom is not centered over the mouse cursor.

forked from <a href='http://bl.ocks.org/interwebjill/'>interwebjill</a>'s block: <a href='http://bl.ocks.org/interwebjill/206425109aa902c2928fa22b8a9f5fd8'>Zoomable Area Canvas with Retina</a>

forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/cdaf8f4c7aace62c195013421329c372'>Zoomable Area Canvas with Retina</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Canvas area charts zoom on click using d3.interpolateString

This example displays two time-series area charts—solar photovoltaic and building load power—rendered on an HTML5 Canvas using d3.area with a step curve, while SVG axes and a zoom button sit atop. Clicking the button toggles zoom between the full domain and a defined date range using d3.zoom and interpolated scale transitions via interpolateString. The hybrid approach combines Canvas for efficient drawing and SVG for interactive elements, with data loaded from a CSV file and scales updated to animate the view.

FFrissAnalytics

80% match

Loading thumbnail…

Zoomable Timeline

This zoomable timeline visualizes time-series data across multiple scales, allowing users to explore yearly, weekly, and daily granularities. Built with D3 version 6, it uses axis utilities like `d3.axisTop` and `d3.utcTime` intervals to dynamically adjust tick density based on zoom level. The example provides a reset button and a slider to control the number of years displayed, with the SVG chart updating through a custom timeline function that manages grid lines and formatted labels.

CClaudioTM

72% match

Loading thumbnail…

Zoomable Area

This interactive area chart displays daily U.S. flight volumes from 1988 through 2003. Built with D3 v4, it uses `d3.area` with a step-after curve, SVG rendering, and a time-scale. Users can pan and zoom along the time axis via a `d3.zoom` controller, which rescales the x-axis and updates the path in real time from the flights.csv data.

Mmbostock

72% match

Loading thumbnail…

ZoomInteractiveLineChart

This interactive line chart visualizes calcium measurement values over time for a single patient, using a smooth curve to connect data points from a CSV file. Users can zoom into the timeline using a brush gesture, which updates the x-axis domain and redisplays the data at the new scale. The chart includes a tooltip that appears on mouseover, showing the date and value at the cursor position, indicated by a red circle on the line. The visualization is built with D3 v5, using SVG rendering, scales for time and linear axes, a line generator with curve basis, and a brush for zoom interactions.

Ppplomith

71% match

Loading thumbnail…

part 2, Zoom and Panning with D3.js and canvas

This example demonstrates zooming and panning across a scatterplot of 10,000 randomly generated points, with axes updating in real time. It uses a Canvas overlay for point rendering and an SVG layer for the axes, both driven by D3 v4’s `d3.zoom` and `d3.zoomIdentity`. A reset button triggers a smooth transition back to the default view. The `rescaleX` and `rescaleY` methods adjust linear scales on each zoom event, while `context.clearRect` and `arc` handle the drawing.

FFrissAnalytics

71% match

Loading thumbnail…

Zoom + Pan

A D3.js line chart with grid-like axes supports interactive panning and zooming, controlled by dragging and mouse-wheel gestures. The view resets via a button, triggering a smooth animated transition back to the default domain using `d3.behavior.zoom`, `d3.scale.linear`, and `d3.transition().tween`. The SVG rendering showcases the axis updates, while the button click remaps the scales programmatically and rebinds them to the zoom behavior.

FFrissAnalytics

70% match

Loading thumbnail…

Understanding the zoom on d3.js

This example demonstrates interactive zooming and panning on a time-series area chart of S&P 500 monthly closing prices. The visualization uses d3.zoom with scale and translate extents to constrain navigation, updating the area path and x-axis via the transform’s `rescaleX` method during the `zoom` event. Animated intro zoom transitions from January 2003 to January 2004. Data comes from a local CSV file, rendered as an SVG area with `d3.area` and `curveMonotoneX`.

11andrey3

70% match

Loading thumbnail…

Canvas Geometric Zooming

This example demonstrates geometric zooming on a canvas, where a scatterplot of 2,000 normally distributed points scales and translates as a single unit. The code uses D3 v4’s `d3.zoom` to handle user input, applying the transform directly to the canvas context via `translate` and `scale`. Points are drawn with the Canvas 2D API’s `arc` method, and the zoom behavior redraws all points on each event. No semantic distortion occurs—the entire visualization scales uniformly.

FFrissAnalytics

70% match