Zoomable Area Canvas with Retina

100%

Zoomable Area Canvas with Retina

✓ Published0🌍 Public

Last edited Jun 18, 2019

Created on Jun 18, 2019

This example shows a zoomable area chart of power consumption data (TBLkW) recorded at hourly intervals from late December 2014 through early January 2015. The chart is rendered on a Canvas element using D3 v4’s `d3.area()` generator with a step curve, while axes and tick labels are drawn directly via the Canvas 2D context. A `d3.zoom()` behavior rescales the time scale on pan and zoom events, and the chart supports high-DPI displays by adjusting the canvas backing store ratio. The data is loaded from an external CSV file.

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…

Zoomable Area Canvas with Retina

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.

FFrissAnalytics

93% match

Loading thumbnail…

Canvas area charts zoom on click using d3.interpolateString

This example shows two time-series area charts for energy data (PV and TBL kilowatts) rendered on a Canvas layer, with an SVG layer for axes and a clickable zoom button. Clicking the button triggers a smooth zoom animation into a specific date range using `d3.interpolateString` to interpolate between domain values. The code uses d3.v4, `d3.area`, `d3.zoom`, and `d3.scaleTime`, drawing to a scaled Canvas context (for retina displays) while keeping the SVG for interactive elements. The data is loaded from a CSV file containing hourly readings.

TThanaporn-sk

86% match

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

81% match

Loading thumbnail…

Zoom to Domain

This example shows a time-series area chart of S&P 500 monthly closing prices from 2000 to 2010, rendered as a smooth monotone curve in SVG. Upon loading, the chart automatically animates a programmatic zoom into the year 2003 using d3.zoom and d3.zoomIdentity, scaling the x-axis to highlight that specific domain. After the intro transition, users can pan and zoom manually, with the area path and x-axis updating in real time via the zoom event’s rescaleX method. The data comes from a CSV file, and the visualization uses D3 v4’s d3.area, d3.axisBottom, and d3.timeParse APIs.

TThanaporn-sk

74% match

Loading thumbnail…

Canvas Chart Zoom

This example renders 10,000 random data points as a scatter plot on a Canvas surface, using d3fc’s `cartesianCanvasChart` and `seriesCanvasPoint` components. A d3-zoom handler enables pan and zoom interactions, re-rendering the chart on each transform by updating linear scales and invoking the chart’s render function. The code also includes SVG equivalents (`cartesianSvgChart`, `seriesSvgPoint`) to highlight the performance difference, with Canvas offering roughly 10x faster redraws.

CColinEberhardt

73% 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

72% 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

72% match

Loading thumbnail…

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

This example shows a canvas-based scatter plot of 10,000 random data points, with the page built for future brushing interactions. It uses D3.js v4 to create SVG axes and labels, while rendering the points themselves on a separate HTML5 canvas element for performance. The code initializes linear scales for both x and y dimensions, draws the axes with `d3.axisBottom` and `d3.axisLeft`, and plots each point using the Canvas API’s `arc` and `fill` methods. The canvas is positioned over the SVG using CSS classes, demonstrating a hybrid rendering approach.

FFrissAnalytics

72% match