Quinn Sebso

Collapsible Tree Hierarchy - Real Data

A collapsible tree hierarchy displays real hierarchical data, with nodes that expand and collapse on click. It also enables navigation by re-rooting the tree view to the clicked node, while a stack tracks the path back to previous roots. The visualization uses d3.v6’s tree layout and transitions, rendering SVG circles and text labels with animated updates. A node-info div shows details for the selected item, and the canvas height dynamically adjusts to fit the visible hierarchy.

Medical Data Tree CURRENT FINAL - testing

This interactive visualization presents a hierarchical tree of medical data sourced from a GitHub repository. The visualization shows a tree structure where nodes represent medical concepts, and users can click on nodes to expand or collapse their children and view detailed information. The tree is rendered using the D3.js library’s hierarchical layout algorithm, with SVG for rendering and CSS transitions for smooth animations. The code also includes a categorization function that uses regular expressions to classify nodes into medical categories like diseases, treatments, and biological processes.

Medical Data Tree - Category

This interactive tree visualization categorizes hierarchical medical data from an external JSON file, using regex patterns to classify nodes into domains like diseases, treatments, or genetics. Built with React and D3 v6, it renders an animated SVG tree where clicking a node collapses or expands its children. The implementation uses D3’s tree layout, transitions, and click handlers to update the view, while a dynamic info panel displays the selected node’s name and key.

SAVE SPOT Medical Data Tree - Category

This visualization displays a hierarchical tree of medical data from the MeSH (Medical Subject Headings) dataset, organized into categories based on regular expression pattern matching of node descriptions. The interactive SVG tree, rendered with D3.js v6, allows users to click nodes to expand or collapse branches, dynamically updating the layout with smooth transitions while displaying node information in a separate panel. The code uses D3’s tree layout and transition APIs to reposition nodes and links, with node radius scaling based on the number of children.

Final Circle Packing

This interactive circle packing visualization renders a hierarchical medical dataset using D3.js v4, fetching JSON data from external URLs. The visualization displays nested circles colored along a linear hue scale, where users can search for specific nodes via an autocomplete search bar. The code uses `d3.hierarchy` and `d3.pack` for layout computation, with SVG circles representing hierarchy levels. Clicking a node displays its ancestor path, while hover states highlight nodes. The implementation includes a tooltip system for additional node information, all rendered through D3's selection and rendering API within an SVG container.

SAVE POINT Circle Packing - SEARCH

This visualization uses a D3.js v4 circle packing layout to display a hierarchical medical dataset, with each node’s area proportional to its leaf count and color mapped via a linear scale. A search bar with autocomplete suggestions allows users to locate nodes by name; selecting a result highlights the corresponding circle and displays the full ancestor path below the search input. The rendering uses SVG and includes interactive zooming and panning, with tooltips on node click. Data is loaded from external JSON files, and the interface is built within a React framework.

SAVE POINT Circle Packing

Fork of SAVE POINT Circle Packing - SEARCH

A circular packing visualization displays a hierarchical medical dataset as nested circles, with color encoding depth and interactive zooming into subtrees. Users can search by name via an input field with autocomplete, triggering animated zoom transitions on matching nodes. The implementation uses d3.pack for layout, d3.hierarchy for tree construction, and d3.interpolateZoom for smooth transitions, with data fetched from external JSON URLs. Search filtering relies on React state synced with the SVG elements, while rendering remains SVG-based.

Fork of SAVE POINT Circle Packing

Fork of Bubble tree test

This visualization displays a hierarchical bubble tree of microbiology terms, using nested circles to represent taxonomic and structural relationships within the domain. The tool enables interactive zooming through circle clicks, with smooth animated transitions between hierarchy levels. Built with D3 v4's `d3.pack` layout, the code fetches JSON data from a GitHub repository, then applies `d3.interpolateZoom` and `transition.tween` for the zoom effect. Circles are colored by depth using an HSL color scale, and labels fade in and out based on the current focus node.

Fork of Bubble tree test

This example presents an interactive bubble tree visualization of hierarchical medical data. It displays a collapsible node-link diagram where clicking a node reveals its children, recentering the tree, and showing detailed information about the selected item in a separate panel. The visualization uses D3.js v6 with SVG rendering and smooth transitions, loading data from a remote JSON file hosted on GitHub. The chart dynamically sizes node radii based on the number of children and categorizes nodes by their medical descriptions. The code also demonstrates recursive tree traversal and data categorization logic within a React framework.

Medical Data Tree CURRENT FINAL

This interactive visualization presents a hierarchical tree of medical data, allowing users to click on nodes to expand and collapse branches or navigate to a new root. The tree is rendered using SVG with smooth animated transitions, utilizing d3.v6's layout and transition APIs. Node positions and link paths are updated dynamically, with circle sizes reflecting the number of children. Data originates from a JSON file, and node descriptions are categorized into medical topics like diseases and treatments, with a clickable info panel displaying node names and keys.

Collapsible Tree Hierarchy - Real Data

This interactive tree visualization displays the hierarchical structure of MeSH (Medical Subject Headings) data, with nodes representing terms and branches showing parent-child relationships. Users can click nodes to collapse or expand subtrees and navigate through the hierarchy. Built with React and d3.v6, the visualization uses SVG rendering with smooth 250ms transitions, `root.descendants()`, and `tree(root)` for layout computation. Node circles scale based on child count, and click events trigger nested navigation through a node stack while a tooltip shows the selected term's name and key.

Medical Data Tree - Category - retry fork of no idea

SAVE OF Collapsible Tree Hierarchy - Real Data

This visualization presents a collapsible tree hierarchy of MeSH (Medical Subject Headings) data, organized into a hierarchical structure based on the "MN" field and labeled with descriptive names. Users can click nodes to expand or collapse branches and navigate the hierarchy. Built with React and D3.js v6, the visualization uses SVG and animations to render nodes with dynamic radii and text labels. The data is loaded from a remote JSON file, and custom JavaScript functions categorize entries by their descriptions to sort the tree’s root children.

Fork of I have no idea lol Medical Data Tree - Category

Fork of SAVE SPOT Medical Data Tree - Category (retry)

This interactive tree visualization explores the Medical Subject Headings (MeSH) hierarchy, using a force-directed layout to display the relationships between medical categories and their sub-terms. Built with D3.js v6 and React, the tree is rendered as SVG elements, with animated transitions when nodes are clicked to expand or collapse child categories. The code processes flat MeSH data into a hierarchical structure, categorizing entries based on regex patterns matching their descriptions. Users can navigate through the tree by clicking nodes, which triggers smooth animations and displays node-specific information in a floating div.

Fork of SAVE SPOT Medical Data Tree - Category

This visualization presents a hierarchical medical data tree that organizes disease-related concepts into 18 broad categories, such as treatment procedures, biological processes, and genetic topics. Users can click nodes to expand or collapse branches, navigating the structure while a side panel displays the clicked node's name and key. Built with D3.js v6 and React, the tree uses animated transitions to smoothly update node and link positions. Data is sourced from a remote JSON file and processed by a custom categorizer that assigns nodes to categories based on regex pattern matching.

Collapsible Tree Hierarchy - Real Data

This interactive collapsible tree visualizes a hierarchical structure of medical terms derived from MeSH data. The visualization displays the tree as an SVG graphic, with nodes representing medical concepts and connections illustrating their relationships. Users can click on nodes to expand or collapse subtrees, while a dedicated info panel shows the term’s name, key, and description. Built with D3.js v6, the tree uses animated transitions via `transition()` and `attrTween` to smoothly reposition nodes and links. The code implements a custom `convertToHierarchy` function to transform flat JSON data into a nested tree structure.

Collapsible Tree Hierarchy - Real Data - Structured

This example presents a collapsible tree hierarchy using real data, rendered as an SVG. The visualization displays nodes that can be clicked to expand or collapse their children, revealing the structured relationships in the data. Built with React and D3 v6, it uses `d3.hierarchy` to process the data and `d3.tree` for layout, with custom JavaScript handling node clicks and updating the tree structure dynamically through `updateTree`.

Collapsible Tree Hierarchy Reformatted - Real Data

This interactive collapsible tree visualization displays hierarchical data as an SVG with animated transitions between expanded and collapsed states. Users click nodes to re-root the tree and reveal child nodes, while a dynamic info panel shows the selected node’s ID and name. Built with d3.v6 and React, it uses the `transition()` API for smooth resizing and layout updates, with node positions computed via `root.descendants()` and `root.links()`. The rendering relies on SVG elements, including circles and text, styled with CSS. The dataset originates from a real source, as indicated in the example’s metadata.

Collapsible Tree Hierarchy Reformatted

This example presents an interactive collapsible tree visualization built with React and D3.js v6. Clicking a node re-roots the hierarchy to that node, toggling its children open or closed while animating transitions between states. The SVG rendering uses `d3.tree`, `d3.hierarchy`, and `transition.attrTween` to smoothly update node positions and link paths over 250-millisecond durations. A pop-up div displays the clicked node’s ID and name, positioned dynamically within the viewport.

Collapsible Tree Hierarchy

This example shows an interactive collapsible tree hierarchy, allowing users to click on nodes to expand or collapse their children, and to navigate the tree by re-rooting it at a clicked node. The visualization uses D3.js v6 to compute a tidy tree layout with `d3.hierarchy` and renders it as an SVG, with animated transitions for all changes. A custom node-info div displays the name and ID of the last clicked node. The code also manages a stack to remember previous roots, enabling backward navigation through the hierarchy.

Collapsible Tree Restructured

This example shows an interactive collapsible tree diagram built with D3.js v6 in a React framework. Clicking a node toggles its children and displays a floating info panel with the node's ID, name, and value. The visualization uses SVG rendering with animated transitions via `d3.transition` and a hierarchical layout from `d3.tree`. Node and link enter/update/exit patterns handle dynamic restructuring, with `d3.select` managing the DOM and event listeners for user interaction.

Collapsible Tree New Tree Each Time

This example demonstrates a collapsible tree diagram where each click on a node generates a fresh tree layout. It uses d3.hierarchy and d3.tree to compute the node positions, with d3.transition to animate the expanding and collapsing of branches. The visualization updates the SVG elements dynamically, reassigning parent-child relationships and rebuilding the tree structure on each interaction. Data is derived from a hardcoded hierarchical JSON object, rendered as colored circles and connecting links.

Collapsible Tree

This interactive visualization displays a hierarchical tree structure, allowing users to click on nodes to expand or collapse their child branches. The tree’s layout dynamically repositions nodes with animated transitions, adjusting the SVG canvas height to fit the visible structure. Built with React and D3 v6, it uses the `d3.tree()` layout, `d3.linkHorizontal()` for connecting links, and reads hierarchical JSON data from a remote file. Node labels are rendered alongside circular markers, with parent and leaf nodes shown in different colors.

Hierarchy Tree

This interactive visualization combines a geographic map of countries with a scatter plot of global development indicators. The left panel uses a `d3.geoEqualEarth` projection with `d3.geoPath` to render country polygons, colored blue-white by birth rate. The right panel plots fertility rate against life expectancy using `d3.scaleLinear` for axes and point scaling, with circle size encoding population. Hovering highlights matching regions across both panels via `d3.selectAll` selectors. Data comes from world GEOJSON, world-data-2023.csv, and country-by-continent JSON sources.

Hierarchy Tree of US Counties

This example presents a minimal HTML page that displays a large, centered "Hello HTML!" message using CSS styling. The layout relies on a simple flexbox-free approach: a div element with a font-size of 13em and text-align set to center. The page uses no external libraries or JavaScript functionality, focusing solely on static HTML and CSS rendering. It serves as a bare-bones starter template for web development, demonstrating basic document structure and style application without interactive features or data visualization.

Fork of ICE8-Tree graph

This fork of the ICE8-Tree graph visualizes hierarchical data as a node-link diagram. It uses D3.js v7 to render circles and text labels for nodes, with steelblue strokes and gray links representing parent-child relationships. The visualization relies on D3’s core selection and layout APIs to position elements, while CSS in `style.css` controls the visual styling. The graph displays a static tree structure, emphasizing clarity through simple white-filled nodes and thin connecting lines.

Fork of Fork of Fork of Scatterplot for world dataset

This scatterplot visualizes the relationship between birth rate and calling code for countries in a 2023 world dataset, with each point’s radius encoding infant mortality. Built with React and animated via D3 v6 transitions, it uses SVG circles with hover interactions that display country names in a tooltip and enlarge stroke width. The code employs `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `.join('circle')` to render the visualization, pulling CSV data from a GitHub raw source.

Fork of Fork of Making a Bar Chart

This bar chart displays GDP for a selection of countries, using horizontal bars scaled by a linear axis. The code employs D3 v5's `scaleLinear` and `scaleBand` for positioning, with `axisLeft` and `axisBottom` for ticks and labels. It generates an SVG visualization, reading data from `data.csv` and formatting tick numbers with `format`. The chart customizes axes by removing domain lines and adding a custom title and axis label.

Fork of Scatterplot for world dataset

This fork of a scatterplot visualizes penguin body measurements from a world dataset. It plots flipper length on the x-axis and body mass on the y-axis, with each point colored by penguin species. The code uses D3 v6 functions including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, rendering SVG circles with mouseover event logging. The chart displays axes, labels, and a title using SVG text elements.

Fork of Responsive Scatter Plot

Fork of Scatterplot for world dataset

This fork of the world dataset visualizes penguin measurements, plotting flipper length against body mass for three species, each colored distinctly by a custom mapping. It displays the data as an SVG scatterplot with axes and labels, using D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a React context, with data loaded from a GitHub-hosted CSV of penguin characteristics.

Fork of Making a Bar Chart

This horizontal bar chart displays the populations of the top 10 most populous countries, sourced from a CSV file. Using d3.csv, d3.scaleLinear, and d3.scaleBand, it renders bars as SVG rectangles. The code demonstrates axis customization with d3.axisLeft and d3.axisBottom, including a custom tick format that converts large numbers to abbreviated labels like "B" for billions.

Fork of Responsive Scatter Plot

Fork of CSV Dataset Template

This example displays the first row of the Palmer Penguins dataset as a JSON object in a large preformatted text block. It loads the CSV data, parses the quantitative attributes into numbers, and then renders the parsed first entry. The code imports data from `data.csv` and uses a stringified JSON representation to display the object within the container's inner HTML. The data originates from the palmerpenguins GitHub repository.