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!