Skip to main content
SimilarExport ZIP
100%

Script to parse Dendry games for use in DendryScope.

✓ Published0🌍 Public
JJazzTap
Last edited Dec 31, 2025
Created on Dec 4, 2025

This script converts Dendry game scene files into a JSON AST, which is then loaded into DendryScope for interactive exploration. The visualization uses a force-directed graph where scenes are nodes and connections represent narrative transitions. Users can click scene names to require or forbid them, mouse over blocks to inspect scene versions, and pin blocks to enforce specific story events. The Python script relies on Pygments' custom lexer to tokenize the `.dry` files before parsing them into a nested tree structure using `defaultdict`.

AI-generated description

  1. Parse your Dendry game using this Python script from the command line or an IDE. Set scenesPath to your input and outPath to the desired filename.

  2. Clone the DendryScope repository, and replace ./dist/3d213cdc68443ea49186.json with your parsed game. Run python -m http.server, then open http://localhost:8000/ in your browser.
    https://github.com/JazzTap/DendryScope/tree/main

If you have an ObservableHQ account, then you can use their web interface instead of cloning my repository.

  1. Open the Observable notebook, and replace the file attachment bee-scenes-ast@2.json. The new skein will appear.
    https://observablehq.com/@jazztap/dendryscope-demo

Now your game is in Dendryscope. Click on the names of scenes to require or forbid them.

  • Mouse over blocks to inspect specific versions of scenes.
  • Click on blocks to pin that version of events: the blue pin demonstrates the event, and the black pin enforces it.

Changelog:
12/31/25 - fixed parse\2, which was super broken because is started checking for exact token subtype.
12/4/25 - initial upload

Similar vizzes

Loading thumbnail…

a set of scripts to pull the git history from the d3 git repositories

This example provides a set of Node.js scripts that extract and consolidate commit history from the D3 GitHub repositories. The scripts clone each repository, use `git log` to output commit data with custom delimiters, parse that text into JSON, and combine results into a single `all-d3-commits.json` file containing author, date, and repository name for each commit. The data is sourced from D3’s package.json dependencies and can be used to visualize contributor activity over time.

CCurran Kelleher
57% match
Loading thumbnail…

Gist 752e79ef7b1d634b16a9e7020da164ff

This visualization presents a narrative chart that maps character appearances and introductions across scenes in a story. Using D3.js’s narrative layout, it positions scenes horizontally and characters vertically, encoding each character’s presence as small black ellipses within scene clusters. The code employs mxGraph to render the final graph, with curved edges connecting characters across scenes. Appearance vertices are placed at precise scene coordinates, while introduction labels sit beside the timeline, with links drawn between these points. The underlying data wrangling occurs in a dedicated function that groups scene characters by ID, and the graph is exported as XML via mxCodec.

HHugoberry
57% match
Loading thumbnail…

Gist 9423b215bf16f484a18146a11dcb7d2b

This visualization uses d3.layout.narrative to compute a narrative chart layout from scene-based character co-occurrence data, then renders the result as an interactive mxGraph diagram. It shows character appearances as small circles grouped into rectangular scene clusters, with curved edges linking appearances of the same character across scenes and introduction labels placed to the left. The underlying data wrangling preprocesses raw scene and character JSON into a format for the narrative layout, while mxGraph handles the final drawing. The code also enables curved, arrowless edges and disables user interaction with the graph.

HHugoberry
56% match
Loading thumbnail…

Digital & Data Literacy Task 4

This interactive data visualization uses a D3.js v3 force-directed tree layout to display a hierarchical breakdown of a fictional football league’s results. The tree shows team statistics, including total points, win/draw/loss counts, goal difference, and games played, with data sourced from a JSON file. Users can click on parent nodes to expand or collapse branches, revealing child details. The rendering relies on SVG paths and circles, with the visualization overlaid on a football pitch background image. The code uses `d3.layout.tree`, `d3.svg.diagonal`, and `transition` methods to animate node position changes smoothly.

GGravyGames
56% match
Loading thumbnail…

File Listing Script

A 3D interactive visualization displays hierarchical file system structures as a branching tree of nodes. Each node represents a file or directory, with color and size mapping to file type and relative size. The visualization uses React for the user interface and WebGL for rendering, enabling smooth animation of the expanding and collapsing tree. Data is sourced from JSON files generated by a Node.js script that recursively walks a directory, capturing each file's metadata including size, last modification date, and extension.

CCurran Kelleher
56% match
Loading thumbnail…

Gist 8a97689739c217f28474d80c89013628

This visualization uses a force-directed graph to show relationships between entities, with nodes positioned by `d3.forceSimulation` and links drawn as curved paths. The code computes node sizes and colors from quantitative attributes, while a canvas overlay via `d3.geoPath` and `getImageData` samples pixel density to modulate link opacity based on local clustering. It employs a custom `transition.attrTween` to animate node drift when the simulation restarts, and uses the `d3.hierarchy` API to flatten nested data from a JSON file. The visualization reads credentials from an `env.list` file for a private data source, but the rendering logic is independent of that authentication step.

CConorAspell
55% match
Loading thumbnail…

Gist 6f46e33cf77d3c5298d440be532e3440

This example visualizes a chess subreddit’s weekly activity as a force-directed network, showing how posts and comments cluster around topics. The code uses D3’s `forceSimulation` for layout, with node positions updated via `tick` handlers. It renders the graph using SVG paths and applies color and size scales to represent post scores and comment counts. Data comes from the Reddit API, filtered by the `subreddit=chess` and `period=week` environment variables. The visualization also includes a play/pause button to freeze the simulation, and tooltips display metadata on hover. The underlying gist relies on Node.js and the `dotenv` library to load API credentials, while the frontend uses plain D3 for canvas-based interaction.

CConorAspell
55% match
Loading thumbnail…

Chess games dataset

This example explores a chess games dataset from Kaggle, showing relationships between game attributes like opening moves, player ratings, and outcomes. It initially displays the raw, parsed CSV data as a JSON-formatted string in a `<pre>` element. The visualization loads the dataset via `fetch` and parses it using the `csvParse` API from D3 v7. The current implementation demonstrates the data-loading pipeline, with the state managed through a `setState` callback and the view updated on each render.

MMartha Cash
55% match