Skip to main content
SimilarExport ZIP
100%

A Princess of Mars

✓ Published0🌍 Public
SSohojoe
Last edited Dec 30, 2014
Created on Dec 30, 2014

This visualization displays the table of contents from Edgar Rice Burroughs’ *A Princess of Mars*, sourced via a gist. It uses D3.js to render chapter titles as a network, with the author’s name and dedication also included. The data is read from a JSON structure, and the visualization likely employs a force-directed layout to position text elements, emphasizing the book’s structural hierarchy through spatial arrangement.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 466252

This example is a data-art composition built from a personal list of recommended web design and programming books, rendered as an interactive force-directed graph. It visualizes the relationships between books, their authors, and their associated topics (like usability, web standards, JavaScript, Ruby, and Rails) using `d3.forceSimulation` for physics-based layout and dynamic node positioning. Each book title, URL, and annotation from the original text is embedded as textual nodes and links, with the graph’s structure and labels derived directly from the source gist’s content. The rendering approach uses SVG elements updated via D3’s data join, and while no explicit additional libraries are mentioned, the code relies on standard D3 v4+ APIs for simulation, drag behavior, and tick updates to show the clustered, interlinked reading list.

DDylanFM
62% match
Loading thumbnail…

31337 Book

A radial network diagram maps the planned chapters of a book titled "31337 Book," using a force-directed layout to arrange topics like Perfectionism and Security around a central node. The visualization loads data from a Markdown file via `d3.json` and renders interactive nodes and links with `d3.forceSimulation` and `d3.forceCollide`, allowing users to drag nodes and see the author’s proposed structure. Hovering highlights connections, while static text labels persist for clarity. The layout emphasizes the non-linear, collaborative nature of the book’s outline.

RRestuta
61% match
Loading thumbnail…

Fork of HTML Starter

This interactive scatterplot visualizes a books dataset, plotting ratings count against average rating while encoding genre by color and page count by circle size. The visualization includes axis labels, a summary of dataset statistics, and highlights the Harry Potter and the Prisoner of Azkaban book with a distinct pink color. Built with D3 v7, the code uses `d3.csv` to load data, `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with `d3.schemeTableau10` for color mapping, and `d3.scaleSqrt` for sizing, rendering all marks as SVG circles.

SSaba Siddiqi
58% match
Loading thumbnail…

Gist 579bcba6019da7a932da70826f5d0c83

This interactive example visualizes the spatial layout of books from Project Gutenberg, mapping each title to a point based on its geographic coordinates and rendering them as a dense, globe-like scatter plot. Using D3.js’ `d3.forceSimulation` with gravitational and collision forces, the points are arranged into a spherical cluster, while user interaction—dragging or hovering—updates the positions in real time. The visualization employs `d3.forceX`, `d3.forceY`, and `d3.forceZ` to distribute points in three-dimensional space, and it relies on `d3.select` and event handlers to manage the dynamic behavior. The code uses a canvas-based rendering approach with `getImageData` for pixel-level color manipulation, giving the plot a glowing, heatmap-like appearance.

AAnaMal08
58% match
Loading thumbnail…

Fork of Interactive Book Dataset

This visualization presents a dual-chart view of a GoodReads book dataset. The left panel is a scatterplot of average rating versus page count, with each book as a point. The right panel is a horizontal bar chart displaying the top 10 most popular publishers, with bars sorted by the number of books published and positioned along the average rating axis. Hovering over any data point or bar highlights all books sharing that publisher’s identity across both charts, while a dropdown menu adjusts circle opacity. The implementation uses D3.js v6, including scales for linear and band layouts, SVG circle and rect elements, and mouse event listeners.

FFremont
58% 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
58% match
Loading thumbnail…

Fork of Fork of Interactive Book Dataset

This visualization presents two linked charts from a GoodReads dataset: a scatterplot of book ratings counts against average ratings, and a horizontal bar chart of the top 10 publishers by average rating. Hovering over a dot or bar highlights all books from that publisher across both views. A dropdown menu adjusts the opacity of the scatterplot points. The piece is built with React and D3.js (v6), using SVG elements and transitions, with data parsed via `d3.csv`.

FFremont
57% match
Loading thumbnail…

Gist 43d5f0151f0331137a2d258ba06dfa0c

This interactive visualization renders the free-programming-books.md index as a three-dimensional WebGL scene using React and Three.js. The list of programming languages and topics is displayed as floating text nodes in a 3D space, allowing users to explore the hierarchical structure of the book collection. The code utilizes the react-three-fiber library to manage the WebGL canvas, with camera controls for navigation and a starfield background to enhance depth perception. The visualization provides an immersive way to browse the extensive index of free programming resources.

JJastor11
57% match