CrossFilter, dc.js

forked from nivas8292's block: CrossFilter, dc.js

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-magnitude-chart">
                    <h4>Events by Magnitude
                        <span>
                            <a class="reset" style="display:none" href="javascript:magnitudeChart.filterAll(); dc.redrawAll();">Reset</a>
                        </span>
                    </h4>
                </div>
                <div class="span6" id="dc-depth-chart">
                    <h4>Events By Depth
                        <span>
                            <a class="reset" style="display:none" href="javascript:depthChart.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>Depth</th>
                                <th>Magnitude</th>
                                <th>Google Map</th>
                                <th>OSM Map</th>
                            </tr>
                        </thead>
                    </table>
                </div>

</div>
        </div>

d3.csv("quakes.csv", function (data) {
                var dtgFormat = d3.time.format("%Y-%m-%dT%H:%M:%S");

data.forEach(function (d) {
                    d.dtg = dtgFormat.parse(d.origintime.substr(0, 19));
                    d.lat = +d.latitude;
                    d.long = +d.longitude;
                    d.mag = d3.round(+d.magnitude, 1);
                    d.depth = d3.round(+d.depth, 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 depthValue = facts.dimension(function (d) {
                    return d.depth;
                });

var depthValueGroup = depthValue.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;
                });

magnitudeChart.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();

depthChart.width(480)
                        .height(150)
                        .margins({top: 10, right: 10, bottom: 20, left: 40})
                        .dimension(depthValue)
                        .group(depthValueGroup)
                        .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.depth
//                            })))
                        .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.depth
                                    },
                                    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>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min.js

https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js