Skip to main content
SimilarExport ZIP
100%

Wikipedia Exploration Map

✓ Published1🌍 Public
Cchristiand416@gmail.com
Last edited Sep 19, 2024
Created on Jun 7, 2023

This visualization maps the user's personal browsing history through Wikipedia, displaying a branching tree of visited articles connected by hyperlinks. Built with D3.js v6, the SVG visualization uses `d3.tree` for hierarchy layout and `d3.linkHorizontal` for curved edges, with interactive zoom and drag via `d3.zoom`. Nodes contain clickable links to the original articles, and hovering reveals full article summaries in a `foreignObject` text container. The underlying data, structured as a JSON tree in `flare-2.json`, was scraped from the user's browser history using Python.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Wikipedia Exploration Map No Explanation

This example presents an interactive tree map of Wikipedia article connections, starting from the “Drug policy of South Korea” page and branching into related topics. Users can click and drag to pan, scroll to zoom, and click nodes to explore. The visualization uses D3 v6’s `d3.tree` and `d3.linkHorizontal` to draw the hierarchy, while SVG `foreignObject` elements display node labels that expand into full article summaries on mouseover. The data comes from the JSON file `flare-2.json`, and animated transitions adjust node and link positions with `transition.attrTween`.

Cchristiand416@gmail.com
83% match
Loading thumbnail…

Wiki Branch

This visualization presents a branching tree structure that traces the chain of related Wikipedia articles, beginning with the “Drug policy of South Korea” page. Using the D3.js library (version 3.x), the code renders an interactive node-link diagram in SVG, where each node represents a Wikipedia page title and links connect parent-child article relationships. The tree data is encoded as nested JSON, and the visualization applies CSS classes for node styling (with steel blue circles and gray links) to display the hierarchical connections. The layout is static, but nodes are interactive with a pointer cursor, suggesting the ability to explore the data structure.

Cchristiand416@gmail.com
74% match
Loading thumbnail…

World Countries Tree

This interactive visualization depicts the hierarchical structure of Wikipedia categories and pages as a tree diagram. Nodes are colored on a gradient from white to purple based on a group value, and hovering reveals a node’s name and whether an English version exists. Built with D3 v5, it uses `d3.tree` and `d3.hierarchy` for layout, `d3.zoom` for panning, and SVG circles and paths for rendering. Data is loaded from a local `data.json` file.

Cchrismack666
73% match
Loading thumbnail…

World Countries Tree

This interactive visualization depicts the hierarchical structure of Wikipedia categories and pages as a tree diagram. Nodes are colored on a gradient from white to purple based on a group value, and hovering reveals a node’s name and whether an English version exists. Built with D3 v5, it uses `d3.tree` and `d3.hierarchy` for layout, `d3.zoom` for panning, and SVG circles and paths for rendering. Data is loaded from a local `data.json` file.

Cchrismack666
73% match
Loading thumbnail…

d3.js wiki visualization

This visualization maps Wikipedia’s most controversial articles as a force-directed network, where each node represents an article and is colored by its conflict type (e.g., nationality disputes, factual disagreements, or image inclusion debates). Hovering over a node reveals a tooltip with the article’s title, conflict category, creation date, and edit count. The graph is rendered as an SVG with animated positioning, using node size to encode the number of page edits and a color scale for conflict type. A legend and axes support interpretation, and the dark background highlights the categorical colors and interactive hover effects.

CCBasis
73% match
Loading thumbnail…

World Countries Tree

A collapsible tree visualization maps the hierarchical structure of Wikipedia categories, comparing the number of subcategories between Russian and English versions. Node color encodes the difference in subcategory counts, with a legend explaining the scale. The visualization uses D3 v5’s `tree` layout and `linkVertical` path generator to position SVG circles and links, with `d3.scaleLinear` mapping group values to a purple-to-white color range. Zoom and pan are enabled via `d3.zoom`, and the data is loaded asynchronously from a JSON file using `d3.json`.

Cchrismack666
71% match
Loading thumbnail…

browsing_history_test

This example visualizes a browsing history as an interactive Sankey diagram, mapping sequences of web searches and page visits as flows between nodes. Each node represents a search query or website, while links show transitions from one action to the next, with stroke width indicating the number of transitions. The diagram uses the d3.sankey layout to position nodes and compute link paths, with SVG rendering for nodes and links. Nodes are draggable via d3.drag, and colors are assigned using d3.scaleOrdinal. The underlying data comes from a JSON file containing node names and directed links, while a CSV file holds the actual browsing log details.

Xxunjoy
71% match
Loading thumbnail…

Wiki Branches

Wiki Branches visualizes a hierarchical dataset derived from Wikipedia articles, starting from "Drug policy of South Korea" and branching into related topics. The D3 tree layout positions nodes horizontally, with collapsible branches that expand or collapse on click, using animated transitions to update the view. Rendered in SVG, the visualization loads data from a JSON file and employs d3.hierarchy, d3.tree, and d3.linkHorizontal to draw the links, with zoom and pan enabled via d3.zoom. Node and link opacity, stroke, and position are animated through d3 transitions.

Cchristiand416@gmail.com
71% match