D3 Examples - Crossfilter examples (d3)

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <title>D3 nest examples</title>
    <script src="https://d3js.org/d3.v2.js"></script>
   <script src="crossfilter.min.js"></script>
​
    <script src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Tienne' rel='stylesheet' type='text/css'>
​
    <style>
        body {
            font-family: 'Tienne', serif;
            font-size: 12px;
        }
        table {
​
            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>
​
<script>
    d3.csv("./data_simple.csv", function(csv_data){
​
​
        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>
    