Get started with crossfilter CDN

Apache-2.0 licensed

Crossfilter is a library for filtering and aggregating large datasets in the browser.

Tags:
  • square
  • analytics
  • visualization

Stable version

Copied!

How to start using crossfilter CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with crossfilter CDN - cdnhub.io</title>
    <script src="https://cdn.cdnhub.io/crossfilter/1.3.12/crossfilter.min.js"></script>
</head>
<body>
    <script>
        // Sample data
        const data = [
            { name: 'Alice', age: 25, city: 'New York' },
            { name: 'Bob', age: 30, city: 'Los Angeles' },
            { name: 'Charlie', age: 28, city: 'Chicago' },
            { name: 'David', age: 35, city: 'New York' },
        ];

        // Create a new Crossfilter instance
        const cf = crossfilter(data);

        // Create dimensions and filters
        const nameDim = cf.dimension(d => d.name);
        const ageDim = cf.dimension(d => d.age);
        const cityDim = cf.dimension(d => d.city);

        // Create a group for age dimension
        const ageGroup = ageDim.group();

        // Dispatch a chart update when filters change
        nameDim.onFilterChange(redraw);
        ageDim.onFilterChange(redraw);
        cityDim.onFilterChange(redraw);

        // Filter the data based on user input
        const nameFilter = nameDim.filter('Alice');
        const ageFilter = ageDim.filter(50); // no data matches this filter
        const cityFilter = cityDim.filter('New York');

        // Update the chart with the new filters
        function redraw() {
            // Your chart updating logic here
            // For example, update a D3 chart
            // ...
        }

        // Apply filters
        nameFilter.apply();
        ageFilter.apply();
        cityFilter.apply();
    </script>
</body>
</html>
Copied!
Copied!

All versions