Crossfilter examples (d3)

<!DOCTYPE html>
<html>
<head>
    <title>D3 nest examples</title>
    <script src="https://d3js.org/d3.v2.js"></script>
   <script src="crossfilter.min.js"></script>

margin:0px;padding:0px;
            /*box-shadow: 10px 10px 5px #888888;*/
            border:1px solid #000000;
            margin-bottom: 10px;
        }
        tr:nth-child(odd){ background-color:#dbecfc; }

tr:nth-child(even)    { background-color:#ffffff; }
        td{

vertical-align:middle;

border:1px solid #000000;

border-width:0px 1px 1px 0px;

text-align:left;

padding:3px;

color:#000000;

}
    </style>

</head>
<body>
<h1>D3 Crossfilter Examples</h1>
<p>Here is my learning process for getting to grips with crossfilter.</p>
<p>The data is a subset of data on the effects of flouridation.  DMFT is a count of Decayed, Missing or Filled Teeth.</p>
<h3>Dimension - Simple</h3>
<code>test
</code>
<h3>Dimension</h3>
    <p>Dimension effectively sorting by column.  Top giving highest first by default</p>
    <p>Country Dimension - display all</p>
    <code>
        var cf.country = cf.dimension(function(d) { return d.Country; });<br/>
        output cf.country.top(Infinity)<br/>
    </code>
    <span id="ex1a"></span>

<p>Year Dimension - display highest 4</p>
    <code>
        var cf.year = cf.dimension(function(d) { return d.Year; });<br/>
        output cf.year.top(4)<br/>
    </code>
    <span id="ex1b"></span>

<p>DMFT Dimension - display highest 4</p>
    <code>

var cf.dmft = cf.dimension(function(d) { return d.DMFT; });<br/>
        output cf.dmft.top(4)<br/>
    </code>
    <span id="ex1c"></span>

<h3>Filter</h3>
    <p>Add a filter to the dimension - just Ireland</p>
    <code>
        var f1 = cf.country.filterExact("Ireland");<br>
        output f1.top(Infinity)<br/>
    </code>
    <span id="ex2a"></span>

<p>Filters are cumulative, adding a filter for year for 1990-2000 gives all Ireland records for the year range.  Note filterExact seems to act like filterRange if a list is passed.</p>
    <code>
        var f2 = cf.year.filterExact([1990,2000]);<br>
        output f2.top(Infinity)<br/>
    </code>
    <span id="ex2b"></span>

<p>To get all records for year for 1990-2000, clear the filter for country</p>
    <code>
        cf.country.filterAll()<br>
        var f3 = cf.year.filterRange([1990,2000]);<br>
        output f3.top(Infinity)<br/>
    </code>
    <span id="ex2c"></span>

<p>Range selects greater than or equal to min and less than max, range reduced to 1993-1997</p>
    <code>
        cf.country.filterAll()<br>
        var f3 = cf.year.filterRange([1993,1997]);<br>
        output f3.top(Infinity)<br/>
    </code>
    <span id="ex2d"></span>

<p>Simple dimension and group gives count of items in each group.</p>
    <code>
        var d1 = cf.dimension(function(d) { return d.Country; });<br/>

var f1 = d1.group();<br/>

output f1.top(Infinity)<br/>

</code>
    <textarea id="ex2" rows="15" cols="30"></textarea>

var cf = crossfilter(csv_data);

cf.country = cf.dimension(function(d) { return d.Country; });
        $("#ex1a").html(totable(cf.country.top(Infinity)));

cf.year = cf.dimension(function(d) { return d.Year; });
        $("#ex1b").html(totable(cf.year.top(4)));

cf.dmft = cf.dimension(function(d) { return d.DMFT; });
        $("#ex1c").html(totable(cf.dmft.top(4)));

var f1 = cf.country.filterExact("Ireland");
        $("#ex2a").html(totable(f1.top(Infinity)));

var f2 = cf.year.filterRange([1990,2000]);
        $("#ex2b").html(totable(f2.top(Infinity)));

cf.country.filterAll();
        var f3 = cf.year.filterRange([1990,2000]);
        $("#ex2c").html(totable(f3.top(Infinity)));

var f4 = cf.year.filterRange([1993,1997]);
        $("#ex2d").html(totable(f4.top(Infinity)));

var d1 = cf.dimension(function(d) { return d.Country; });

var f1 = d1.group();

$("#ex2").html(JSON.stringify(f1.top(Infinity), null, 3));

});

function totable(json) {

var html = "";

json.forEach(function(row) {
            html += "<tr>";
            for (key in row) {
                  html += "<td>"+row[key]+"</td>";
            };
            html += "</tr>";

});

return "<table>" + html + "</table>";
    }
</script>
</body>
</html>

Modified http://d3js.org/d3.v2.js to a secure url

https://d3js.org/d3.v2.js

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js