christiand416@gmail.com

@Christian-D2·6 public vizzes

Wikipedia Exploration Map

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.

Sep 19, 2024

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`.

Sep 27, 2023

Loading thumbnail…

wiki preview test

This example demonstrates an interactive Wikipedia link preview in a plain HTML page, where hovering over a linked article title displays its summary in a pop-up. The code uses the Wikipedia REST API to fetch article extracts on mouseover, then dynamically creates and positions a div element via the DOM API. The pop-up is removed on mouseout. While it loads D3 v7 from a CDN, the interaction relies on native JavaScript event listeners and fetch calls, not on D3-specific visualization functions.

Jun 9, 2023

Loading thumbnail…

Fork of Jeevani ICE8

This visualization presents a hierarchical tree of interconnected topics, starting with South Korea’s drug policy and branching into related subjects like districts, historical incidents, and naval ships. The structure uses jQuery and the D3.js library (version 3.5.17) in an HTML page, with CSS styling for nodes and links. Node circles have a white fill and steelblue stroke, while text labels use a sans-serif font; the tree branches are drawn as gray links. The data is predefined as a JavaScript object, and the visual relationships are rendered using SVG.

Jun 7, 2023

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.

Jun 7, 2023

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.

Jun 7, 2023