三国英雄谱

100%

三国英雄谱

✓ Published0🌍 Public

Last edited May 15, 2020

Created on May 15, 2020

三国英雄谱 presents a genealogical timeline of prominent figures from the Three Kingdoms period, organized by their allegiance to Wei, Shu, or Wu. Each figure is positioned along a chronological axis based on their birth and death years, with a horizontal bar indicating their lifespan. The visualization uses d3.forceSimulation to lay out the nodes and SVG for rendering. Hover interactions are implemented with jQuery, while the dataset is embedded as a JSON object within the HTML. The chart draws on publicly sourced data that may contain inaccuracies.

AI-generated description

三国人物生卒年、阵营图谱 数据来源网络，可能不太准 交互没有使用d3.js，使用的是jquery

MIT Licensed

Similar vizzes

Loading thumbnail…

The Beginning of the Empire

This visualization, titled “The Beginning of the Empire,” displays a chronological network of historical events using a force-directed graph layout. It uses `d3.forceSimulation` to position nodes and links, with each node representing a significant event and edges showing temporal connections. The rendering is done with SVG elements, and the data is embedded directly in the HTML. Node size and color encode importance, while the layout is computed entirely in the browser via D3’s simulation engine. The page itself is minimal, containing only the script and markup necessary to run the interactive diagram.

AAxel Pond

58% match

Loading thumbnail…

Fork of D3-timeline in D3.js V3 ref from (jiahuang)

A fork of jiahuang's d3-timeline, this example demonstrates a stacked, interactive timeline built with D3.js v3 and rendered as SVG. The chart visualizes labeled time intervals for patient statuses like "Waiting," "Vital," and "Doctor," with each segment colored and optionally labeled, and an accompanying legend. The code creates the timeline via `d3.timeline()` with stacked item rows, custom tick formatting using `d3.time.format`, and margins. SVG elements are appended manually for the legend, while the timeline itself handles axis and row rendering through its internal API.

JJason

58% match

Loading thumbnail…

Tree chart

This interactive SVG tree chart displays a family lineage, using a hierarchical node-and-link diagram to show generational relationships from a single ancestor. The chart is generated with the D3.js library version 3.5.17, employing its layout tree and diagonal projection APIs to position nodes. Clicking on a node triggers an animated expansion or collapse of its children, with a 750-millisecond transition. Node circles are cyan with dark borders, and connecting links are coral, all set against a teal background. The data is hardcoded as a JavaScript array of family member names and parent-child links.

CChathurya

57% match

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.

LLichtphyz

56% match

Loading thumbnail…

Fork of Fork of Stack Chart Template

This example shows a stacked bar chart of the three data types (type1, type2, type3) across Chinese provinces, with the chart title referencing WHO data on deaths from illnesses in 2013. It uses D3.js (v3.5.6) with d3.layout.stack, d3.scale.ordinal, and d3.scale.linear to render the stacked bars as SVG. The visualization includes interactive radio buttons to toggle between raw counts and percentage views, though the corresponding transition logic is not fully implemented in the visible code. The data comes from local CSV files (data3.csv).

YYunLing

56% match

Loading thumbnail…

Family tree (3 generations)

This interactive family tree visualization displays three generations of a family using a hierarchical node-link diagram. It loads data from a JSON file and renders the tree structure with D3.js v3, where each family member appears as a colored, labeled rectangle. The visualization supports zooming and panning through a custom zoom behavior, and it includes tooltips that appear on hover. The code uses D3's layout tree algorithm to position nodes and SVG paths to draw the connecting links, with animation to transition between states.

AAAL FORHAD

56% match

Loading thumbnail…

Hanzi Map

A force-directed graph visualizes a hierarchy of Chinese characters as a radial tree of colored nodes and links. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position a main node, two child nodes, and twenty leaf nodes in SVG. Node size and color are assigned from a static dataset, with text labels for the main and child nodes.

MMarco Trevisan

56% match

Loading thumbnail…

Gist dcb164cb9576c8b20d291001b718c6f9

Two SVG side-by-side views depict the same character-relationship data from *Les Misérables*. The left panel shows a force-directed node-link diagram using `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, with draggable nodes and link thickness proportional to interaction value. The right panel is a donut pie chart built with `d3.pie` and `d3.arc`, showing the distribution of characters across groups; hovering highlights either nodes or arcs with a black stroke.

ZZhengyan Yu

56% match