KatStam

@KatStam·7 public vizzes

World Countries Tree

This tree diagram visualizes the hierarchical structure of world countries, organized by continent and subregion. The root node is "World," which branches into continents like Asia, then into subregions such as Southern Asia, and finally into individual countries. The visualization uses D3.js v5 to parse a JSON data file and render the hierarchy with a simple horizontal link arrangement via the `linkHorizontal` generator. The SVG output displays country names as text nodes, with the entire tree laid out using D3's `tree` layout, styled with a blue link color and a serif font.

Jul 22, 2019

Loading thumbnail…

World Countries Tree

This interactive visualization displays a hierarchical tree of world countries, organized by continent and then by subregion. The data is structured in a JSON file, with each node representing a geographic entity, from continents down to individual nations. The tree uses D3.js v5 to render the data as an SVG with horizontal connecting lines, and node labels set in the Playfair Display serif font. The visualization relies on D3’s `hierarchy` and `tree` layout functions to position the nodes and generate the link paths.

Jul 21, 2019

Loading thumbnail…

Hello VizHub

This example displays a large, centered “Hello VizHub!” message in blue against a dark navy background. The page uses D3 v5’s `select` method to set the text content of a `div` with the ID `message`. The message string is imported from a separate ES6 module (`myMessage.js`). Styling is handled by external CSS that imports the Ubuntu font from Google Fonts and applies a 12em font size. The visualization demonstrates basic D3 DOM manipulation without any data or complex rendering.

Jul 21, 2019

Loading thumbnail…

Testing the capability of VizHub!

This example demonstrates VizHub’s ability to render a simple interactive web page with D3.js and ES6 modules. It displays a static “Hello World of VizHub!” message and a pre-formatted text block against a styled dark background. The code imports `select` from D3 v5 to set the message text, and uses a local `myMessage.js` module to supply the string. The page’s layout and typography are defined in an external CSS file with the Ubuntu font. No dynamic data or user interaction occurs.

Jul 21, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js visualization that displays a greeting message in large, centered text on a dark blue background. It renders the phrase "Hello VizHub!" using D3’s `select` method to set the text content of an HTML division. The code imports a local ES6 module for the message, loads D3 v5 from a CDN, and applies styling with an external stylesheet. The visualization highlights basic module imports, DOM selection, and themed typography.

Jul 20, 2019

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of population data for the top 10 most populous countries, with horizontal bars and labeled axes. The visualization uses D3 v5 to load and scale the dataset, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The code imports specific D3 modules via ES6 syntax, uses `axisLeft` and `axisBottom` for ticks, and formats numbers with `format('.3s')`. It also removes default axis domains and tick lines for a cleaner presentation.

Jul 11, 2019

Loading thumbnail…

Make a face!

A yellow smiley face is drawn on a black-outlined circle, with animated eyebrows that move up and down and two static eyes and a mouth. The face is constructed using SVG shapes via D3 v5, with the mouth created using the `arc` generator. Eyebrow animation is driven by chained `transition` calls that alternate their vertical position. The code imports `select` and `arc` directly from D3 and builds the scene in an SVG container.

Jul 11, 2019