Yuji

@YujiNNakashima·9 public vizzes

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays the hierarchical structure of either the "flare" dataset or a dispute flow, with nodes that expand and collapse on click. Built with D3 v6, the example renders as an SVG with animated transitions between layout states, using the `d3.tree()` layout and `d3.linkHorizontal()` for curved links. The tree loads JSON data via `d3.json()` and supports zooming through a custom `d3.zoom()` handler. Nodes are color-coded by whether they have children, and text labels use a stroke outline for readability.

Jul 23, 2021

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This example presents a collapsible tree visualization where each node is rendered as a labeled box, with the tree structure loaded from a JSON file containing nodes, types, and link directions. The visualization uses D3.js v3’s `d3.layout.tree` to compute the node positions and animates collapses and expands on click. SVG elements and CSS styles define the boxes, links, arrows, and tooltips, while D3’s zoom behavior allows pan and zoom. The tree is dynamically sized based on its depth and breadth, and node colors vary by type.

Jul 23, 2021

Loading thumbnail…

Fork of Fork of World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a horizontal dendrogram layout. The code employs `d3.tree()` and `d3.hierarchy()` to compute node positions from a JSON data file, with `d3.linkHorizontal()` generating smooth curved links between parent and child nodes. Interactive zooming is enabled through `d3.zoom()`, allowing users to explore the full dataset. Node labels are rendered as SVG text elements with font sizes that decrease per depth level, while paths are styled with a teal stroke and Playfair Display typography.

Jul 22, 2021

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, with the root labeled "World" and leaf nodes representing individual nations. The layout uses a tidy tree algorithm to position nodes, with horizontal links rendered as smooth curves. The SVG rendering employs D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` methods, while pan and zoom interactions are enabled via the built-in `zoom` behavior. Text labels are sized inversely to node depth, creating a clear visual hierarchy.

Jul 22, 2021

Loading thumbnail…

Fork of Chandrapur District Town and Villages

This interactive tree diagram visualizes the hierarchical relationship between Chandrapur District, its towns (Bramhapuri and Nagbhid), and their constituent villages, using geographic administrative data. Users can pan and zoom the layout through d3.zoom. The visualization employs d3.tree and d3.hierarchy to compute node positions, with d3.linkHorizontal generating the curved connecting paths. Text labels are rendered in SVG with a Playfair Display serif font, and their size decreases with depth. The data is loaded asynchronously from a JSON file using d3.json.

Jul 22, 2021

Loading thumbnail…

Fork of World Countries Tree

This visualization displays a hierarchical tree of world countries organized by continent and subregion, using a left-to-right dendrogram layout. The D3 v5 code loads hierarchical JSON data and renders it as SVG paths and text labels. It applies a `tree` layout with `linkHorizontal` for curved connections, supports zooming via `d3.zoom`, and uses the Playfair Display font for country names.

Jul 22, 2021

Loading thumbnail…

Loadin and parsing CSV

This example demonstrates how to load and parse CSV data in a web page using D3 v7 and the browser’s Fetch API. It fetches a raw CSV file from GitHub, specifically a list of CSS colors, and then parses it with `d3.csvParse` to convert the text into an array of objects. The code logs the number of parsed rows to the console, showing the basic workflow for handling external tabular data without visual rendering. The example runs entirely in the browser, with no React or other framework involved.

Jul 22, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face fills the browser window, centered and resized to match the viewport dimensions. The face consists of a large circle for the head, two smaller circles for eyes, and a mouth implied by the head’s bottom curve. The SVG is rendered dynamically using React components, with coordinates and radii calculated from `window.innerWidth` and `window.innerHeight`. The code uses React 16.9 and ReactDOM to mount the App component, drawing all shapes with SVG elements like `<circle>`, positioned via a `<g>` transform.

Jul 18, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a yellow smiley face rendered as a static SVG graphic using React and D3. The face is composed of basic shapes: circles for the eyes and nose, and D3 arc paths for the mouth, upper nose, and eyebrows. The code defines constants for dimensions and positions, then builds the face inside a React component. D3’s `d3.arc` generates the curved mouth and brow shapes, while React’s `ReactDOM.render` mounts the SVG to the DOM. The rendering approach is declarative, with all geometry specified in JSX.

Jul 17, 2021