ElzbietaPP

@ElzbietaPP·3 public vizzes

World Countries Tree

This interactive tree diagram displays the hierarchical structure of world countries, organized by continent and subregion, with each country name rendered as a text label sized inversely to its depth. Built with D3 v5, it uses the hierarchy and tree layouts to compute node positions, and linkHorizontal to draw the curved connecting paths. The SVG visualization supports pan and zoom through d3.zoom, applying transforms to the group containing all elements. Data is loaded from an external JSON file, with styling provided by custom CSS including a serif font and text shadows.

Aug 11, 2019

Loading thumbnail…

Cars Report

This example displays a simple text report of car data, showing a formatted line for the first car in the dataset while filtering and formatting other entries without displaying them. It uses d3.v5 indirectly through the bundled JavaScript, with the car data defined as a JSON string in `cars.js`. The page renders the message via `document.getElementById().textContent` into a `<pre>` element, styled with CSS using the Ubuntu font and an orange color scheme.

Aug 7, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub integrates ES6 modules and D3 v5 into a minimal web page. It displays a large, centered "Hello VizHub!" message in an Ubuntu font against a dark blue background. The page uses `index.js` to import a message string from `myMessage.js` and applies it to a div using d3’s `select` method. Styling is handled entirely by CSS, with the body configured for centered text and a custom Google Fonts import.

Aug 7, 2019