KatiRG/README.md

## README.md

      
    Raw
  

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

  
## data.csv

          
            Index
            Year

            
              1
              1961

            
              1
              1964

            
              1
              1968

            
              1
              1972

            
              1
              1973

            
              1
              1974

            
              1
              1988

            
              1
              2013

            
              1
              2018

            
              1
              2029

            
              1
              2031

            
              1
              2037

            
              1
              2040

            
              1
              2048

            
              1
              2050

            
              1
              2053

            
              1
              2055

            
              1
              2062

            
              1
              2063

            
              1
              2071

            
              1
              2075

            
              1
              2076

            
              1
              2077

            
              1
              2078

            
              1
              2080

            
              2
              1961

            
              2
              1964

            
              2
              1968

            
              2
              1972

            
              2
              1973

            
              2
              1974

            
              2
              1988

            
              2
              2013

            
              2
              2050

            
              2
              2053

            
              2
              2055

            
              3
              1961

            
              3
              1964

            
              3
              1968

            
              3
              1972

            
              3
              1973

            
              3
              1974

            
              3
              1988

            
              3
              2013

            
              3
              2018

            
              3
              2029

            
              3
              2031

            
              3
              2037

            
              3
              2040

            
              3
              2048

            
              3
              2050

            
              3
              2053

            
              3
              2055

## index.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">

    <!-- d3 and dc -->
    <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>


    <!-- css links -->
    <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">

    <style>
      .filterName {
        font-family: sans-serif;
        font-size: 13px;
        font-weight: 700;
        font-style: italic;
        margin-top: 20px;
      }

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

      #chart-category .axis line {
        stroke: none
      }

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

  <body>
    <div id="wrap">

      <!-- Begin page content -->
      <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> <!-- /.container -->
    </div> <!-- /.wrap -->

    <script>
      var chart;

      categoryChart = dc.rowChart("#chart-category");
      indexChart = dc.barChart("#chart-index");

      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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	Index	Year
	1	1961
	1	1964
	1	1968
	1	1972
	1	1973
	1	1974
	1	1988
	1	2013
	1	2018
	1	2029
	1	2031
	1	2037
	1	2040
	1	2048
	1	2050
	1	2053
	1	2055
	1	2062
	1	2063
	1	2071
	1	2075
	1	2076
	1	2077
	1	2078
	1	2080
	2	1961
	2	1964
	2	1968
	2	1972
	2	1973
	2	1974
	2	1988
	2	2013
	2	2050
	2	2053
	2	2055
	3	1961
	3	1964
	3	1968
	3	1972
	3	1973
	3	1974
	3	1988
	3	2013
	3	2018
	3	2029
	3	2031
	3	2037
	3	2040
	3	2048
	3	2050
	3	2053
	3	2055
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">

	<!-- d3 and dc -->
	<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>


	<!-- css links -->
	<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">

	<style>
	.filterName {
	font-family: sans-serif;
	font-size: 13px;
	font-weight: 700;
	font-style: italic;
	margin-top: 20px;
	}

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

	#chart-category .axis line {
	stroke: none
	}

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

	<body>
	<div id="wrap">

	<!-- Begin page content -->
	<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> <!-- /.container -->
	</div> <!-- /.wrap -->

	<script>
	var chart;

	categoryChart = dc.rowChart("#chart-category");
	indexChart = dc.barChart("#chart-index");

	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>