ReactiveModel Resize

100%

ReactiveModel Resize

✓ Published0🌍 Public

Last edited Jun 13, 2016

Created on Apr 14, 2016

This example demonstrates a D3 v4 visualization that dynamically resizes to fill its container using ReactiveModel. The code renders two diagonal lines forming an X, with stroke widths and positions updated on window resize events. ReactiveModel orchestrates reactive properties for width, height, and the SVG element, while d3.selection.merge efficiently handles enter and update selections. The visualization responds to container size changes by reading clientWidth and clientHeight, redrawing the lines each animation frame.

AI-generated description

<p align="center"> <img src="https://cloud.githubusercontent.com/assets/68416/15610474/0b70d7c6-2443-11e6-8f8f-3dcbbac3dbae.png"> <br> The data flow graph for this example (made with <a href="https://github.com/datavis-tech/graph-diagrams">graph-diagrams</a>). </p>

This example shows how to make a dynamic graphic using D3 4.0 and ReactiveModel that fills its containing element and responds to resize. This is useful when, for example, you want to be able to load your visualization "full screen" and give users the ability to size the window however they want to. It's also useful when you want to use CSS to define the size of a visualization container, then have the visualization automatically fit inside it.

To experience the resize behavior, run this example full-screen and resize the browser.

Part of a series of examples demonstrating ReactiveModel.

Notes:

This is using an alpha version of D3 4.0. The main difference in this example from D3 3.5 is the use of selection.merge, which merges enter with update.
The call to addProperties instantiates instances of reactive-property with the given defaults. These behave similarly to the getter-setter functions described in Towards Reusable Charts.
The function that takes (svg, width, height) as input becomes a reactive-function. This will be invoked once all inputs are defined, and when any inputs change. It is invoked at most once every animation frame, so there are no unnecessary DOM updates. In other words, even if there are many resize events fired per animation frame, the DOM will only be updated with the most recent width and height values each frame (at most 60 times per second, synchronized with the display).

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/3a68b0c81991e2e94b19'>Responding to Resize</a>

Built with blockbuilder.org

<div align="center"><img src="http://simplehitcounter.com/hit.php?uid=2072503&f=16777215&b=0" border="0" height="18" width="83"></div>

mit Licensed

Similar vizzes

Loading thumbnail…

Reactive Mixins

This example demonstrates how to encapsulate reusable graphical behaviors using Model.js and D3.js, with a focus on dynamic resizing. It shows a margin convention that adjusts an SVG’s width and height, a gray background rectangle, a large diagonal X, and a centered circle, all clipped by a rectangle that follows the inner dimensions. The visualization responds to window resizing by reading the container’s size via `clientWidth` and `clientHeight`, then updating the model’s `box` property, which triggers the reactive `my.when` callbacks to redraw. The code uses D3’s selection and data-join patterns for lines and rects, alongside Model.js’s reactive property tracking to coordinate layout and rendering.

CCurran Kelleher

85% match

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3 v5 visualization can dynamically resize to fill its browser window. It shows two thick, semi-transparent green lines forming an X that stretches and contracts as the viewport changes. The code uses the CSS `position: fixed` property with `clientWidth` and `clientHeight` to compute the current container dimensions on every window `resize` event. A `redraw` function updates the SVG’s width and height attributes and rebinds the line data, using the d3 selection `merge` pattern to efficiently update existing elements. Rendering is done via the SVG API.

DDavid Victor

82% match

Loading thumbnail…

Responding to Resize

This example demonstrates a D3.js visualization that dynamically resizes an SVG graphic to match its container’s dimensions. The page’s CSS fixes the chart div to fill the viewport, and the `redraw` function reads `clientWidth` and `clientHeight` to update the SVG’s width and height attributes. It then draws two green, semi-transparent diagonal lines forming an X, whose endpoints are recalculated on every resize. The code uses the browser’s `resize` event listener to invoke `redraw`, alongside D3’s data join for efficient line updates.

Xxhoumba

82% match

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can dynamically adjust to fit its container. It draws a large green X composed of two diagonal lines that stretch from corner to corner, with the SVG element’s width and height updated to match the chart div’s client dimensions. The code uses `d3.select` and `selection.attr` to resize the SVG, and a `window.addEventListener("resize", redraw)` function to trigger the redraw. The rendering approach is SVG, with the chart container styled via CSS to fill the entire viewport.

Ddbidwai

81% match

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can respond to browser resizing by redrawing its content to match the new dimensions. The page uses a CSS-styled container and a redraw function that reads `clientWidth` and `clientHeight` to set the SVG’s `width` and `height` attributes. It draws two green lines forming an X across the full viewport, with strokes updated on each resize event. The code uses D3 v5 with `d3.select`, `svg.attr`, and `window.addEventListener` to handle the dynamic resizing.

MManikyapavan

81% match

Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can dynamically respond to browser window resizing. It uses the CSS `clientWidth` and `clientHeight` properties to extract the current container size and applies these dimensions to an SVG element via the `attr` method. Two diagonal lines are drawn across the SVG to visually confirm the correct sizing, with a resize event listener triggering a full redraw. The code relies on D3 v5’s selection and data join patterns to update the line coordinates.

CCurran Kelleher

81% match

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js v5 visualization can respond dynamically to browser resize events. An SVG element fills the viewport via CSS positioning, and a redraw function extracts the container’s current pixel dimensions using `clientWidth` and `clientHeight`. The code then sets the SVG’s `width` and `height` attributes accordingly and renders two green diagonal lines to form an X, with an event listener on `window` for the `resize` event triggering the redraw. The visualization uses a data join with `selectAll` and `enter` to update the lines.

SShokoLocoMocco

81% match

Loading thumbnail…

Responding to Resize

This example demonstrates a D3.js v5 visualization that dynamically resizes an SVG to match the browser window. The page uses a fixed-position container to fill the viewport, and a `redraw` function reads the container’s `clientWidth` and `clientHeight` to update the SVG’s dimensions. It draws an X composed of two green lines with 100-pixel stroke width and 0.5 opacity, using a data join with `selectAll`, `enter`, and `merge`. A `window` resize event listener triggers `redraw` each time the window size changes.

Bblourabie

81% match