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

The source code for gliesians.com is for sale on Ebay.

I've decided to shut down gliesians.com and sell the source code. If anyone is looking to purchase the related source, you can find it...