ericliu6178@gmail.com

@EL617·4 public vizzes

Fork of ICE - 8: Visualizing Tree

This interactive tree diagram visualizes hierarchical data about topics and their subcategories, using branch lengths to represent relationships and values. The visualization shows a collapsible tree structure where users can click nodes to expand or collapse children. The code uses D3.js version 3.5.17 with the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the layout and draw curved links between nodes. Nodes are rendered as SVG circles with text labels, and smooth animated transitions update the tree when nodes are clicked. The data structure contains topics like Sports, Crime, and Culture with their respective subcategories.

Apr 7, 2023

Loading thumbnail…

Hierarchical Word Clustering

This hierarchical word clustering visualization uses a circular packing layout to display the frequency of words from news articles about crime. The d3.pack layout positions circles by data size, with color encoding depth in the hierarchy. Clicking a circle triggers a smooth zoom transition to focus on that cluster, while hovering reveals a tooltip showing the word, article count, and frequency relative to its parent. The visualization renders with SVG and animation, loading data from a local JSON file.

Apr 6, 2023

Loading thumbnail…

Fork of Fork of Radial Tree of Countries Hierarchy

This radial tree visualization displays a hierarchical dataset of countries, organized by regions under a top-level "News" category. The code uses d3.cluster and d3.hierarchy to compute the layout, with SVG paths drawing curved links between parent and child nodes. Leaves and internal nodes are labeled with country and region names, using d3.scaleSqrt to vary font size by depth. The tree supports interactive panning and zooming via d3.zoom, transforming the entire graph group. Data comes from a local data.json file.

Mar 27, 2023

Loading thumbnail…

Fork of World Countries Hierarchy

This radial dendrogram visualizes a hierarchical dataset of crime-related terms, with three main branches: theft, assault, and drugs. The visualization uses a circular tree layout, placing the root at the center and spreading descendant labels outward along angular coordinates. The code employs D3 version 5 APIs including `d3.cluster`, `d3.hierarchy`, and `d3.linkRadial` to compute the layout and generate curved link paths. Text labels are rotated to align with their radial positions, and font sizes scale with tree depth via `d3.scaleSqrt`. The SVG rendering positions leaf labels with adjusted anchors, and the view supports interactive zooming through `d3.zoom`. The data comes from the local `data.json` file, which contains nested crime word frequencies.

Mar 27, 2023