dc.js checkbox

Fakes a pair of checkboxes using a dc rowChart and making the bars square.

<!DOCTYPE html>
<html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/css/bootstrap.min.css" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js"></script>
    
    <link href="style.css" rel="stylesheet" type="text/css" media="all">

.dc-chart g.row text {
        fill: black;
        font-size: 12px;
      }

#chart-category .axis line {
        stroke: none    
      }
      
      #chart-category g.axis {
        display: none    
      }
    </style>
  </head>

<div class="container">
          <p>Use a dc rowChart to make checkboxes.</p>

<div class="row">
             
                <div class="col-lg-2">
                  <div id="chart-category">
                      <div class="filterName">Index type
                          <a class="reset" href="javascript:categoryChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                          <span class="reset" style="display: none;"></span>
                      </div>
                    </div>                             
                </div>

<div class="col-lg-4">
                  <div id="chart-index">
                      <div class="filterName">Index
                          <a class="reset" href="javascript:indexChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
                          <span class="reset" style="display: none;"></span>
                      </div>
                    </div>                             
                </div>

</div>
          
      </div> 
    </div>

d3.csv("data.csv", function(csv) {

indexColours = ["#F74427", "#F74427", "#BCE1D9"];
        indexNames = ["Idx 1", "Idx 2", "Idx 3"];
        indexID={
            1: "Idx 1",
            2: "Idx 2",
            3: "Idx 3"
        };

var filter = crossfilter(csv);

var indexDimension = filter.dimension(function(d) { return +d.Index; }),
            categoryDimension = filter.dimension(function(d) {                
                if (+d.Index == 1 || +d.Index == 2) return "A";
                else return "B";
            });

var indexGroup = indexDimension.group(),
            categoryGroup = categoryDimension.group();

categoryChart //rowChart
          .width(100).height(100)
          .colors([indexColours[0], indexColours[2]])
          .dimension(categoryDimension)          
          .group(categoryGroup)
          .valueAccessor(function(d) {
            return 50; //fixed size to make a square checkbox
          })
          .title(function(d) { return d.key; })
          .renderlet(function (chart) {
            chart.selectAll("g").selectAll("row _0").attr("transform", "translate(38, 0)");
            chart.selectAll("g").selectAll("row _1").attr("transform", "translate(-38, 0)");
          });

categoryChart.xAxis().tickFormat(function(v) { return ""; });

// =================
        indexChart //barChart
          .width(400).height(235)
          .margins({
            top: 10,
            right: 30,
            bottom: 30,
            left: 50
          })
          .dimension(indexDimension)
          .group(indexGroup)
          .renderHorizontalGridLines(true)
          .gap(1)
          .title(function(d, i) {            
            return indexID[i+1] + ": " + d.data.value + " counts";
          })                    
          .x(d3.scale.ordinal().domain(indexNames))
          .xUnits(dc.units.ordinal) // Tell dc.js that we're using an ordinal x-axis;
          .y(d3.scale.linear().domain([0, 25]))
          .yAxisLabel("Count");

indexChart
          .yAxis().tickFormat(d3.format("d")).tickValues([0, 5,10,15,20,25]);

indexChart.renderlet(function(chart) {
          chart.selectAll('g rect.bar').each(function(d, idx) {
            if (d3.select(this).attr("class") == "bar deselected") {
              d3.select(this).style("fill", "#ccc");
            } else {
              d3.select(this).style("fill", indexColours[idx]);
            }
          });
        });

indexChart.renderlet(function(chart) {
          // rotate x-axis labels
          chart.selectAll('g.x text')
          .attr('transform', 'translate(-10,10) rotate(315)');
        });
      
        // =================
        dc.renderAll();

}); //end csv

</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js

https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.2/js/bootstrap.min.js