D3 Examples - crossfilter new

xxxxxxxxxx
 
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
​
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <style>
            h2 {
                float:right;
            }
​
            h4 span{
                font-size: 14px;
                font-weight: normal;
            }
        </style>
    </head>
​
    <body>
        <div class="container" style="font:12px sans-serif;">
            <div class="dc-data-count">
                <h2>
                    New Zealand Earthquakes
                    <span>
                        <span class="filter-count"></span>
                        selected out of
                        <span class="total-count"></span>
                        records |
                        <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
                    </span>
                </h2>
            </div>
            <div class="row">
                <div class="span6" id="dc-orders-chart">
                    <h4>Events by orders
                        <span>
                            <a class="reset" style="display:none" href="javascript:ordersChart.filterAll(); dc.redrawAll();">Reset</a>
                        </span>
                    </h4>
                </div>
                <div class="span6" id="dc-revenue-chart">
                    <h4>Events By revenue
                        <span>
                            <a class="reset" style="display:none" href="javascript:revenueChart.filterAll(); dc.redrawAll();">Reset</a>
                        </span>
                    </h4>
                </div>
            </div>
            <div class="row">
                <div class="span12" id="dc-time-chart">
                    <h4>Events Per Hour
                        <span>
                            <a class="reset" style="display:none" href="javascript:timeChart.filterAll(); dc.redrawAll();">Reset</a>
                        </span>
                    </h4>
                </div>
            </div>
            <div class="row">
                <div class="span4" id="dc-dayweek-chart">
                    <h4>Day of the week
                        <span>
                            <a class="reset" style="display:none" href="javascript:dayOfWeekChart.filterAll(); dc.redrawAll();">Reset</a>
                        </span>
                    </h4>
                </div>
                <div class="span4" id="dc-island-chart">
                    <h4>North or South Island
                        <span>
                            <a class="reset" style="display:none" href="javascript:islandChart.filterAll(); dc.redrawAll();">Reset</a>
                        </span>
                    </h4>
                </div>
                <div class="span4">
                    <h4>Blank</h4>
                </div>
            </div>
            <div class="row">
                <div class="span12">
                    <table class="table table-hover" id="dc-table-graph">
                        <thead>
                            <tr class="header">
                                <th>DTG</th>
                                <th>Lat</th>
                                <th>Long</th>
                                <th>revenue</th>
                                <th>orders</th>
                                <th>Google Map</th>
                                <th>OSM Map</th>
                            </tr>
                        </thead>
                    </table>
                </div>
​
            </div>
        </div>
​
        <script>
            var dataTable = dc.dataTable("#dc-table-graph");
            var ordersChart = dc.barChart("#dc-orders-chart");
            var revenueChart = dc.barChart("#dc-revenue-chart");
            var timeChart = dc.lineChart("#dc-time-chart");
            var dayOfWeekChart = dc.rowChart("#dc-dayweek-chart");
            var islandChart = dc.pieChart("#dc-island-chart");
​
            //d3.csv("quakes.csv", function (data) {
          var data = [
  {
  "productName": "Nexus 5",
  "timestamp": "2016-09-19T01:33:43Z",
  "revenue": 8615,
  "orders": 323
}, {
  "productName": "Nexus 6",
  "timestamp": "2017-04-30T02:47:26Z",
  "revenue": 8167,
  "orders": 257
}, {
  "productName": "Pixel",
  "timestamp": "2017-03-16T21:48:10Z",
  "revenue": 1396,
  "orders": 136
}, {
  "productName": "iPhone1",
  "timestamp": "2016-09-18T15:06:16Z",
  "revenue": 3628,
  "orders": 149
}, {
  "productName": "iPhone3G",
  "timestamp": "2017-05-27T03:02:55Z",
  "revenue": 8736,
  "orders": 467
}, {
  "productName": "iPhone 3GS",
  "timestamp": "2016-06-21T17:24:58Z",
  "revenue": 4836,
  "orders": 374
}, {
  "productName": "iPhone4",
  "timestamp": "2016-10-07T18:29:22Z",
  "revenue": 3211,
  "orders": 420
}, {
  "productName": "iPhone4S",
  "timestamp": "2016-06-16T04:56:39Z",
  "revenue": 9871,
  "orders": 391
}, {
  "productName": "iPhone5",
  "timestamp": "2017-06-01T19:19:53Z",
  "revenue": 5671,
  "orders": 163
}, {
  "productName": "iPhone5S",
  "timestamp": "2016-10-17T09:51:53Z",
  "revenue": 3309,
  "orders": 378
}, {
  "productName": "iPhone6",
  "timestamp": "2016-06-15T01:09:41Z",
  "revenue": 5214,
  "orders": 449
}, {
  "productName": "iPhone6S",
  "timestamp": "2016-10-31T21:37:44Z",
  "revenue": 6165,
  "orders": 408
}, {
  "productName": "iPhone7",
  "timestamp": "2016-09-26T01:13:14Z",
  "revenue": 8476,
  "orders": 413
}, {
  "productName": "Red t-shirt",
  "timestamp": "2016-10-07T16:13:58Z",
  "revenue": 1024,
  "orders": 175
}, {
  "productName": "Blue t-shirt",
  "timestamp": "2016-06-22T22:22:14Z",
  "revenue": 1633,
  "orders": 353
}, {
  "productName": "Green t-shirt",
  "timestamp": "2016-06-16T19:40:41Z",
  "revenue": 9695,
  "orders": 494
}, {
  "productName": "White t-shirt",
  "timestamp": "2016-08-18T21:31:04Z",
  "revenue": 1140,
  "orders": 240
}
];
                var dtgFormat = d3.time.format("%Y-%m-%dT%H:%M:%S");
​
                data.forEach(function (d) {
                    d.dtg = dtgFormat.parse(d.timestamp.substr(0, 19));
                    d.lat = +d.latitude;
                    d.long = +d.longitude;
                    d.mag = d3.round(+d.orders, 1);
                    d.revenue = d3.round(+d.revenue, 0);
                });
​
                var facts = crossfilter(data);
​
                var all = facts.groupAll();
​
                dc.dataCount('.dc-data-count')
                        .dimension(facts)
                        .group(all);
​
                var magValue = facts.dimension(function (d) {
                    return d.mag;
                });
​
                var magValueGroupCount = magValue.group()
                        .reduceCount(function (d) {
                            return d.mag;
                        });
​
                var revenueValue = facts.dimension(function (d) {
                    return d.revenue;
                });
​
                var revenueValueGroup = revenueValue.group();
​
                var volumeByHour = facts.dimension(function (d) {
                    return d3.time.hour(d.dtg);
                });
​
                var volumeByHourGroup = volumeByHour.group()
                        .reduceCount(function (d) {
                            return d.dtg;
                        });
​
                var dayOfWeek = facts.dimension(function (d) {
                    switch (d.dtg.getDay()) {
                        case 0:
                            return "Sun";
                        case 1:
                            return "Mon";
                        case 2:
                            return "Tue";
                        case 3:
                            return "Wed";
                        case 4:
                            return "Thu";
                        case 5:
                            return "Fri";
                        case 6:
                            return "Sat";
                    }
                });
​
                var dayOfWeekGroup = dayOfWeek.group();
​
                var islands = facts.dimension(function (d) {
                    if (d.lat <= -40.555907 && d.long <= 174.590607) {
                        return "South";
                    }
                    return "North";
                });
​
                var islandsGroup = islands.group();
​
                var timeDimension = facts.dimension(function (d) {
                    return d.dtg;
                });
​
                ordersChart.width(480)
                        .height(150)
                        .margins({top: 10, right: 10, bottom: 20, left: 40})
                        .dimension(magValue)
                        .group(magValueGroupCount)
                        .transitionDuration(500)
                        .centerBar(true)
                        .gap(92)
//                            .filter([3, 5])
//                            .x(d3.scale.linear().domain([0.5, 7.5]))
                        .x(d3.scale.linear().domain(d3.extent(data, function (d) {
                            return d.mag
                        })))
                        .elasticY(true)
                        .xAxis().tickFormat();
​
                revenueChart.width(480)
                        .height(150)
                        .margins({top: 10, right: 10, bottom: 20, left: 40})
                        .dimension(revenueValue)
                        .group(revenueValueGroup)
                        .transitionDuration(500)
                        .centerBar(true)
//                            .gap(-100)
//                            .filter([3, 5])
                        .x(d3.scale.linear().domain([0, 100]))
//                            .x(d3.scale.linear().domain(d3.extent(data, function (d) {
//                                return d.revenue
//                            })))
                        .elasticY(true)
                        .xAxis().tickFormat(function (v) {
                    return v;
                });
​
                timeChart.width(960)
                        .height(150)
                        .margins({top: 10, right: 10, bottom: 20, left: 40})
                        .dimension(volumeByHour)
                        .group(volumeByHourGroup)
                        .transitionDuration(500)
                        //Disable Filtering and add tooltip
                        .brushOn(false)
                        .title(function (d) {
                            return "Number Of Events : " + d.data.value;
                        })
                        //End of tooltip
                        .elasticY(true)
                        .x(d3.time.scale().domain(d3.extent(data, function (d) {
                            return d.dtg
                        })))
                        .xAxis();
​
                dayOfWeekChart.width(300)
                        .height(200)
                        .margins({top: 5, left: 10, right: 10, bottom: 20})
                        .dimension(dayOfWeek)
                        .group(dayOfWeekGroup)
                        .colors(d3.scale.category10())
                        .label(function (d) {
                            return d.key;
                        })
                        .title(function (d) {
                            return d.value;
                        })
                        .elasticX(true)
                        .xAxis().ticks(4);
​
                islandChart.width(250)
                        .height(220)
                        .radius(100)
                        .innerRadius(30)
                        .dimension(islands)
                        .group(islandsGroup)
                        .title(function (d) {
                            console.log(d);
                            return d.value
                        });
​
                dataTable.width(960).height(800)
                        .dimension(timeDimension)
                        .group(function (d) {
                            return "Earthquake Table"
                        })
                        .size(10)
                        .columns(
                                [
                                    function (d) {
                                        return d.dtg
                                    },
                                    function (d) {
                                        return d.lat
                                    },
                                    function (d) {
                                        return d.long
                                    },
                                    function (d) {
                                        return d.revenue
                                    },
                                    function (d) {
                                        return d.mag
                                    },
                                    function (d) {
                                        return '<a href=\"https://maps.google.com/maps?z=12&t=m&q=loc:' +
                                                d.lat + '+' + d.long + "\" target=\"_blank\">Google Map</a>";
                                    },
                                    function (d) {
                                        return '<a href=\"https://www.openstreetmap.org/?mlat=' +
                                                d.lat + '&mlon=' + d.long + '&zoom=12' +
                                                "\" target=\"_blank\"> OSM Map</a>";
                                    },
                                ]
                                )
                        .sortBy(function (d) {
                            return d.dtg
                        })
                        .order(d3.ascending);
​
                dc.renderAll();
            //});
​
        </script>
    </body>
</html>
​
    