Skip to main content
SimilarExport ZIP
100%

Reactive Mixins

✓ Published0🌍 Public
CCurran Kelleher
Last edited Nov 17, 2015
Created on Sep 21, 2015

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.

AI-generated description

This example shows one way to encapsulate the D3 Margin Convention using Model.js.

Check out the resize behavior in full screen mode.

More generally, this example is an experiment in how to generalize self-contained pieces of dynamic graphical behavior. Note that the following three pieces of this visualization are each implemented in separate functions:

  • The margin convention, which
    • resizes the SVG element by setting width and height
    • translates the G element by the margin top and left
    • assigns values to the model properties width and height, which represent the dimensions of the rectangle inside the margin.
  • The background X.
  • The clip rectangle, which will clip the corners of the background X to be within the rectangle inside the margin.

Draws from:

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/2c736a99c2f57bfac7e4'>Margin Convention with Model.js</a>

Similar vizzes

Loading thumbnail…

ReactiveModel Resize

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.

CCurran Kelleher
85% match
Loading thumbnail…

Margin Convention with ReactiveModel

This example demonstrates the Margin Convention pattern for SVG charts, where a gray rectangle represents the inner plotting area within configurable top, bottom, left, and right margins. It shows how margins respond dynamically both to browser resizing and to a continuous animation that varies each margin sinusoidally. Built on D3 v4 and the ReactiveModel library, the visualization uses reactive model declarations to update SVG attributes such as `width`, `height`, `transform`, and rectangle dimensions whenever their input variables change. The code appends an SVG via `d3.select` and uses `requestAnimationFrame` to drive the margin animation loop.

CCurran Kelleher
80% match
Loading thumbnail…

Margin Convention II with ReactiveModel

This example demonstrates the margin convention for data visualization, animating the margins of a gray rectangle within an SVG as they shift in sinusoidal patterns. It shows how reusable code modules—ReactiveSVG, ReactiveMargin, and GrayRectangle—are composed into a MarginVis component using the ReactiveModel library and its `call` method. The visualization uses D3 v4 to append SVG elements and drive the animation via `d3.timer`, while window resizing updates the chart dimensions through the `Resize` function.

CCurran Kelleher
79% match
Loading thumbnail…

Margin Convention with Model.js

This example demonstrates how the D3 Margin Convention can be encapsulated as reusable functions using Model.js, with the SVG element and inner G element automatically resizing to fit the container. The code defines three separate functions—marginConvention, backgroundRect, and a clip rectangle—each managing its own dynamic behavior through Model.js property bindings. It renders a gray background rectangle and a clipped X pattern, with the visualization’s width and height derived from the container’s box dimensions minus the margin. The example uses D3.js for SVG manipulation and Model.js to coordinate reactive updates between the margin, box size, and inner element dimensions.

CCurran Kelleher
78% match
Loading thumbnail…

Margin Convention II with ReactiveModel

This example demonstrates responsive density-based linear axes using D3 v4 and the ReactiveModel library. It combines the margin convention with automatically computed tick counts based on the chart’s pixel dimensions, re-rendering smoothly as the browser resizes. The SVG chart fills the viewport, with a gray inner region and axes whose tick spacing adjusts dynamically. The code relies on ReactiveModel’s declarative reactive dependencies and d3.axisBottom, d3.axisLeft, and d3.scaleLinear for scale and axis management.

CCurran Kelleher
78% match
Loading thumbnail…

Axes with Model.js

This example demonstrates how to encapsulate the D3 Margin Convention using Model.js, with axes that respond to resizing. It shows three reusable functions—margin handling, background rectangles, and clip paths—each managing separate visual behavior. The code uses `d3.svg.axis()` for the x-axis, `d3.scale.linear()` for scaling, and Model.js’s `when` method to coordinate dynamic updates. The visualization renders sample data points in an SVG container, with the margin convention adjusting the inner plot area and axis positions on resize.

CCurran Kelleher
77% match
Loading thumbnail…

Dynamic Size Example

This example demonstrates a responsive nested box layout that reflows dynamically as the browser window resizes. It uses the `d3-boxes` library to compute rectangular regions from a hierarchical layout specification, with configurable size weights for individual nodes and layers. The visualization renders SVG rectangles, diagonal cross-lines, and text labels for each box, with colors assigned via `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart container fills the viewport using CSS positioning, and a resize event listener triggers a full redraw that recomputes all box dimensions from the updated `clientWidth` and `clientHeight`.

CCurran Kelleher
75% match
Loading thumbnail…

Hello React + D3!

This example demonstrates a reusable React component that integrates with D3 to render animated SVG graphics. Dynamic data updates every second, repositioning circles while diagonal lines are redrawn to follow the resizing viewport. The code uses D3 v4 transitions for smooth attribute changes, React's lifecycle methods (`componentDidMount`, `componentWillUnmount`) for setup and cleanup, and a `setInterval` to update the visualization. It also responds to window resizing and keyboard input to toggle the graphic's visibility.

CCurran Kelleher
74% match