Curran Kelleher curran

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.

This example code by @enjalot is a copy of the default starter code from blockbuilder.org from Sept. 20, 2015. It contains a bare-bones implementation of the D3 Margin Convention.

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.

hello world

forked from psealock's block: D3js and Polymer Web Components

This example shows one way to add a user interface on top of a Chiasm application (using AngularJS). Every time an interaction is performed with the widgets on the left, a new Chiasm configuration is generated and passed into the Chaism runtime environment. The runtime environment then computes the difference between the previous configuration and the new configuration, then executes actions corresponding to the changes to the appropriate component instances.

Features of this example include:

Selection from three preselected data sets from the UCI Machine Learning Repository
Selection of a single column from the selected data set to visualize in the bar chart.
- Numeric columns will be aggregated into bins and presented as a histogram.
- Categorical columns will be aggregated and presented as a bar chart, where each bar corresponds to a unique value.
Selection of bar chart orientation between horizonta

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.

This is one example from the screencast Introduction to Chiasm. It shows how you can use "reactive mixins" to encapsulate chunks of dynamic behavior in data visualizations, and use Chiasm to put multiple visualizations on the same page.

Check out the resize behavior.

This example was the starting point for chiasm-charts, a collection of reactive mixins and reusable visualizations including bar chart, histogram, scatter plot, line chart, and box plot.