Skip to main content
Log in
H

henry1987

@henry1987·16 public vizzes

Loading thumbnail…

World Countries Hierarchy

This radial dendrogram visualizes the hierarchical structure of world countries, organized by continent and subregion. The visualization uses a circular tree layout, with the world at the center and branches extending outward to represent geographic groupings. Country names appear as leaf nodes, with text rotated to follow the radial lines. The code implements this using D3.js v5 APIs, including `d3.cluster` for the tree layout, `d3.linkRadial` for path generation, and `d3.hierarchy` for processing the nested JSON data.

Sep 2, 2019
Loading thumbnail…

Dishes Map for Chinese Cuisines

A dishes map for Chinese cuisines displays a matrix of dishes as a heatmap, where cell color encodes dish category and opacity encodes similarity strength. Users can reorder the matrix by name, count, stars, sentiment, or group, triggering animated transitions that smoothly rearrange rows and columns. Built with D3 v5, the visualization uses `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `transition().duration()` to orchestrate the 2-second tweening effect, while SVG rectangles and text labels form the interactive grid.

Sep 2, 2019
Loading thumbnail…

Dishes Map

This interactive matrix diagram visualizes relationships between dishes, with colored cells indicating connection strength and hue representing dish group. Users can reorder the matrix by name, count, or group using dropdown controls, triggering animated transitions via `d3.transition()` and `matrixScale.domain()`. The visualization uses D3 v5 with `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for rendering SVG rectangles with opacity mapping link values. Hover interactions highlight row and column labels, while a tooltip displays details.

Aug 31, 2019
Loading thumbnail…

Matrix Diagram

This matrix diagram displays the relationships between 49 nodes, with colored cells indicating connection strength. The visualization uses d3.scaleBand for positioning, d3.scaleOrdinal with schemeCategory10 for coloring, and d3.scaleLinear for opacity. The SVG rendering includes interactive sorting by name, count, or group, with animated transitions using transition.attr and delayed updates. Hovering highlights corresponding row and column labels. Data comes from a JSON structure containing links with numeric values, rendered as a symmetric matrix where cell opacity encodes edge weight.

Aug 29, 2019
Loading thumbnail…

Co-ocurrence matrix

This visualization displays a co-occurrence matrix of academic disciplines, where each cell represents the strength of association between two fields, with color indicating group membership and opacity reflecting link value. Users can reorder the matrix by name, count, or group using a dropdown, triggering animated transitions via `d3.transition()`. The code employs `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.scaleSqrt` for layout and styling, while hover interactions highlight corresponding row and column labels using `d3.selectAll`. Data is loaded from a JSON file with `d3.json`.

Aug 8, 2019
Loading thumbnail…

Co-ocurrence matrix

This visualization displays a co-occurrence matrix of academic disciplines, where each cell represents the strength of association between two fields, with color indicating group membership and opacity reflecting link value. Users can reorder the matrix by name, count, or group using a dropdown, triggering animated transitions via `d3.transition()`. The code employs `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.scaleSqrt` for layout and styling, while hover interactions highlight corresponding row and column labels using `d3.selectAll`. Data is loaded from a JSON file with `d3.json`.

Aug 7, 2019
Loading thumbnail…

World Countries Hierarchy

This visualization displays a hierarchical tree of world countries, organized by continent and subregion, using a radial dendrogram layout. The D3.js code loads a JSON dataset and applies `d3.cluster()` and `d3.linkRadial()` to position nodes and draw curved links. Country names are rendered as rotated text labels, with font sizes scaled by tree depth via `d3.scaleSqrt()`. The visualization includes zoom and pan functionality through `d3.zoom()`, with styling applied via custom CSS for path strokes and text shadows. The rendering uses SVG elements within a fixed full-screen viewport.

Aug 6, 2019
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the General Update Pattern and its special cases using D3 v5 with SVG rendering. It shows a bowl of fruit represented as circles with labels, where apples and lemons are distinguished by color and size through ordinal scales. The code uses `selection.merge()` to handle enter and update selections together, while append operations occur only on enter, and exit selections are explicitly removed. Dynamic alignment of circle and text elements within grouped `<g>` elements illustrates nested data binding with the `data()` method.

Jul 16, 2019
Loading thumbnail…

Color and Size Legends

Four ordinary categorical color swatches form a simple legend for fruit types. Each circle is rendered with a distinct fill from an ordinal color scale, and its label appears below it. The example demonstrates how to build a reusable legend component by binding the color scale’s domain to SVG circles and text elements. It uses D3’s `select`, `scaleOrdinal`, and the custom `colorLegend` function to position groups horizontally and update them reactively.

Jul 16, 2019
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations. The color legend maps a categorical color scale to labeled circles, while the size legend uses a square-root scale to vary circle radii across numeric ticks. Both legends are implemented as custom D3 functions (`colorLegend` and `sizeLegend`) that append SVG groups with circles and text. The code uses `d3.scaleOrdinal` and `d3.scaleSqrt` to define the scales, and the rendering is done with SVG elements on a 960×500 canvas.

Jul 16, 2019
Loading thumbnail…

Auto MPG Summary

This visualization displays a summary of an automobile dataset. It shows the total number of rows, the number of columns, the dataset size in kilobytes, and a preview of the first ten rows as formatted JSON. The program fetches data from a CSV file hosted on VizHub, sourced from the UCI Machine Learning Repository’s Auto MPG dataset. It uses the D3.js `select`, `csv`, `csvFormat`, and `append` APIs to render the information in styled `pre` elements on a black background.

Jul 16, 2019
Loading thumbnail…

World Countries Tree

This visualization shows a hierarchical tree of world countries, organized by continent and subregion, with the country names displayed as text labels. The tree layout uses `d3.tree` and `d3.hierarchy` to position nodes, while `d3.linkHorizontal` generates curved paths for the connections. The SVG rendering includes zoom functionality via `d3.zoom`, allowing interactive pan and scale. Data is loaded from a JSON file containing geographical groupings, and text styling uses the Playfair Display font with font sizes that decrease with node depth.

Jul 16, 2019
Loading thumbnail…

World Countries Tree

This visualization presents the hierarchical structure of world countries organized by continent and subregion, rendered as a radial tree. Each country appears as a text label positioned along circular branches, with curved links connecting parent regions to their children. The code uses d3.tree, d3.hierarchy, and d3.linkRadial to compute layout, while d3.zoom enables interactive panning and zooming. Labels scale in font size based on depth, and the data comes from the provided data.json file with SVG rendering.

Jul 14, 2019
Loading thumbnail…

Cars Report

This example renders a large, centered “Hello Cars Report!” message in bright white text against a dark navy background, using the imported `message` variable from the local `myMessage.js` module. The page relies on D3 v5’s `select` API to target the `#message` div and update its text content, while the styling applies the Ubuntu font family, a 12em font size, and a CSS grid-free layout. The code imports from the `d3` package and demonstrates modular ES6 imports, though it includes no underlying data or interactive visualization beyond static text display.

Jul 14, 2019
Loading thumbnail…

Cars Report

This example displays a large, colorful “Hello VizHub!” message centered on a dark blue background using the Ubuntu font. It demonstrates basic D3.js v5 and ES6 module usage within a VizHub project. The page structure is defined in `index.html`, with styling applied via `styles.css` and the main logic in `index.js`, which imports the message from `myMessage.js`. The visualization relies on standard DOM manipulation and CSS styling rather than any D3-specific data rendering.

Jul 14, 2019
Loading thumbnail…

World Countries Tree

This visualization shows a hierarchical tree of world countries, organized by continent and subregion, with the country names displayed as text labels. The tree layout uses `d3.tree` and `d3.hierarchy` to position nodes, while `d3.linkHorizontal` generates curved paths for the connections. The SVG rendering includes zoom functionality via `d3.zoom`, allowing interactive pan and scale. Data is loaded from a JSON file containing geographical groupings, and text styling uses the Playfair Display font with font sizes that decrease with node depth.

Jul 13, 2019