Skip to main content
100%

tarot.json

✓ Published0🌍 Public
Aajzeigert
Last edited Nov 5, 2017
Created on Nov 5, 2017

This example visualizes the 22 Major Arcana cards from a tarot deck, presenting each card’s name, image, and textual description and interpretation. It uses D3.js’s `d3.forceSimulation` to position the cards in a networked layout, with `d3.select` and `.append` to render card elements. The images are loaded from local JPG files in the `deck/` directory, and hovering or clicking a node reveals its full description text. The data originates from a JSON file (tarot.json) authored by ajzeigert.

AI-generated description

Similar vizzes

Loading thumbnail…

A Deck of Cards Dataset

This example displays the size and structure of a deck-of-cards dataset directly in the browser as plain text. It reports the CSV file’s size in kilobytes, the row count, and the number of columns. The code loads the dataset from a GitHub-hosted CSV using `d3.csv`, then formats and counts the data with `d3.csvFormat` and the array’s `length` property. It writes the resulting three-line summary into a `<pre>` element via standard DOM text assignment. The dataset itself originates from Garrett Gman’s public gist.

Llokesh234
64% match
Loading thumbnail…

Cards

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

MMTR
64% match
Loading thumbnail…

Gist f27c27698d271fa3f54efa40338bff9a

This example uses the D3.js force-directed graph layout via `d3.forceSimulation` to arrange a collection of desktop-environment and operating-system screenshots, sourced from image URLs listed in a JSON array. Each image is rendered as a node using D3’s `d3.select` and `d3.image` with an HTML `img` tag, while `d3.force` pulls linked nodes together. The visualization shows a clustered network of related interfaces, with node positions updated iteratively through the simulation’s tick function. The code explicitly references `d3.forceSimulation`, `d3.force`, and `d3.select`, but does not include interactive filtering or hover effects.

DDarMontou
63% match
Loading thumbnail…

Arc Diagram try

This arc diagram example loads a CSV file of experimental data from a GitHub Gist, which is parsed using D3’s `d3.csv` method to report the dataset’s size, row count, and column count. The visualization displays this summary information as large, styled text on a blank page, with an alternative commented-out approach using `fetch` and `async`/`await` for comparison. The example demonstrates basic CSV parsing and asynchronous data loading concepts within a React framework, using D3 v5.

TTetiana Humeniuk
62% match
Loading thumbnail…

Arc

This example visualizes the four possible arc paths defined by the SVG elliptical arc command, using D3.js v6 to generate paths from a fixed start point, specified radii, a rotation angle, and four combinations of the large-arc and sweep flags. Each path is rendered in a distinct color from `d3.schemeSet3` and styled with a thick stroke, without any fill. The arcs are drawn in an SVG container and offset via a transformation, demonstrating the geometric differences between the arc flag choices in a clean, minimal setup. The dataset `socfb-Caltech36.json` is referenced but not used in the rendering logic.

Vvivianaaai@qq.com
61% match
Loading thumbnail…

Read in JSON department files

This example reads course and department data from two JSON files and displays a sunburst chart using D3 v5. It loads the files with `Promise.all` and `d3.json`, then partitions the hierarchical data with `d3.partition` and renders it as SVG arcs via `d3.arc`. The visualization shows department and course names as labeled, colored slices, with interactive transitions on click using `transition.attrTween` to smoothly update the layout. Rotation logic in `computeTextRotation` orients labels to avoid upside-down text.

NNourAldinAlmubarak
61% match
Loading thumbnail…

Read in JSON department files

This example presents a zoomable sunburst visualization of Teesside University’s academic structure, showing departments, their courses, and course modules as nested arcs. It loads three JSON files—department names, pathways to departments, and course modules—and merges them into a hierarchical tree. Using d3.partition and d3.arc, the sunburst lays out nodes by angle and radius, while d3.hierarchy computes the layout from the aggregated data. Clicking arcs triggers a zoom transition via transition.attrTween, re-scaling the visualization around the selected node. The view applies a rainbow color scale to top-level departments and renders labels with conditional visibility.

NNourAldinAlmubarak
61% match
Loading thumbnail…

Gist 6db8115f185f7e57cb4395da0474fbf6

This example presents an interactive visualization of a network graph, where nodes are connected by curved links and can be dragged by the user. The code builds the layout using `d3.forceSimulation` for physics-based positioning and renders the scene with `d3.select` and SVG elements, including `transition.attrTween` for smooth link animations. It reads a JSON dataset of node and edge data from an external file, and uses `d3.zoom` for panning and scaling the view. The visualization shows how force-directed algorithms distribute connected nodes while user input adjusts the simulation in real time.

11wheel
61% match