Skip to main content
Log in
S

srinivasjavvadi

@srinivasjavvadi·15 public vizzes

Loading thumbnail…

D3.js collapsible tree with boxes

This example shows a hierarchical tree diagram where each node is a box containing text, with links drawn between parent and child nodes. Clicking a node collapses or expands its children with a smooth animated transition. The tree uses D3 v3’s layout and zoom behavior, with SVG for rendering. Node colors correspond to a `type` field from the JSON data, and tooltips appear on hover, while link arrows indicate sync or async direction.

Jan 3, 2024
Loading thumbnail…

Organizational from

This interactive organizational chart displays a company hierarchy from a JSON data source, starting with the CEO and branching down through managers, team leads, and individual contributors. Users can toggle between classic line-based and modern diagonal connector styles using buttons. Built with D3.js v3 and React, the visualization renders SVG nodes and edges with animated transitions. It implements custom data loading through a `loadFunc` callback, which fetches child nodes asynchronously via jQuery’s `getJSON` method, and uses D3’s tree layout to position nodes at fixed depths.

Jul 21, 2020
Loading thumbnail…

Organizational chart using d3.v5

This example displays an interactive organizational chart for a fictional company, with employee nodes showing photos, names, and job titles. The hierarchy is rendered as a zoomable and pannable tree using SVG and animations. Built with React and d3.v5, it leverages `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` to manage layout, links, and pan/zoom interactions. The data comes from `flare.json`, with expand/collapse controls and a search feature for finding employees.

Jul 21, 2020
Loading thumbnail…

Tree

This interactive tree diagram visualizes a hospital’s operational hierarchy, from departments like Pharmacy and Laboratory down to individual patient statuses such as “Serving” or “Waiting.” Built with React and D3 v3, it uses a collapsible layout with SVG nodes and animated transitions. Users can pan, zoom, and click nodes to expand or collapse branches, with red blinking highlights drawing attention to specific states. Supplementary tables and timelines display patient details and token information, while a legend allows resetting the view to its initial state.

Jul 1, 2020
Loading thumbnail…

Gantt-Chart in D3.js V3 advanced

This example shows the journey of a token ("RC10") through a hospital process, visualizing different stages like Waiting, Vital, Doctor, Laboratory, and Pharmacy as colored bars along a timeline. Built with D3.js v3, it uses `d3.time.scale`, `d3.svg.axis`, and `d3.interpolateHcl` to create a Gantt chart with a time-based x-axis and category-colored rows. Interactive hover tooltips display additional details for each task. The visualization renders to SVG and includes a grid, vertical labels, and percentage calculations based on the provided task data.

Jun 29, 2020
Loading thumbnail…

D3-timeline in D3.js V3 ref from (jiahuang)

This example displays a medical clinic’s patient flow timeline, showing categories like Waiting, Vital, and Doctor as labeled, color-coded bars positioned along a time axis from 10:10 to 11:30. The visualization also includes a separate SVG legend mapping each category to its assigned color and label. Built with D3.js v3, the chart uses the custom `d3.timeline()` API, which accepts options for stacking, margins, tick formatting, and axis navigation, rendering the timeline as SVG elements with rects and text.

Jun 26, 2020
Loading thumbnail…

Tree 7

This example presents an interactive collapsible tree diagram built with D3.js v3, visualizing a hierarchical dataset of cardiology departments and patient information. The tree layout uses SVG rendering and animation to smoothly transition nodes and links when users click to expand or collapse branches. The visualization employs the `d3.layout.tree` function to compute node positions and `d3.svg.diagonal` for link paths, with data loaded from a JSON file.

Jun 25, 2020
Loading thumbnail…

Tree

An interactive tree visualization displays a hierarchical dataset from flare.json, with collapsible nodes, color-coded status indicators, and breadcrumb navigation. The right panel shows user and token details for selected nodes. Implemented with React and D3 v3, it uses `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` for pan/zoom, with SVG rendering and animated transitions. Node colors reflect time-based status, and blinking effects highlight urgent items, while the interface supports expanding or collapsing all branches.

Jun 24, 2020
Loading thumbnail…

Gantt-Chart in D3.js V3

This Gantt chart visualizes a hospital workflow, showing the timing and status of tasks such as "Waiting," "Vital Serving," and "Doctor Serving" across a timeline. Segmented bars represent task durations, with colors indicating status like WAITING or DOCTOR. Built with D3.js V3, it uses `d3.time.scale` and `d3.scale.ordinal` to position bars, and `d3.svg.axis` for time and task labels. Animated transitions via `transition()` and `call(xAxis)` support redrawing when data updates. Data is a static array of start/end dates rendered as SVG rectangles.

Jun 23, 2020
Loading thumbnail…

Untitled

An interactive drag-and-drop tree diagram visualizes the hierarchical structure of the Flare JSON dataset. The visualization uses D3.js v3 to render nodes and links as SVG elements, and incorporates an animation system with a zoom listener and pan controls. The tree layout is computed using `d3.layout.tree` and `d3.svg.diagonal` projections, while node dragging and sorting are handled through custom JavaScript functions. The interface allows users to explore the dataset by repositioning nodes within the tree.

May 29, 2020
Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents CDC ILINet flu surveillance data in a four-panel React and D3 v5 dashboard. It displays weekly flu metrics per year through line charts, a choropleth map of state-level averages using `geoAlbersUsa` and `geoPath`, a bar chart of top states ranked by value, and a colored line chart tracking state trends. Users can filter by year, select metrics from dropdowns, and hover or click to cross-filter across panels. The SVG rendering uses `scaleLinear`, `scaleBand`, and `scaleOrdinal` for scales, with data loaded via `d3.csv` and US state boundaries from TopoJSON.

May 18, 2020
Loading thumbnail…

Tree 7

Animated tree diagram that shows a branching dataset from a JSON file, where nodes represent hospital divisions and clinics, and specific clinic nodes with blinking red or blue highlights flag elevated service counts or warnings. Built with D3.js, it uses a tree layout with collapsible nodes and smooth transitions to rearrange the visualization on click. Node styling uses CSS keyframe animations for the warning indicators, and all rendering is handled by inline SVG.

May 14, 2020
Loading thumbnail…

D3.js collapsible tree with boxes

This example shows an interactive collapsible tree diagram rendered as SVG boxes, with nodes representing a hierarchical data structure from a JSON file. Each node displays a name, type, code, and version, with links labeled by direction (SYNC or ASYN). The visualization uses D3.js v3 layout and zoom behaviors, with click interactions to expand and collapse child nodes. Rectangles, curved links, and tooltips are styled through CSS, and animated transitions smoothly update the layout.

May 13, 2020
Loading thumbnail…

Bar Chart

This example uses the D3.js library to create a zoomable tree diagram that visualizes hierarchical data from a JSON file, depicting confirmed cases, deaths, and recoveries across hospital departments. The visualization uses an animated, interactive collapsible tree layout where nodes represent locations like clinics and centers, with edge thickness scaled to data values. The code implements custom D3 scales for color and width, and uses SVG rendering with transitions to animate the expanding and collapsing of nodes. Tooltip styling and node colors are defined through CSS and D3's scaleLinear function.

May 8, 2020
Loading thumbnail…

Testing Pie Chart

This interactive dashboard combines a pie chart, bar chart, and line chart to display categorical and time-based data. The pie chart animates its inner radius using D3’s arc generators and transitions, with slices labeled by category. The line and bar charts use D3 scales, axes, and SVG paths to render trends and comparisons. All visualizations are built with D3 v2 and React, using SVG for rendering and animation.

Apr 21, 2020