Re-do Select Examples on ReactiveModel

[curran]

The motivation behind creating reactive-model is to replace Model.js as the foundation for building interactive data visualization components that can be easily assembled into linked views. This issue serves as an index of "classic" (in my mind at least) examples that I'd like to se re-done using reactive-model as their foundation.

Checklist

• FirstName LastName
• Responding to Resize
• Margin Convention
• Bar Chart
• Horizontal Bar Chart
• Focus + Context Area Charts
• XY Scatter Plot
• X, Y, Size, Color Scatter Plot
• Focus + Context Scatter Plots
• Linked Scatter Plot and Bar Chart
• Linked Choropleth and Line Chart

FirstName LastName

This example demonstrates how the fullName = firstName + " " + lastName example from the unit tests can be attached to DOM elements.

Responding to Resize

This example shows a simple case of how to use ReactiveModel to drive SVG graphics that respond to changes in browser size. This way of dealing with dynamically configurable size will be the foundation for most of the following visualization examples.

Margin Convention

This example shows a version of the D3 Margin Convention that responds to resize. This is the foundation for visualizations with X and Y axes.

Bar Chart

A bar chart component with axes that responds to resize and changes in configuration.

Horizontal Bar Chart

A variation of the bar chart that is horizontal.

Focus + Context Area Charts

A re-creation of the original Focus + Context via Brushing example. The re-do should have axes.

Scatter Plot

This example illustrates handling optional visualization configuration properties like size and color.

Focus + Context Scatter Plots

This example shows the Focus + Context via Brushing pattern with scatter plots.

Linked Scatter Plot and Bar Chart

Brushing in the scatter plot causes the selected data to be aggregated and plotted in the bar chart. This example illustrates the idea of piping the output of an interaction into a data transformation (filter then aggregate) and using that output as the input to a visualization (the bar chart in this case).

Linked Choropleth and Line Chart

This is one of the more complex examples that has linked views with interactions going in both directions.

• Zooming in the choropleth map filters the line chart
• Hovering in the choropleth map shows tooltips, highlights the country in the map with an orange outline, and highlights the country's line in the line chart by making it orange.
• Selecting a year in the line chart by hovering causes the map to show data from that year.
• Clicking in the line chart causes the year to be "pinned" to the selected year (the line returns to that year when the mouse exits the line chart).