AxVa 🐍 💪

Song with Tone.js

D3.js - Visualization of the GitHub Search API data

The (Ping) Pong Game

D3.js - Barchart for counting characters in text

D3.js - join() with enter, update, and exit

D3.js - data(), join(), transition(), duration(), and key functions

D3.js - selectAll(), select(), insert(), and attr()

SVG - The HTML5 Logo

Tone.js - Rock drum sounds + Reverb

Tone.js - "Mary Had a Little Lamb"

D3 join() example

This example demonstrates how D3’s `join()` method synchronizes data with SVG rectangles, showing a bar chart of Nobel Prize winners by country. The code calls `updateBars()` three times—with ten, four, and two data items—to illustrate how the selection automatically handles entering, updating, and exiting elements. Using D3 v7’s `selection.join()`, it replaces the separate `enter()`, `update()`, and `exit()` workflows. Bars are styled via the `.bar` CSS class with a DarkSalmon fill, and the script logs each datum and index to the console.

D3 barchart example with the join() method

This D3 bar chart example displays Nobel Prize winner counts by country, filtering out zero values and initially showing all nations before updating to display only the first three. The visualization uses D3 version 7.8.5 with SVG rendering, applying the `join()` method on a selection to handle the incremental update of bar elements. The code demonstrates scaleBand and scaleLinear for axes, custom axis styling, and programmatic data filtering that triggers a second chart update.

D3 transition example with the data() method

This example demonstrates how D3 transitions can animate bar chart updates when switching between two datasets. The bar chart displays Nobel Prize winner counts by country, with a button toggling between original and modified data values. Using D3 v7, the code leverages the `data()` method with a key function, `join()`, and chained `.transition()` calls to smoothly update bar positions, heights, and axes over 2 seconds. SVG elements and `d3.scaleBand` and `d3.scaleLinear` scales handle the rendering. Axis transitions animate tick label rotations and value changes.

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.

D3 world map example with TopoJSON to GeoJSON and circular indicators

A world map rendered with D3 v7 displays Nobel Prize winner counts per country using circular indicators scaled by value. The visualization loads TopoJSON world data, converts it to GeoJSON via the `topojson` library, and projects it using `d3.geoEquirectangular` with `d3.geoPath`. Country data from a CSV file is joined to map geometries, with red semi-transparent centroids sized by a square-root scale. Interactive mouse events trigger tooltips showing country names and prize counts, while graticule lines and internal borders provide cartographic context.

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.

D3 group() example

This example demonstrates how D3’s `group()` method partitions a small array of Nobel Prize laureate records by their year of award, producing an `InternMap` with two keys (1901 and 1902) and corresponding arrays of names. The code logs the grouping result and then uses `Array.from` with destructuring assignment `([k, v])` to iterate over each key-value pair, printing the key’s type (number) and the value’s type (object). The visualization relies on the D3 v7 library, loaded via CDN, while the raw dataset is embedded directly in the script.

D3 select() and selectAll() examples

This example demonstrates how D3’s `select()` and `selectAll()` methods locate and modify SVG elements, showing a simple bar chart whose rectangles change fill colors through chained attribute, style, and class updates. The code uses the D3 v7 library to select the `<rect>` elements by ID and class, then applies a chain of changes to the middle bar—such as setting its height, fill, and highlight class—while also updating the page title text. Console logs reveal the values read back from selected nodes, and the script prints the chart's bounding rectangle and SVG bounding box to inspect its layout.

D3 append() example

A grouped bar chart displays population values for ten countries, with the United States leading at 336 and smaller values for nations like Sweden and Japan. The example demonstrates D3’s `append()` method by building an SVG chart from a hardcoded JavaScript array of objects. Using D3 v7, the code selects a `div#barchart` element, appends an SVG container, and binds data to rectangles via `enter()`-less loops, styling bars with CSS class `.bar` and a `CornflowerBlue` fill. The static visualization uses pixel-based dimensions defined in CSS.

D3 axis example

This example shows a simple linear axis created with D3.js version 7.8.5, rendered as SVG. A linear scale maps a domain of 0 to 10 to a pixel range of 400, and a bottom-oriented axis is generated using `d3.axisBottom()` and applied to an SVG group with the `.call()` method. The visualization demonstrates the basic workflow of defining a scale, constructing an axis, and attaching it to the DOM.

D3 scale examples

This example demonstrates D3 scale functions for mapping data values to visual ranges. It shows linear scales converting continuous domains to numeric and color outputs, ordinal scales for one-to-one mapping, and band scales for positioning categorical data with optional padding and rounded pixel ranges. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.interpolate` with data from `nobel-winners.json` containing country-level Nobel Prize counts. Console output illustrates scale outputs for specific inputs, including color interpolation and bandwidth calculations.

D3 insert() example

This example demonstrates how the D3.js selection method `insert()` places new DOM elements at different positions within an existing list. The code uses D3 v7.8.5 to select the unordered list with `d3.select("#silly-list")` and inserts three list items: one at the beginning via the `":first-child"` selector, one before a specific element using `"#item-2"`, and one appended at the end without a selector. Each inserted item receives distinct text and color styles. The rendered page shows the original four items with the three new additions appearing in red, green, and blue, illustrating positional control through D3's insert API.