Crossfilter

100%

✓ Published0🌍 Public

Last edited Feb 7, 2017

Created on Jan 30, 2017

This visualization uses the Crossfilter library with D3.js v4 to explore a dataset of over 3 million flights through four linked bar charts showing time of day, arrival delay, distance, and date. Users can brush any chart to filter the flight list below, which updates all other charts and the selection count via crossfilter’s dimensions and groups. The charts use `d3.scaleLinear` and `d3.scaleTime`, with bar charts rendered as SVG and brushed ranges applying crossfilter filters. Data is loaded as CSV from a GitHub Pages-hosted JSON file.

AI-generated description

This is an updated version of this demo of the crossfilter library. Crossfilter has been one of my favorite - and what I think to be on of the most underrated - JavaScript libraries. It hasn't seen much of any updates in quite a while, so I wanted to find out how it would work with version 4 of d3.js.

There were some issues that came up with how d3-brush has been updated for v4. Big thanks goes to Alastair Dant (@ajdant) for helping to figure out a couple of those issues!

Also worth reading, is this discussion started by Robert Monfera (@monfera).

Similar vizzes

Loading thumbnail…

Interactive Dashboard showing various charts

This interactive dashboard presents a multifaceted analysis of flight delays using several D3.js charts. It includes a horizontal bar chart showing the top 15 destination airports by flight frequency, a stacked bar chart detailing average delay times and reasons for various airlines, and four donut charts that display the percentage of flights delayed (more or less than 15 minutes) by arrival, departure, airline, and origin airport. Built with D3 v5, the visualizations render as SVGs and incorporate interactive tooltips for detailed data inspection, with data sourced from a Flight Delay Analysis dataset.

JJosvin John

75% match

Loading thumbnail…

A4 - Bar Chart in D3

This bar chart visualizes the number of delayed flights for various airports using data from a CSV file of airline statistics. Rendered using SVG, the visualization uses D3.js scales and axes to map airport codes along the x-axis and delay counts along the y-axis. Each bar is colored turquoise, with values labeled above the bars. The chart highlights comparative delays across airports, allowing viewers to quickly identify those with higher congestion or operational issues. The implementation leverages d3.select, d3.csv, d3.scaleBand, and d3.scaleLinear to structure the data and layout.

Bbhavi.kenia@gmail.com

73% match

Loading thumbnail…

Fork of Interactive Dashboard showing various charts

This interactive dashboard visualizes flight delay data from a GitHub-hosted CSV, combining six charts into a single view. It shows the top 15 destination airports by flight count, a stacked bar chart of average departure delay times per airline colored by cancellation reason, and four donut charts breaking down departure and arrival delays by airline and airport. The donut charts use `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for coloring, with tooltips displaying percentage values. The bar charts rely on `d3.scaleBand` and `d3.scaleLinear`, while all visuals are rendered as SVG with D3 v5.

AAamir Hameed mir

72% match

Loading thumbnail…

Dashboard

This dashboard visualizes flight data using D3 v4 and Dimple, with ten SVG charts. It displays yearly flight totals as bars, the proportion of on-time versus cancelled flights as a pie chart, and cancelled flight counts by year and by cancellation code. Additional bar charts break down flight volume by month, day of month, and day of week. The data is loaded from JSON files and rendered with dimple.js, with custom red series styling for highlighted circles.

Aaguijarro

71% match

Loading thumbnail…

Dashboard

This dashboard presents a comprehensive visualization of flight statistics, displaying ten distinct charts that explore different dimensions of airline performance data. The layout includes a bar chart showing yearly flight totals, a pie chart illustrating the proportion of on-time versus cancelled flights, and grouped bar charts comparing flight cancellations by year and by cancellation code. Additional charts display monthly flight trends and distributions across days of the month and days of the week. The visualizations are built with D3.js v4 and rendered as SVG elements using the Dimple.js charting library, with each chart having its own container and consistent styling. The color scheme uses a custom palette with green, purple, blue, red, and gray tones, and the dashboard presents airline flight data in a multi-chart format for comprehensive analysis.

Aaguijarro

71% match

Loading thumbnail…

Chiasm Crossfilter Integration

This example shows a linked crossfilter dashboard with a Leaflet bubble map and a bar chart, driven by Chiasm’s reactive component architecture. Brushing the bar chart filters the map’s circles by date, using `ChiasmCrossfilter` to aggregate event data by month and latitude/longitude. D3 v3 renders the bar chart and map, while the layout plugin manages the vertical split and the dataset loader fetches the `events` data. Crossfilter 1.3.12 handles multidimensional filtering across the two visualizations.

Bbasskur

71% match

Loading thumbnail…

A7 Multi-Line Chart

This multi-line chart visualizes average annual flight delays across four airline categories using CSV data from a GitHub-hosted airlines dataset. The visualization employs D3.js v7 with SVG rendering, displaying four distinct colored lines with interactive circle markers. The chart uses d3.scaleLinear, d3.line, and d3.axisBottom, while implementing hover-based tooltips to reveal specific year and delay values. ColorBrewer provides the categorical color scheme for distinguishing between airline groups.

Hhxu51@usfca.edu

71% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Assignment 5: bubble plot with D3

This interactive dashboard visualizes airline delay patterns through four coordinated D3.js v7 charts: small multiples comparing late aircraft versus national aviation system delays across months, a time series of delay types, a stacked bar chart showing delay proportions by carrier, and a bar chart of average delay minutes. It includes year and carrier filters that update all views simultaneously, alongside tooltips and interactive legends. The visualization uses D3 scales, axes, stacking, and line generators with animated transitions on CSV data loaded from GitHub.

NNita

70% match