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.forked from tomcardoso's block: Reusable waffle charts
forked from anonymous's block: Reusable waffle charts
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js