Lichtphyz

@Lichtphyz·9 public vizzes

Game of Thrones Interactions Web

A force-directed network graph maps character co-occurrence in *Game of Thrones*, with line thickness proportional to interaction frequency above a threshold of 55. Node colors represent character groups, and labels identify each figure. Built with D3 v4, the visualization uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while SVG circles and lines render the network. Data comes from the included `GoT_interactions_draft.json` file.

Sep 5, 2017

Loading thumbnail…

Herodotus Interactions Web

This example shows a force-directed graph of proper-noun co-occurrences in Herodotus’s Histories, with nodes representing people, places, and groups, and link thickness proportional to interaction frequency. Only pairs with more than 25 interactions appear. The layout uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`, while nodes are colored by assigned groups via `d3.scaleOrdinal`. Data comes from a JSON file, rendered as SVG circles and lines with drag support.

Sep 5, 2017

Loading thumbnail…

Lord of the Rings Narrative Chart

This example visualizes the narrative structure of *Lord of the Rings* as a chart, showing when characters appear in scenes and their affiliations. The visualization uses the `d3.layout.narrative` API from the `abcnews/d3-layout-narrative` library to arrange scenes horizontally and position character appearances as circles along vertical paths. Character introductions are labeled on the left, with lines connecting each appearance across scenes. The SVG is rendered using D3 v3, and the data comes from the `LotR.json` file, which contains character IDs, names, affiliations, and scene membership arrays.

Aug 25, 2017

Loading thumbnail…

Game of Thrones Narrative Chart

This narrative chart visualizes character appearances and affiliations across the scenes of a story, using the d3.layout.narrative API to arrange scenes and characters. The data, sourced from a JSON file containing the character list and scene breakdowns, is processed by the `wrangle` function before layout. The rendering uses an SVG canvas, with colored paths for character links and styled text labels, all constructed via d3.v3.

Aug 25, 2017

Loading thumbnail…

Lord of the Rings Interactions Web

This interactive force-directed graph visualizes character co-occurrence in *The Lord of the Rings* trilogy, showing which characters appear together in the text. Node color encodes group membership, while link thickness indicates the frequency of interactions. The layout uses d3.forceSimulation with link, charge, and center forces, and the graph is rendered as SVG. Data comes from LotR_interactions.json, with links filtered to show only interactions of 55 or more occurrences within a three-sentence window.

Aug 25, 2017

Loading thumbnail…

Game of Thrones Co-occurrence

This matrix diagram visualizes character co-occurrences in the "A Song of Ice and Fire" series, with each colored cell representing two characters appearing within a sentence of each other and darker cells indicating more frequent co-occurrence. The visualization uses d3.js (v2) with SVG rendering, employing d3.scale.ordinal for the matrix layout, d3.scale.category10 for coloring by cluster group, and animated transitions via d3.transition to reorder the matrix by name, frequency, or cluster. The data comes from a JSON file containing 43 nodes (characters) and their weighted co-occurrence links.

Aug 24, 2017

Loading thumbnail…

Beer / Wine Popularity Ratio - US Choropleth

This choropleth maps the ratio of beer to wine popularity across U.S. states, coloring each state on a continuous red-to-yellow scale from the loaded CSV data. Built with D3 v4, it uses `d3.geoAlbersUsa()` for projection and `d3.geoPath()` to render state boundaries from a GeoJSON file, while a linear color scale drives the fill. A gradient legend with an axis is appended to display the data range.

Aug 1, 2017

Loading thumbnail…

Beer vs Wine - US

This choropleth map shows the ratio of wine to beer consumption by US state, with a color gradient from dark red (lower values) to yellow (higher values). The visualization uses a D3 Albers USA projection via `d3.geoAlbersUsa()` and `d3.geoPath()` to render state boundaries from the included GeoJSON, while integrating beerwine.csv data through `d3.csv()`. A linear color scale (`d3.scaleLinear()`) maps data values to the chosen palette, and a legend with a gradient swatch and axis (`d3.axisRight()`) displays the value range. The map is rendered as SVG paths.

Aug 1, 2017

Loading thumbnail…

Narrative Charts

This example visualizes the sequence of scenes from a Star Wars film, showing which characters appear in each scene and how their appearances connect through narrative links. It uses the `d3.layout.narrative` module to arrange scenes and character paths. The code wrangles JSON data defining characters and scene memberships, then renders scene rectangles, appearance circles, and character introduction labels as SVG elements using D3 v3.

Apr 5, 2016