rainyrainyguo

Collapsible Tree Final Version 2

This interactive collapsible tree visualization displays a hierarchical structure of computer science topics using SVG and animation. Users can click on circular nodes to expand or collapse their children, while clicking on text labels opens a Wikipedia page for that topic. The tree uses D3 v4’s zoom behavior, transitions with `duration`, and a custom depth-based layout algorithm. Node positions are calculated using depth counts and a scale factor, with data sourced from the `newData2.js` file. The visualization includes white text outlines and color-coded nodes to indicate expandable branches.

Nov 29, 2020

My collapsible Knowledge Graph with taxo data Final Version v4

This interactive collapsible knowledge graph displays a hierarchical taxonomy of computer science topics, with nodes that expand and collapse on click and text labels that link to Wikipedia pages. Built with D3 v4, the visualization uses `d3.forceSimulation` with link, charge, and positional forces to arrange the SVG elements, while `d3.zoom` enables panning and scaling. Node depth is calculated recursively, and data comes from a taxonomy dataset with named nodes, rendered as circles with text labels.

Nov 29, 2020

My Knowledge Graph with taxo data

This visualization displays a hierarchical knowledge graph of computer science concepts, with taxonomy data organized by depth levels. It uses a custom `CreateHierarchy` function to derive parent-child relationships from node and link data, then renders them as an SVG with color-coded nodes based on depth. The graph shows learning paths with labeled edges and arrowheads, implemented using D3 v4 selections and SVG markers. The layout manually positions nodes and links rather than using force simulation, and includes interactive elements like edge paths and text labels.

Nov 28, 2020

My collapsible Knowledge Graph with taxo data

This visualization displays a hierarchical knowledge graph of taxonomic data, showing computer science concepts and their relationships across multiple depth levels. The graph is rendered as a collapsible node-link diagram using SVG, with nodes colored by depth level and connected by arrowed links. The code uses d3.forceSimulation with charge, collision, x, and y forces to position nodes, while d3.scaleOrdinal maps depth values to distinct colors. Clicking nodes toggles their children, expanding and collapsing the hierarchical structure. The layout is computed from the data2.js hierarchy, with forceX positioning nodes at depth-based x-coordinates.

Nov 28, 2020

Untitled

A button click triggers a bar chart transition where five of the ten letters A–J are randomly selected and assigned numeric values, then sorted alphabetically. The chart updates with staggered animations: exiting bars shrink to zero width, while entering and persisting bars grow to their new lengths after a one-second delay. Built with D3 v4 in React, the code uses `scaleBand`, `scaleLinear`, `axisLeft`, and sequential Viridis color scaling, with SVG `rect` elements animated via `transition.attrTween` on the `width` and `y` attributes.

Nov 26, 2020

Collapsible Tree Version 4

Using D3.js v3, this collapsible tree visualization presents hierarchical data from a JSON file with an animated, interactive layout. Users can click nodes to expand or collapse subtrees, with smooth transitions applied via `d3.svg.diagonal` paths and CSS styling. The tree is rendered as an SVG, while `d3.behavior.zoom` and drag-and-drop interactions enable panning and repositioning of nodes within the 900×900 pixel viewport.

Nov 25, 2020

Collapsible Tree Version 3

This example shows a collapsible hierarchical tree of organizational roles, with nodes representing departments and positions that can be expanded or collapsed by clicking. Using D3 v4’s `d3.tree` layout and `d3.hierarchy`, the SVG renders nodes as circles and labels connected by curved diagonal paths. Clicking a node toggles its children via a `collapse` function, while transitions animate node positions, link paths, and circle sizes over 750 milliseconds. The code uses `transition.attr` and `.duration` to smoothly update the layout, with data sourced from the `treeData` object in `data.js`.

Nov 24, 2020

Collapsible Tree Version 4

This interactive collapsible tree displays hierarchical organizational data with expandable and collapsible nodes, shown as circles with labels connected by curved paths. The visualization uses D3.js v4’s tree layout and hierarchy API to position nodes, while user clicks toggle children visibility and trigger smooth 750ms transitions. Data is defined in a JavaScript object with department and role structure, rendered as SVG elements with animated enter, update, and exit states. Node styling distinguishes collapsible parent nodes with filled circles.

Nov 24, 2020

Collapsible Tree Version 2

This collapsible tree visualization shows hierarchical data from a JSON file, where nodes can be clicked to expand or collapse their children. The tree layout is computed using the `d3.tree()` layout algorithm with horizontal links drawn via `d3.linkHorizontal()`. The visualization uses D3 v6 and SVG rendering, with smooth animated transitions (250ms or 2500ms with Alt key) applied to node positions and the viewBox. Clicking a node toggles its children and also collapses any other nodes with the same name, with the tree recompiled via `d3.hierarchy()`.

Nov 24, 2020

Collapsible Tree Version 3

This is a collapsible tree diagram built with D3 v6 that displays hierarchical data in a left-to-right layout. The example shows both a simple flat dataset and a larger flare JSON dataset, with nodes rendered as circles and curved links drawn as cubic Bézier paths. The code uses `d3.stratify` to convert flat parent-child pairs into a hierarchy, then applies a `d3.tree` layout to position nodes. SVG is used for rendering, with text labels positioned beside each circle based on whether the node has children.

Nov 23, 2020

Hierarchy examples: Updatable Tree

An updatable tree diagram displays hierarchical data with labeled nodes and curved links, rendered as an SVG. The code uses the d3.js library’s `d3.tree` layout and `d3.hierarchy` to compute node positions, then draws node circles and text via `d3.select` and SVG group elements. Link paths are generated with a custom `crossDiagonal` function that creates curved, cubic Bézier curves, and the tree updates by appending new nodes and links to the scene.

Nov 22, 2020

Hierarchy examples: Tree

This example demonstrates a node-link diagram for a small hierarchical dataset, showing both the original parent-child relationships and two manually added cross-links between a mid-level node and its grandchildren. The tree layout is computed using `d3.tree()` in D3 v6, and the visualization is rendered as an SVG with separate groups for nodes and links. Nodes appear as circles with text labels, while links are drawn as curved Bézier paths using a custom `crossDiagonal` function, which computes control points to create gentle arcs between connected nodes. The data is sourced from a static JavaScript object.

Nov 22, 2020

Hierarchy examples: Cluster

This example shows a hierarchical cluster layout, where a tree structure with nodes labeled A1, B1, B2, and C1–C3 is arranged into two levels of branches with straight connecting lines. The visualization uses d3.hierarchy and d3.cluster to compute node positions, then renders the result as an SVG with circles for nodes and line elements for links. The code applies a fixed size of 700 by 400 pixels to the layout, and the data is defined inline as a JavaScript object with nested `children` arrays. Node and link styling is set via external CSS classes.

Nov 22, 2020

A tree with links between branches draft

This example presents a tree of hierarchical data from the `flare-2.json` dataset, organized with nodes and child edges. Superimposed on the branches are additional curved links connecting various nodes, drawn with a custom `crossDiagonal` function that shifts curves to avoid overlapping the primary D3 `d3.svg.diagonal` edges. A "Regenerate data" button rebuilds the tree and cross-link structure using `d3.shuffle` on a node array, with transitions animating node positions and link paths. The visualization uses D3 v3, rendering nodes as circles and edges as SVG paths with distinct colors for incoming and outgoing cross-links.

Nov 21, 2020

A tree with links between branches.

This example renders a tree diagram with branches that cross-link to other nodes, revealing the underlying connections in a hierarchical dataset. The visualization uses D3.js v3 to build the tree layout and draw custom cubic Bézier curves between linked nodes, adding a visual distinction from standard hierarchical edges. The data is generated procedurally, creating a random tree structure with a specified maximum depth and child count, and then selecting random pairs of nodes to create cross-links. The animation supports regenerating the data with a button click, causing the tree and its cross-links to redraw dynamically.

Nov 21, 2020

Simple Collapsible Tree

This interactive visualization displays a hierarchical tree that expands and collapses when nodes are clicked. The tree uses a horizontal layout with circular nodes and text labels, and collapsible branches animate smoothly via transitions. The code employs D3 v3’s `d3.layout.tree` for positioning and `d3.svg.diagonal` for link paths, with sample data from a manual tree structure containing "Top Level" and dummy child nodes. SVG elements provide the rendering, and animations use `transition().duration()` to update node positions on interaction.

Nov 21, 2020

Collapsible Tree Version 1

This interactive collapsible tree visualizes a hierarchical dataset of software modules, showing parent-child relationships that expand and collapse when nodes are clicked. The tree uses d3.tree for layout, d3.linkHorizontal for curved connecting paths, and d3.zoom for panning and scaling. Nodes and links transition smoothly over 250 milliseconds via d3 transitions, with node colors distinguishing leaf nodes from branches. Data comes from the flare-2.json file, which contains nested name and value properties.

Nov 20, 2020

My Knowledge Graph with taxo data

This visualization displays a knowledge graph of computer science topics, using a force-directed layout via `d3.forceSimulation` with forces for links, charge, x, y, and collision. Nodes are colored by group and positioned along vertical axes corresponding to their group value, revealing a taxonomic structure. The SVG rendering includes labeled arrows on links via `marker` elements and text paths for edge labels. The dataset is defined in a separate JavaScript file and loaded as an ES module.

My Knowledge Graph with taxo data

This example visualizes a knowledge graph of 13 interconnected components, organized into five colored groups representing different functional categories. It shows the relationships and dependencies between entities like “Aggregation,” “Eligibility,” and “Reporting” as directed links with arrowheads. The layout is computed using `d3.forceSimulation` with forces for link distance, charge repulsion, and group-based x-positioning using `d3.forceX`, while the SVG rendering uses D3 v5 to draw nodes and edges. Node colors are assigned via a `d3.scaleOrdinal` based on group membership.

My Knowledge Graph2

This interactive network visualization maps the command hierarchy and relationships among characters from Star Trek: The Next Generation. Using D3.js force-directed layout via `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody`, it renders an SVG graph of nodes and labeled directed edges from a hardcoded triple array. Users can drag nodes, with edges and labels updating continuously throughout the simulation. The code builds the graph using D3's data join operators, `Immutable.Set` for deduplication, and custom arrow markers to indicate relationship direction.

My Knowledge Graph2

A force-directed knowledge graph visualizes relationships among Star Trek characters, ranks, and ships. The node-link diagram displays triples from a small dataset, with edges labeled by the relationship type between entities. Built with D3 v5 and Immutable.js, the graph uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` to simulate physical forces for layout. Nodes are draggable, and each edge includes an arrow marker indicating direction. The SVG rendering computes link orientations dynamically, and the pink circles with text labels depict entities like Picard, the Enterprise, and their connections.

My Knowledge Graph

A network diagram maps related data-processing terms as colored nodes grouped into five hierarchical levels, with directed arrows showing learning dependencies between concepts. Built with D3 v5 and rendered as SVG, the visualization uses `d3.scaleOrdinal` to assign categorical colors and custom SVG markers for arrowheads. Links are drawn as simple lines with tooltips, while node positions are fixed by the dataset rather than a force simulation, presenting a static knowledge graph.

Knowledge Graph

This knowledge graph visualizes dependencies between system components, grouped into five colored teams (Team A through Team E), with arrows indicating data flow between nodes. The SVG rendering uses d3.forceSimulation to position nodes and draw directed links with arrowhead markers. Node colors are assigned via d3.scaleOrdinal with a custom range, while runtime values and labels are embedded in the dataset. A subgraph highlights a subsection of the network, and each link includes a tooltip via SVG title elements.

Knowledge Graph

This visualization shows a directed knowledge graph of robot components, with colored nodes representing teams and labeled edges indicating workflow transitions. The code uses d3.forceSimulation to calculate node positions, d3.scaleOrdinal for team-based coloring, and SVG markers for arrowheads. The graph displays 13 nodes and 29 links with three edge types ("Next", "Go to", "This way"), rendered as a static SVG after force simulation stabilizes, with text labels and a subgraph panel for additional context.

Nov 18, 2020

Barchart met RDW Data v6

Two bar charts share a single SVG canvas, displaying categorical values for groups A, B, and C. Users switch between the "Taxis" and "Personenautos" datasets by clicking buttons, which triggers a D3 v5 transition that smoothly animates the rectangular bars to their new heights over one second. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `selection.merge` with `.transition().duration()` to update existing SVG rect elements. Static axes and a teal fill style (via CSS) frame the animated data comparison.

Nov 18, 2020

dndTree

This example shows an interactive zoomable and pannable tree diagram that visualizes the hierarchical structure of the flare JSON dataset. The visualization supports drag-and-drop repositioning of nodes, with ghost circle indicators and animated path updates during the operation. Built with D3 v3, it uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` to render SVG nodes and links. The diagram automatically sorts nodes alphabetically and includes panning near the viewport edges while dragging.

Nov 18, 2020

World Countries Tree

This example displays a single circle positioned at coordinates (300, 300) with a radius of 40 pixels, filled with a teal color. The visualization uses an SVG element created with D3.js v4, where the circle is appended to a group that supports zooming and panning through the `d3.zoom` API. The viewport fills the browser window, and the circle remains stationary apart from user-driven transformations. The code relies on `d3.select` to bind the SVG to a div container, with styling applied via external CSS.

Nov 16, 2020

World Countries Tree

A yellow circle face with animated eyebrows demonstrates D3 v4 transitions. The face is drawn with SVG circles, rectangles, and an arc-based mouth, centered via a transformed group. Eyebrows move up and down using chained `transition().duration(2000)` calls that toggle their vertical offset. The code uses D3's `select`, `arc`, and transition API on static SVG elements, with no data binding or force simulation.

Nov 16, 2020

Tryout

A tree visualization displays the hierarchical structure of the flare-2.json dataset, with nodes positioned by a `d3.tree` layout using horizontal links and labeled circles. The SVG rendering supports pan and zoom through `d3.zoom`, allowing users to explore the full hierarchy. Code implements custom node sizing via `nodeSize` and applies a white text stroke for readability.

Tryout

This visualization shows a hierarchical tree layout of the Flare dataset, mapping its nested structure into a horizontal dendrogram where nodes are labeled with their names. The tree uses D3's `tree` and `hierarchy` functions to compute node positions, and `linkHorizontal` generates curved paths between parent and child nodes. Text labels are positioned at each node with font size decreasing by depth, and the entire graphic supports pan and zoom through D3's zoom behavior, which applies a transform to the SVG group containing both links and labels.

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using a tidy tree layout. It displays the geographic classification structure, from the root "World" down to individual nations, with each level visually separated by horizontal links and labeled nodes. The rendering uses D3.js v6 with an SVG canvas, employing the `tree` and `hierarchy` functions for layout and `linkHorizontal` for edge paths. Text elements are positioned using the layout coordinates, with font size decreasing by depth to emphasize hierarchy. The interactive pan and zoom feature is implemented via the `zoom` function, allowing users to explore the full dataset.

World Countries Tree

Blank Canvas

A blank, full-viewport SVG canvas renders as a large rounded rectangle, filling the entire browser window. The visualization uses d3 v6’s `select` to target the empty `svg` element and sets its width and height to the viewport dimensions via `clientWidth` and `clientHeight`. A single `rect` is appended with a 40-pixel corner radius, creating a soft-edged frame. The CSS fixes the body position to eliminate scrolling, ensuring the canvas remains static and unobstructed, with no data or interaction yet defined.

Cheap Tricks for Interaction

This example shows a world map that users can pan and zoom, with countries displayed as light green regions that turn red on hover. The visualization loads geographic data as TopoJSON from the world-atlas package and renders it as SVG paths using d3.geoPath with a d3.geoNaturalEarth1 projection. Interaction is implemented through d3.zoom, while country names are joined from a TSV file and displayed via SVG title tooltips.

Let's make a Map!

This example displays a natural Earth projection world map using SVG, with countries filled in light green and oceans rendered in blue. It loads GeoJSON country boundaries from a World Atlas TopoJSON file via `d3.json`, then converts the TopoJSON features using the `topojson.feature` API. The map is drawn with `d3.geoNaturalEarth1` for projection and `d3.geoPath` to generate SVG paths, including a separate path for the globe’s sphere.

Bowl of Fruit - Click to Select

A row of five apples animates into view, with one apple replaced by a lemon and two apples removed over time, illustrating join-based updates. Hovering over a fruit highlights it with a black stroke and clears the selection on mouseout. The example uses D3 v6 with `select`, `range`, and `scaleOrdinal` for color and radius, while `transition.attr` animates circle positions and radii in SVG.

Bowl of Fruit - General Update Pattern2

A bowl of fruit shows five apples in a semi-transparent pink dish; one apple is temporarily removed, then one apple is replaced by a lemon, and then another apple is eaten. The visualization uses the D3 general update pattern via the `fruitBowl` function, which manages SVG `g` elements and their `circle` and `text` children. D3’s `scaleOrdinal` maps fruit types to fill colors and radii, while `selection.selectAll`, `.enter()`, `.merge()`, and `.exit().remove()` handle incremental changes to the data array.

Bowl of Fruit - General Update Pattern2

This example demonstrates the General Update Pattern, where a set of SVG circles representing fruit in a bowl is dynamically added, removed, and modified. Over a few seconds, apples disappear, and one apple transforms into a lemon, with each fruit’s color and radius encoded via `scaleOrdinal`. The visualization uses d3’s selection/merge API (`groupsEnter.merge(groups)`) to animate transitions smoothly. The code relies on d3.v6 and a custom `fruitBowl` function driven by `setTimeout` calls.

Bowl of Fruit - General Update Pattern

A circle transitions in and out of a bowl of fruit, demonstrating the D3 general update pattern. The visualization shows five apples that shrink, change color, or disappear based on array mutations. Using D3 v6, the code applies ordinal scales for color and radius, while `selection.enter`, `merge`, and `exit` handle data joins with SVG circles and animated transitions over one second.

World Population By Year 2015

This visualization shows the growth of world population over time, with a filled area chart that uses a smooth curved baseline to represent population values. The data is loaded from a CSV file and parsed with d3.csv, then rendered as an SVG path generated by d3.area with a curveBasis interpolation. The chart includes time-scaled x-axis and linear y-axis with tick formatting that converts population values to billions, while d3.scaleTime and d3.scaleLinear handle the coordinate mapping.

Temperature in SF Line Chart

This chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file and rendered as a filled area chart using a smooth curve. The visualization uses D3 v6’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with the `curveBasis` generator, all drawn as SVG elements with custom grid lines and labels.

Temperature in SF Line Chart

This line chart visualizes a week of temperature readings in San Francisco, plotting time on the x-axis and temperature on the y-axis. A smooth maroon curve connects the data points, supported by a grid of light gray tick lines with labeled axes. The code uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisBottom/axisLeft to render the SVG. Data is loaded via d3.csv from a remote CSV file, with timestamps parsed as Date objects and temperatures converted to numbers.

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight across car models from the auto-mpg dataset, with each circle representing a vehicle. The chart displays the data as red semi-transparent points, revealing overlapping clusters and correlations. The visualization uses D3 v6 APIs including `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` for data loading, rendering as an SVG. Custom axis labels and a title clarify the variables, with tick marks extending across the plot to aid reading values.

Customizing Axes

This example shows a bar chart of the top 10 most populous countries, using circles instead of bars, with population values on the x-axis and country names on the y-axis. It customizes axes by formatting tick labels with `d3.format` to abbreviate numbers (e.g., “B” for billions) and by drawing grid lines via negative tick sizes. The code uses `d3.csv` to load data from a CSV file, `d3.scaleLinear` and `d3.scalePoint` for scales, and `d3.axisBottom` and `d3.axisLeft` to render the axes in an SVG.

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, with data loaded from a CSV file and rendered as SVG. The visualization customizes both axes by removing domain lines and tick lines from the categorical y-axis, while the linear x-axis uses a tick format that abbreviates large numbers and converts 'G' to 'B' for billions. It employs d3.csv, scaleLinear, scaleBand, axisLeft, and axisBottom, with gridlines generated via tickSize on the x-axis.

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, with country names on the y-axis and population on the x-axis. The bars are rendered as SVG rectangles, filled with steelblue. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand to map values to coordinates, and d3.axisLeft and d3.axisBottom to draw the axes. The population values are parsed and multiplied by 1,000.

Untitled

This interactive line chart visualizes the sentiment polarity of tweets from a U.S. presidential Twitter account from June 14 to June 17, 2020, using a dataset (`crawled_mini.csv`) that maps hourly timestamps to polarity scores. The chart plots the polarity values over time, with a line graph showing the trend; users can filter the view by a time range via a Metro UI double slider or select a specific hour from a dropdown menu. The visualization is built with D3.js (v3), using `d3.time.scale`, `d3.svg.axis`, and `d3.svg.line` to render the axes and line, while a custom `d3.legend` function adds a legend. The Y-axis spans from -1 to 1 to represent the polarity range, and the line is styled in steelblue.