Margin Convention II with ReactiveModel

100%

Margin Convention II with ReactiveModel

✓ Published0🌍 Public

Last edited Jun 13, 2016

Created on Apr 17, 2016

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.

AI-generated description

<p align="center"> <img src="https://cloud.githubusercontent.com/assets/68416/15611401/d2a2f8ca-2447-11e6-82f8-61701f43d49e.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 a variation of <a href='http://bl.ocks.org/curran/b8e76dd7003538975b3e81e86ac6dd1e'>Margin Convention with ReactiveModel</a> that encapsulates functionality using "reactive mixins" and reactiveModel.call. This demonstrates how property definitions and pieces of reactive behavior can be organized and potentially split off into separate modules. The purpose of this is to allow common patterns used by many data visualizations to be encapsulated as reusable modules, allowing the complexity of visualizations to grow while still being manageable and well organized. The model.call(fn) method was added in release v0.7.0, inspired by call() in d3-selection.

Similar vizzes

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

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

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

84% match

Loading thumbnail…

Responsive Margin Convention

This example shows a reusable pattern for building responsive visualizations that maintain consistent margins as the window resizes. It uses the `d3` library (v5) to render an SVG with a rounded rectangle that fills the available space within the specified margin. The `marginConvention` function translates a group element to the margin offset and calculates the inner dimensions, while the `index.js` file re-renders on window resize. The code demonstrates the classic D3 margin convention, using `d3.select` and SVG attributes like `width`, `height`, and `transform`.

CCurran Kelleher

82% match

Loading thumbnail…

Responsive Margin Convention

This example demonstrates how to apply the D3.js margin convention in a responsive visualization that adapts to the full browser window. It renders an SVG with axes and a rounded rectangle, using d3.axisLeft and d3.axisBottom with linear scales. The marginConvention function calculates inner dimensions and translates a group element, while a resize listener re-renders the chart on window changes. The code reuses selections with .merge() to update elements efficiently.

PParamjeet Dhiman

81% match

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

79% match

Loading thumbnail…

Margin Convention

A demonstration of the D3 margin convention for laying out SVG charts. The visualization shows nested rectangles and axis arrows with labels that clarify the positions of margins, padding, and the coordinate origin. The code uses `d3.select` to append an SVG, `d3.svg.axis` for the bottom and right axes, and `d3.scale.identity` for linear scaling. It explicitly defines `margin` and `padding` objects in JavaScript and translates a G element to establish the chart origin, rendering axes and annotations in SVG.

FFrissAnalytics

79% match

Loading thumbnail…

Margin Convention

FFrissAnalytics

79% match