D3 Examples - Reactive Mixins for Visualizations

Reactive Mixins for Visualizations

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.

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.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <style>
    
      body {
        background-color: gray;
      }
​
      #container {
        background-color: white;
        position: fixed;
        left:   10px;
        right:  10px;
        top:    10px;
        bottom: 10px;
      }
​
      /* Axis CSS from bar chart example https://bl.ocks.org/mbostock/3885304 */
      .axis {
        font: 10px sans-serif;
      }
​
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
​
      /* Custom CSS for axis labels. */
      .axis-label {
        text-anchor: middle;
        font-size: 1.3em;
      }
​
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="main-build.js"></script>
  </body>
</html>
​
    