D3 Examples - Reusable waffle charts

Reusable waffle charts

Basic waffle charts using Mike Bostock's [http://bost.ocks.org/mike/chart/](reusable charts) convention. Waffles are configurable, as you can see below:

var waffle = new WaffleChart() .selector(".chart") .data(data) .useWidth(false) .label("Value of producers' sales in 2013, in thousands of dollars") .size(12) .gap(2) .rows(20) .columns(60) .rounded(true)();

Each configuration parameter is as follows:

selector: The container in which to draw a waffle chart.

data: The data to use when drawing the waffle.

useWidth: Whether to constrain the waffle to the container's width.

label: A label to pass to the waffle. Optional.

size: Width and height of each waffle "block", in pixels. Optional. Default: 6.

gap: Gap between each block, in pixels. Optional. Default: 2.

rows: Number of rows of blocks. Optional. Default: 50.

columns: Number of columns of blocks. Optional. Default: 100.

rounded: Whether or not to draw the blocks as circles instead of squares. Optional. Default: false.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
​
  <style>
​
  body {
    font-family: Helvetica, sans serif;
    font-size: 16px;
    color: #333;
  }
​
  .chart {
    margin: 40px;
    width: 620px;
  }
​
  .label {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
  }
​
  .legend {
    padding-bottom: 7px;
  }
​
  .legend_item {
    display: inline-block;
    padding-right: 10px;
    margin-bottom: 2px;
  }
​
  .legend_item_icon, .legend_item_text {
    display: inline-block;
    vertical-align: middle;
  }
​
  .legend_item_icon {
    margin-right: 5px;
    height: 10px;
    width: 10px;
  }
​
  </style>
​
</head>
​
<body>
​
  <div class="chart"></div>
​
​
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="./waffle.js"></script>
​
  <script type="text/javascript">
​
    d3.csv("./data.csv", function(err, data) {
      if (err) {
        console.error(err);
      } else {
        var waffle = new WaffleChart()
          .selector(".chart")
          .data(data)
          .useWidth(false)
          .label("Value of producers' sales in 2013, in thousands of dollars")
          .size(12)
          .gap(2)
          .rows(20)
          .columns(50)
          .rounded(true)();
      }
    });
​
    // source: https://statshb.capp.ca/SHB/Sheet.asp?SectionID=4&SheetID=265
​
  </script>
​
</body>
​
</html>
    