Saturday, December 17, 2016

Crossfilter Tutorial by Rusty Klophaus with Webstorm and Chrome

What a great crossfilter tutorial by Rusty Klophaus!  To get it running, I put together the code (see below), along with the following video showing how to run it with Webstrom and Chrome.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
    <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
    <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
    <style>
    </style>
</head>
<body>
<div class="container">

    <script type="text/javascript">

        var livingThings = crossfilter([
// Fact data.
            {name: "Rusty", type: "human", legs: 2},
            {name: "Alex", type: "human", legs: 2},
            {name: "Lassie", type: "dog", legs: 4},
            {name: "Spot", type: "dog", legs: 4},
            {name: "Polly", type: "bird", legs: 2},
            {name: "Fiona", type: "plant", legs: 0}
        ]);

        // How many living things are in my house?

        var n = livingThings.groupAll().reduceCount().value();
        console.log("There are " + n + " living things in my house.") // 6

        // How many total legs are in my house?

        var legs = livingThings.groupAll().reduceSum(function (fact) {
            return fact.legs;
        }).value()
        console.log("There are " + legs + " legs in my house.") // 14

        // Filter for dogs.

        var typeDimension = livingThings.dimension(function (d) {
            return d.type;
        });
        typeDimension.filter("dog")

        var n = livingThings.groupAll().reduceCount().value();

        console.log("There are " + n + " dogs in my house.") // 2

        var legs = livingThings.groupAll().reduceSum(function (fact) {

            return fact.legs;
        }).value()
        console.log("There are " + legs + " dog legs in my house.") // 8

        // Clear the filter.

        typeDimension.filterAll()

        // How many living things of each type are in my house?

        var countMeasure = typeDimension.group().reduceCount();
        var a = countMeasure.top(4);
        console.log("There are " + a[0].value + " " + a[0].key + "(s) in my house.");
        console.log("There are " + a[1].value + " " + a[1].key + "(s) in my house.");
        console.log("There are " + a[2].value + " " + a[2].key + "(s) in my house.");
        console.log("There are " + a[3].value + " " + a[3].key + "(s) in my house.");


        // How many legs of each type are in my house?

        var legMeasure = typeDimension.group().reduceSum(function (fact) {
            return fact.legs;
        });
        var a = legMeasure.top(4);
        console.log("There are " + a[0].value + " " + a[0].key + " legs in my house.");
        console.log("There are " + a[1].value + " " + a[1].key + " legs in my house.");
        console.log("There are " + a[2].value + " " + a[2].key + " legs in my house.");
        console.log("There are " + a[3].value + " " + a[3].key + " legs in my house.");

        // Filter for dogs.

        typeDimension.filter("dog")

        // How many living things of each type are in my house?

        // You’d expect this to return 0 for anything other than dogs,
        // but it doesn’t because the following statement ignores any
        // filter applied to typeDimension:
        var countMeasure = typeDimension.group().reduceCount();
        var a = countMeasure.top(4);
        console.log("There are " + a[0].value + " " + a[0].key + "(s) in my house.");
        console.log("There are " + a[1].value + " " + a[1].key + "(s) in my house.");
        console.log("There are " + a[2].value + " " + a[2].key + "(s) in my house.");
        console.log("There are " + a[3].value + " " + a[3].key + "(s) in my house.");

        // Filter for dogs.

        var typeFilterDimension = livingThings.dimension(function (fact) {
            return fact.type;
        });
        typeFilterDimension.filter("dog")

        // Now this returns what you would expect.

        var countMeasure = typeDimension.group().reduceCount();
        var a = countMeasure.top(4);
        console.log("There are " + a[0].value + " " + a[0].key + "(s) in my house.");
        console.log("There are " + a[1].value + " " + a[1].key + "(s) in my house.");
        console.log("There are " + a[2].value + " " + a[2].key + "(s) in my house.");
        console.log("There are " + a[3].value + " " + a[3].key + "(s) in my house.");

    </script>

</div>
</body>
</html>

No comments:

Post a Comment

OXY 3 Parts Needed

This blog post lists the parts needed to build and operate an OXY 3 .... but first an Oxy 3 unboxing video! Lynx OXY3-255 - Oxy 3 H...