1andrey3

@1andrey3·3 public vizzes

Mike Bostock's zoom

This example displays a zoomable, gradient-filled rectangle with corresponding axis tick lines that rescale smoothly as the user pans and zooms. The visualization uses D3 v5’s `d3.zoom` behavior with `scaleExtent` and `translateExtent` limits, and applies the zoom transform to both a styled `<rect>` and axes via `d3.axisBottom` and `d3.axisRight`. A reset button triggers a 750-millisecond transition back to the identity transform. The SVG background uses a linear gradient with ten color stops, and the axis lines are drawn with reduced stroke opacity.

Dec 4, 2018

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`.

Dec 3, 2018

Loading thumbnail…

Brush() & Filter()

This visualization demonstrates brush-style filtering interactions on a time-series line chart, using an area chart to display stock prices from June to August 2010. The chart includes a red dashed average line and colored area fills, with data points rendered as circles that respond to mouseover tooltip events. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for coordinate mapping, and d3.axisBottom/d3.axisLeft for axes. The code relies on D3 v5’s selection, area, and curveMonotoneX APIs to construct the SVG-based animated chart, while red/green selection states are applied to the points.

Nov 30, 2018