Skip to main content
SimilarExport ZIP
100%

Web GUI example with D3 and Crossfilter2

✓ Published0🌍 Public
AAxVa 🐍 💪
Last edited Mar 1, 2024
Created on Feb 28, 2024

This interactive Web GUI, built with D3 and Crossfilter2, visualizes Nobel Prize winners through a coordinated multi-view dashboard. It loads data from `data/nobel_winners.json` and provides filtering by gender and country via dropdown menus, alongside a metric selector. The visualization uses crossfilter for efficient cross-filtering across linked components, which include a scrollable table of winners and a detailed information panel. The table supports hover highlighting and clicking to reveal a winner’s biography, portrait, and key facts, with D3 handling dynamic updates to the DOM and CSS-driven styling.

AI-generated description

Web GUI example with D3 and Crossfilter2

The resources cannot be loaded correctly because of a VizHub bug.

Visit https://github.com/ax-va/Interactive-Data-Visualization-Dale-2023

MIT Licensed

Similar vizzes

Loading thumbnail…

Week 7 - Nobel Prize Winners - Tree Visualization

This interactive tree visualization explores Nobel Prize winners by category and country of birth, using D3 v7 with animated expansion and collapse of branches. The hierarchy groups laureates by prize category, then country, with node size reflecting prize share. The visualization implements auto-expanding subtrees with smooth transitions between states, centered within a responsive SVG viewport. Data comes from a CSV file containing laureate details from 1901 onward, parsed using d3.csvParse. The code leverages d3.hierarchy, d3.tree, and d3.linkHorizontal for layout, with d3.extent for dynamic viewBox calculation.

VVinayak Revankar
70% match
Loading thumbnail…

Interactive - Project 1 - Nobel Prize Winners - Bar Chart

A bar chart displays the number of Nobel Prizes awarded per category, ranking categories from most to least frequent. The visualization loads data from a CSV file, parses it with d3.csvParse, and renders an SVG bar chart using d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft. Bars are styled steelblue with a hover effect that changes fill to orange. The chart includes rotated x-axis labels, axis titles, and a bold title, all built with D3 v7 and Vue.

VVinayak Revankar
68% match
Loading thumbnail…

Fork of D3 circle barchart

A circular barcode chart displays Nobel Prize winners from 1901 to 1905, grouped by year on the x-axis and ranked by category on the y-axis. Each winner appears as a colored circle, with colors mapping to five prize categories via the D3 `schemeCategory10` scale. The SVG visualization uses `d3.group` to nest winners by year and `d3.scaleBand` for positioning, with an interactive axis and legend built through D3’s data join methods. The code relies on D3 v7 and renders the dataset embedded in the script.

NNita
66% match
Loading thumbnail…

Project 1 - Phase 2 - Nobel Prize Winners - Line Chart

This visualization displays the number of Nobel Prize winners per decade, broken down by category, using a multi-line chart. Each line represents a category, with the x-axis showing the decade and the y-axis showing the count of laureates. The chart uses d3.rollups to aggregate the data from a CSV file and renders the lines with d3.line, while d3.scaleOrdinal assigns colors to categories. The data is loaded via fetch and parsed with d3.csvParse.

VVinayak Revankar
66% match
Loading thumbnail…

D3 circle barchart with nested data() and join()

This example shows Nobel Prize laureates from 1901 to 1905 arranged as circles in a grid, with each year as a column and categories color-coded via a legend. The visualization uses D3 v7’s nested `data()` and `join()` methods to bind grouped data to SVG circle elements, with `d3.group` organizing entries by year. Animated transitions highlight updates when data changes. The chart includes rotated x-axis tick labels and a legend built with joined category groups, rendering entirely in SVG.

AAxVa 🐍 💪
66% match
Loading thumbnail…

Tree Map -- nobel_data

A zoomable tree map visualizes Nobel laureate data from a CSV file, hierarchically organized by country, city, institution, and expert name. The D3.js hierarchy layout with `d3.linkHorizontal` connections renders an SVG tree, using `d3.csv` to load the data and sorting nodes by ranking fields. The dark blue background and interactive collapsible nodes display the dataset's nested structure, with a dynamic width based on the window size.

PPekingWaldo
66% match
Loading thumbnail…

CAP 4744/5745 - Interactive Data Visualization - Project 2

This interactive dashboard presents four distinct datasets—Calvin College 2004, Iris, Titanic Passenger List, and World Bank Science & Technology—each accessible via a Bootstrap navigation bar. The main page displays thumbnail images linking to separate visualizations. The code uses D3.js v5 to generate simple scatterplots, loading data and mapping values to x and y scales with `d3.scaleLinear` and `d3.extent`. Circles are appended to SVG containers using `selectAll` and `data` joins, with positioning based on array indices and a specified y-field.

Aanagi2597
64% match
Loading thumbnail…

Menus with React -Aggregation by Country + Dropdowns!

This interactive map visualizes video view counts for Harvardx/MITx online courses in 2013, aggregating data by country. A dropdown menu lets users filter the displayed points by individual course. The visualization uses D3’s `geoPath` with a Mercator projection to render the world map and graticule, while `scaleSqrt` sizes circles representing views. Hovering over a point reveals the country name and view count. Data is loaded from a CSV using D3’s `csv` function, and the interface is built with React state management for the dropdown selection.

Ssophburke
64% match