Nobel Prize Winners

Nobel Prize Winners

This example loads Nobel Prize laureate data from a CSV file and displays the raw parsed records as JSON in a `<pre>` element. The visualization uses D3 v7’s `csvParse` to transform each row, converting fields like year and prize share into numeric values, while preserving categorical attributes such as category, sex, and birth country. The code demonstrates a state-driven rendering pattern within a Vue-like setup, where asynchronous data fetching triggers re-renders. The dataset spans laureates from 1901 onward, sourced via Kaggle, and the current view focuses on data loading and inspection rather than a graphical chart.

74% match

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.

72% match

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

This interactive visualization presents Nobel Prize winners by category and birth country. A bar chart displays the total number of prizes per category, while a world map uses colored countries and proportional circles to show laureate distribution geographically. The code uses D3 v7 APIs including `scaleBand`, `scaleLinear`, `geoNaturalEarth1`, `geoPath`, and `scaleSqrt`. Data is loaded from a CSV file, with geographic boundaries from the world-atlas TopoJSON dataset. Both views are rendered as SVG, with a toggle between bar chart and map views.

70% match

Week 6 - Phase 3 - Nobel Prize Winners - Line Chart

This line chart visualizes Nobel Prize winners per decade, grouped by category (Chemistry, Literature, Medicine, Peace, Physics, and Economics). The data comes from a CSV file containing laureate details from 1901 onward. The visualization uses d3.rollups to aggregate counts by decade and category, then renders smooth lines with d3.line() and monotone X curve interpolation, along with interactive points that display tooltips on hover. A legend allows users to toggle category visibility by clicking, which transitions line and point opacity using transition.attr().

70% match

Week 7 Country Map - Nobel Prize Winners

This visualization shows the global distribution of Nobel Prize winners by country, using prize counts derived from laureate birth or organization countries. A choropleth world map colors each nation on a blue sequential scale, with gray for countries lacking winners and a tooltip providing details. The implementation uses D3 v7 with `d3.geoNaturalEarth1` and `d3.geoPath` to render SVG paths from world GeoJSON data, while `d3.rollup` and a custom normalization function reconcile country names between the CSV dataset and map features.

Interactive Stacked Bar Chart for Nobel Prizes

The interactive stacked bar chart visualizes Nobel Prize counts by category across 10-year periods, using color coding to distinguish disciplines. Hovering a category in the color legend highlights its corresponding stack segments while fading others. Built with Vue and WebGL, it processes the Nobel dataset with `rollup` aggregation, `stack()` for stacking categories, and `scaleBand`/`scaleLinear` for axes. The `colorLegend` module manages interactive hover states, applying opacity and stroke effects via D3 selections.

Web GUI example with D3 and Crossfilter2

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.

AAxVa 🐍 💪

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.