Fakes a pair of checkboxes using a dc rowChart and making the bars square.
Last active
December 8, 2015 16:42
-
-
Save KatiRG/ab8c164bc7018e08976f to your computer and use it in GitHub Desktop.
dc.js checkbox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment