EoinMGB

@EoinMGB·4 public vizzes

Linked Force Layout & Icicle Diagram

This example combines a force-directed network graph with an icicle diagram to visualize hierarchical data, where clicking a node in the force layout highlights the corresponding partition in the icicle chart and vice versa. The visualization uses d3.v3 with a d3.layout.force for the network and d3.layout.partition for the icicle, rendering both in SVG with smooth transitions and tooltips. Data is loaded from external JSON files ("icicles.json" and "nodes.json"), and the interactive brushing effect synchronizes the two views by updating color and node size.

Aug 29, 2017

Loading thumbnail…

Icicle & Force Layout

The visualization combines an icicle chart with a force-directed node-link diagram, both driven by the same hierarchical dataset of loan categories. The icicle chart, rendered with SVG rectangles via `d3.layout.partition`, allows click-to-zoom into any non-"end" node, updating the visible rectangles and highlighting the selected path in orange. Simultaneously, a separate force simulation using `d3.forceSimulation` and `d3.forceLink` displays the hierarchy as a connected network of colored circles, with nodes colored by group and linked by edges; clicking a rectangle also recolors the corresponding node in the network. The data comes from `icicles.json` and `nodes.json`, and the example uses D3 v3 for the partition layout and D3 v4 for the force layout.

Apr 14, 2017

Loading thumbnail…

Icicle & Force Layout

This example combines an icicle layout with a force-directed graph to visualize hierarchical data. The icicle chart, built with D3 v3, encodes a JSON hierarchy as nested rectangles, where each segment’s size and color represent the value and category of data, and clicking a rectangle zooms the view to that node's subtree. A linked force-directed network in D3 v4 shows relationships between nodes, with node colors and link widths conveying group and connection strength. The hybrid view uses two D3 versions in a single page, with an animated partition layout on the left and an interactive force-directed diagram on the right.

Jan 8, 2017

Loading thumbnail…

Irish Property Market- Under Development

This proof-of-concept dashboard visualizes the number and price variance of Irish property listings across counties. A grid of small multiples (one per county) displays area charts of property counts across price bands, while a map of Ireland uses color intensity to show each county’s total property count. Interactive controls let users sort charts alphabetically or numerically and toggle province visibility. Built with D3 v3, it uses SVG for rendering and includes animated transitions when reordering or filtering data, based on scraped dummy data in a JSON file.

Nov 29, 2016