D3 Examples - Bootstrap + Chiasm

Bootstrap + Chiasm

This example shows how you can use the multiple instances of the Chiasm layout plugin to inject visualizations into existing elements on the page. In this case, visualizations are injected into DIVs whose layout is managed by Bootstrap Grid System.

Draws from these previous blocks:

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
​
    <meta charset="utf-8">
    <title>Bootstrap Chiasm Example</title>
    
    <style>
      .vis-container{
        background-color: #90EE90;
        border-radius: 20px;
        border-style: solid;
        border-width: 1px;
        border-color: black;
        height: 229px;
        margin-top: 10px;
        margin-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 class="container-fluid">
      <div class="row">
        <div class="col-sm-4">
          <div id="scatterplot-container" class="vis-container"></div>
        </div>
        <div class="col-sm-4">
          <div id="bar-chart-container" class="vis-container"></div>
        </div>
        <div class="col-sm-4">
          <div id="pie-chart-container" class="vis-container"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div id="line-chart-container" class="vis-container"></div>
        </div>
      </div>
    </div>  
    <script src="main-build.js"></script>
  </body>
</html>
​
    