Skip to main content
Log in
N

nadia-el

@nadia-el·25 public vizzes

Loading thumbnail…

Tree6

A radial tree visualization displays the hierarchical Bill of Materials (BOM) for an Xmas-Tree product, with nodes positioned in a circular layout and connected by curved links. The visualization uses D3 v4's `d3.cluster` layout to compute angular and radial positions, then renders the structure as SVG paths and circles. Node labels rotate based on their angular position, and the entire visualization supports pan and zoom via `d3.zoom`. The data comes from a JSON file representing the product's component hierarchy.

Nov 10, 2020
Loading thumbnail…

RADIAL TREE

This radial tree visualization displays a hierarchical dataset, such as a world geography or an engineering part structure, with nodes arranged in a circular layout. The code uses the D3.js v4 library, specifically the `cluster()`, `hierarchy()`, and `zoom()` APIs, along with SVG rendering. The visualization shows how the hierarchy branches outward from the root, with text labels positioned and rotated based on depth and angle. It also includes panning and zooming interaction to explore the tree structure, with the data loaded from a JSON file.

Nov 2, 2020
Loading thumbnail…

Arastu-360

Arastu-360 visualizes a family tree as a radial dendrogram, with each named ancestor and descendant positioned along concentric rings radiating from the center. The entire tree slowly rotates around its origin, and nodes and links fade in sequentially from the root outward. Using D3 v5’s `d3.tree`, `d3.hierarchy`, and `d3.linkRadial`, the SVG renders genealogical data loaded from a JSON file, while `d3.transition` and `d3.easeLinear` drive the rotation and phased appearance.

Oct 28, 2020
Loading thumbnail…

Arastu-360

Arastu-360 visualizes a family tree as a radial layout, with the patriarch Arastu Yar Jung at the center and descendants radiating outward. The entire tree slowly rotates in a continuous circular animation, while individual nodes and links fade in sequentially. Built with D3.js v5, it uses `d3.tree`, `hierarchy`, and `linkRadial` to compute the radial positions and paths, and `.transition()` to animate the opacity of elements. The data is loaded from a JSON file, and the visualization renders as SVG with an animated rotation driven by a recursive timer.

Oct 28, 2020
Loading thumbnail…

SANKEY Diagram for Spread of COVID-19

This Sankey diagram visualizes the early spread of COVID-19 between countries, with China as the primary source and the USA as the main destination, using weighted links to show transmission flow. The D3 v5 code loads data from a JSON file and renders an interactive SVG using `d3.sankey()` for node alignment and link path generation. Nodes are draggable via `d3.drag()`, and link thickness reflects transmission values, with colors assigned using `d3.scaleOrdinal`. The layout computes node positions through iterative relaxation and collision resolution.

Oct 28, 2020
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This visualization combines a world map of migrant deaths with a linked brushable time-series histogram. The map uses a Natural Earth projection with circles sized by the total number of dead or missing migrants, while the histogram aggregates monthly totals. Brushing the histogram filters the map in real time via React state. The code employs d3.geoNaturalEarth1, d3.geoPath, d3.scaleSqrt, d3.brushX, and d3.bin, with data from the Missing Migrants Project and country boundaries from World Atlas TopoJSON, all rendered as SVG.

Oct 28, 2020
Loading thumbnail…

Pollution in US with counties with color legend

A choropleth map of the United States displays PM2.5 concentration levels for counties in the year 2000, using a sequential YlGnBu color scale from d3.interpolateYlGnBu. County boundaries come from the US Atlas TopoJSON file, rendered as SVG paths via d3.geoPath and geoIdentity. A linear gradient legend annotates the concentration scale. Data is loaded from a CSV using d3.csv and filtered into a Map for lookup. The visualization is built with React and D3 v5.

Oct 28, 2020
Loading thumbnail…

Courses Tree

This example presents a course prerequisite tree as a static, pre-positioned node-link diagram. Users can click circular nodes to select courses, which highlights all related links and appends the course label to a sidebar list; clicking again deselects it. The visualization uses D3 v5, with an SVG renderer, vertical link paths via `d3.linkVertical`, explicit x/y coordinates per node, and CSS class-based styling for link highlighting. It uses a JSON data file containing nodes with levels and class attributes.

Oct 28, 2020
Loading thumbnail…

RADIAL TREE 3

This radial tree visualization displays a hierarchical dataset of part numbers and associated values, branching from a single root node. The layout uses D3’s `d3.cluster` to arrange nodes radially, with curved paths rendering parent–child links. Panning and zooming are supported via D3’s `zoom` behavior, while node labels are rotated to follow the radial angle. Data is loaded from a CSV file and processed with `d3.stratify` to build the tree structure, rendered as SVG.

Oct 28, 2020
Loading thumbnail…

D3.js collapsible tree with boxes

This interactive D3.js visualization displays a hierarchical tree of nodes, each rendered as a colored box with labels and metadata, connected by curved links that indicate synchronization direction. Users can collapse and expand branches by clicking nodes, with smooth animated transitions updating the layout. The tree is built from a JSON data structure and rendered as SVG, using D3’s tree layout, zoom and drag behaviors, and custom tooltips. Node colors correspond to data types, while arrow markers on links highlight asynchronous versus synchronous connections.

Oct 16, 2020
Loading thumbnail…

Tree 7

This interactive tree diagram displays a hierarchical bill of materials, starting from a root part number and expanding into multiple branches of subcomponents and part numbers. Using the D3.js library (version 3.5.17) with an SVG rendering, the visualization loads JSON data from `xt_tree.json` and presents it with a tidy tree layout. Nodes are clickable, allowing users to collapse or expand child nodes with smooth animated transitions via `d3.layout.tree` and `diagonal` path generators.

Oct 16, 2020
Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows annual CO2 emissions (in million tonnes) for multiple countries over time, with each country represented as a separate colored line. The data comes from the Data Canvas - Sense Your City dataset, displayed as an SVG using D3 v5. The visualization uses d3.nest to group data by country, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for smooth paths. A color legend lists all countries alongside the chart.

Apr 21, 2020
Loading thumbnail…

SCM QN v1

This visualization displays a parallel coordinates plot of supply chain quality notifications (SCM QN) from pipe-delimited text data, showing categorical dimensions like notification origin, priority, and damage group. The D3 v3 code uses d3.svg.axis and d3.scale.ordinal for axes, with d3.dsv parsing the data and truncating values to 20 characters. A foreground path layer renders the multi-dimensional lines, while CSS styling controls axis rotation and label formatting. The visualization was adapted from Curran Kelleher’s "World Countries Hierarchy" block.

Apr 15, 2020
Loading thumbnail…

SCM Quality Notification

This example displays a parallel coordinates plot of subsea control module quality notifications. It shows how multiple categorical attributes—including notification origin, priority, type, and various defect descriptors—relate across dozens of recorded issues. The visualization uses D3 v3’s `d3.svg.axis`, ordinal and linear scales, and a line generator to render each data record as a polyline. Data is loaded from a pipe-delimited text file via `d3.dsv` and rendered as SVG with interactive brushable axes.

Apr 8, 2020
Loading thumbnail…

Tree3

Tree3 is an animated, interactive SVG tree diagram that visualizes a hierarchical dataset of failure causes and priorities, rooted at the "SCM QN" node. Built with the D3.js library (version 3.5.17), it uses `d3.layout.tree` and `d3.svg.diagonal` to render nodes and links from a CSV file. Users can click nodes to collapse or expand branches, triggering smooth transitions via `transition.attr` and `transition.duration`. The visualization displays the tree horizontally, with node depth mapped to horizontal spacing and text labels positioned accordingly.

Apr 7, 2020
Loading thumbnail…

World Countries Tree

This hierarchical tree visualization displays the geographic organization of world countries, branching from continents down to sub-regions and individual nations. The data, loaded from a JSON file, is structured in a nested parent-child format. Using D3 v5 APIs, the code applies a `tree` layout and `hierarchy` function to process the data, then connects nodes with horizontal links and displays text labels. The visualization is rendered as an SVG, using the `linkHorizontal` generator to draw the tree paths.

Apr 7, 2020
Loading thumbnail…

RADIAL TREE 2

This radial tree visualization displays a hierarchical dataset from a CSV file, using a circular layout where branches extend from a central root. The visualization supports panning and zooming interaction, allowing users to explore the hierarchy. Built with D3 v4, the code uses `d3.stratify`, `d3.tree`, `d3.linkRadial`, and `d3.csv` to process and render the data as an SVG. Nodes are drawn as circles with text labels, and links are rendered as curved paths with light blue strokes. The tree is positioned within a large SVG canvas, with labels rotated to follow the radial structure.

Mar 31, 2020
Loading thumbnail…

Tree2

This interactive tree diagram visualizes a hierarchical dataset of defect categories, priorities, and related items. The graph.csv data is loaded with d3.csv, converted into a tree structure, and rendered as collapsible nodes and links using d3.layout.tree and d3.svg.diagonal. Clicking a node toggles its children, with transitions smoothly animating position changes via d3’s transition methods. The SVG output uses circle nodes and bold labels, with lightsteelblue indicating collapsed branches.

Mar 29, 2020
Loading thumbnail…

Tree

This example shows a hierarchical tree diagram built from a CSV file listing parent-child relationships between defect types and priority categories. The visualization uses D3.js’s `d3.layout.tree` and `d3.svg.diagonal` to position nodes and draw curved links, with SVG rendering for circles and labels. The data, loaded via `d3.csv`, is converted from a flat structure into a nested tree and displayed with a fixed-depth layout, where each level represents a different category of items.

Mar 28, 2020
Loading thumbnail…

Space Stations_QN

This parallel coordinates chart displays the attributes of subsea control module (SCM) notifications, with each axis representing a categorical field such as notification type, priority, origin, cause, damage description, material, and defect date. Each polyline traces a single record through the dimensions, revealing patterns and correlations across these variables. The visualization is built with D3.js (v3 and v5), using SVG for rendering and custom axes with brushes for interactive filtering. The data is loaded from a pipe-delimited text file containing 19 records of inspection and defect reports.

Mar 24, 2020
Loading thumbnail…

Melting Data for Multiple Lines

This example visualizes COVID-19 death tolls across multiple countries, plotting each country as a separate line that traces cumulative deaths over days since the first reported case. The chart uses D3 v5 with SVG rendering, employing `nest()` to group the data by country and `line()` with `curveBasis` to draw smooth paths. A draggable vertical line, implemented with D3's `drag()` function, lets users explore data at specific time points, showing the death counts for all countries at that moment. Color legends and axes are generated with `scaleOrdinal` and `axisLeft`/`axisBottom`.

Mar 24, 2020
Loading thumbnail…

RADIAL TREE

A radial tree displays a hierarchy of world countries, organized by continent and subregion, radiating outward from a central root node. The visualization uses an SVG rendering with D3 v4’s `d3.cluster` layout to position nodes, and custom bezier paths for links. Text labels are rotated and sized by depth, with a heavy white glow for readability. Panning and zooming are implemented via `d3.zoom`, while the JSON data structure defines the nested country groupings.

Mar 23, 2020
Loading thumbnail…

Space Stations

This visualization uses a parallel coordinates chart to explore patterns in mining accident data, displaying multiple dimensions such as nature of injury, classification, injury source, body part, mining equipment, occupation, and accident dates. The d3.svg.axis and d3.scale.ordinal functions render the vertical axes, while d3.svg.line draws each accident as a connected polyline. Data is loaded from a pipe-delimited text file and coerced into numbers, strings, and dates. Brushing interactions on each axis allow users to filter the displayed records interactively.

Mar 20, 2020
Loading thumbnail…

Space Stations

Space Stations visualizes orbital data for satellites through an interactive parallel coordinates plot. The D3.js visualization maps each satellite's trajectory across multiple dimensions including inclination, eccentricity, and mean motion, with brushed axes allowing users to filter data ranges. The example parses two-line element (TLE) set data from a text file into structured CSV format, then renders the multidimensional relationships using d3.svg.brush and custom SVG paths with color-coded strokes for each orbital object.

Mar 18, 2020
Loading thumbnail…

ANY JSON tree (DRAFT)

This example visualizes any JSON object as an interactive, selectable tree. It converts nested data into a hierarchical structure using a custom `hierarchify` function, then renders nodes and links with D3’s `tree` layout and `linkHorizontal` generator as SVG. The tree supports zooming via `d3.zoom` and collapsing branches on click, displaying each node’s name, type, and value. The sample data includes a person’s records from NADRA, contacts, vehicles, and travel details, with node colors derived from a sequential rainbow scale.

Mar 17, 2020