Joe M

@caddyjoe77·8 public vizzes

Tree layout

This example uses D3.js version 4 to render a hierarchical tree layout from CSV data. The visualization shows nodes connected by curved paths, where node labels display different data fields depending on their depth level. The tree uses `d3.tree()` to compute positions and `d3.hierarchy()` to structure the nested data. A React version is included, and an alternative HTML file demonstrates dynamic resizing with the `clientWidth` and `clientHeight` properties.

Apr 11, 2020

Loading thumbnail…

Dynamic Size Example

This example demonstrates a responsive SVG visualization that adapts to the browser window’s size. It uses D3 v4 to generate an SVG element whose width and height are dynamically recalculated via `clientWidth` and `clientHeight`, then draws two crossed lines to visually confirm the dimensions. The redraw function is triggered once on initialization and again whenever the window resizes, using `d3.select` and SVG line attributes to update the graphic in real time.

Apr 10, 2020

Loading thumbnail…

Films Example Data

This example visualizes a dataset of films using a hierarchical tree layout. It nests films by year and genre, then renders the hierarchy as a node-link diagram in SVG, with circles for nodes and curved paths for links. The code uses d3.nest to group data, d3.hierarchy and d3.tree to compute the layout, and custom link path generation for the curves. The data comes from a CSV file with film titles, genres, years, and other attributes.

Mar 6, 2020

Loading thumbnail…

Tree layout

This example uses the D3 tree layout to display hierarchical data from a CSV file. The visualization shows a hierarchy of film records, grouped by genre and lead studio, as a node-link diagram with curved paths connecting parent and child nodes. The code uses `d3.tree`, `d3.hierarchy`, and `d3.nest` to structure the data, and renders the result as SVG with circles for nodes and labels for names at specific depths. The layout is sized to 900 by 600 units within an SVG canvas.

Feb 27, 2020

Loading thumbnail…

something different Movie example

This example shows a hierarchical tree visualization of scraping configurations, grouped by machine and then by name, with leaf nodes containing URL templates and xPath values. The tree layout uses `d3.layout.tree` with a custom `children` accessor that maps `d.values`, and `d3.svg.diagonal` for the curved link paths. Data is loaded from a CSV file and restructured with `d3.nest` and `rollup` to build the nested hierarchy. Interactive nodes are rendered as SVG circles and text labels, with the visualization sized at 2000 pixels wide inside an SVG canvas.

Feb 27, 2020

Loading thumbnail…

Data Tree

This data visualization shows a hierarchical tree of world regions and countries, with text labels sized according to depth in the hierarchy. The visualization uses D3 v5’s `tree` layout and `linkHorizontal` generator to render the branching structure as SVG paths, while `zoom` enables panning and scaling. Data comes from a static JSON file, and the graph is built within a React framework.

Feb 26, 2020

Loading thumbnail…

Radial Tree of Countries Hierarchy

This visualization presents a radial tree of countries organized by continent and subregion, with the hierarchy derived from JSON data. The layout uses `d3.cluster` to position nodes in a circular arrangement, with curved links drawn as SVG paths. Text labels display each country or region name, with font sizes scaled by depth using `d3.scaleSqrt`. Panning and zooming are implemented through `d3.zoom`, which applies transformations to the SVG group containing all elements. The design adapts Curran Kelleher’s original block, rendering all content as SVG elements within a fixed viewport.

Feb 26, 2020

Loading thumbnail…

Hierarchy examples

This radial tree visualization displays a hierarchical view of world countries, organized by continent and subregion. It features panning and zooming interactions for exploring the nested structure. The code uses D3 v4’s `tree()` layout to compute node positions, `linkHorizontal()` for curved paths, and `zoom()` for interactive navigation. Data comes from a JSON file containing country groupings, rendered with SVG elements such as paths and text labels.

Feb 21, 2020