cansukcr

@cansukcr·5 public vizzes

World Countries Tree

This visualization shows the hierarchical structure of world countries organized by continent and subregion. It renders a horizontal tree layout using D3’s `tree()` and `hierarchy()` functions, with countries positioned as leaf nodes. Links are drawn as curved paths via `linkHorizontal()`, while node labels use varying font sizes based on depth. The entire visualization is placed inside a zoomable group, allowing users to pan and scale through the `d3.zoom()` API. Data comes from a local `data.json` file, and the SVG output is styled with custom CSS, including a serif font and green link strokes.

Feb 21, 2020

Loading thumbnail…

World Countries Tree

A hierarchical tree visualization displays the world’s countries, organized by continent and subregion, using a left-to-right layout with curved links. The D3 tree layout computes node positions, while linkHorizontal generates the paths and text elements label each country. Pan and zoom are enabled via d3.zoom, and the SVG scales to the full viewport. Data comes from a static JSON file with a nested structure, and typography uses the Playfair Display font.

Feb 21, 2020

Loading thumbnail…

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by region and subregion, using a left-to-right layout where each node is labeled with its region or country name. The tree is rendered as SVG with horizontal curved links, and labels scale in font size based on depth, from large root text to smaller country names. Built with D3 v5, it uses the `tree` and `hierarchy` layouts, `linkHorizontal` for path generation, and a `zoom` behavior for panning and scaling the view. Data comes from a local `data.json` file.

Feb 21, 2020

Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries, organized by geographic regions, with each country rendered as a text label positioned along branching paths. The tree layout uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal draws the connecting links as smooth curves. The view supports pan and zoom through d3.zoom, with font sizes scaling relative to node depth. Data comes from a local JSON file, and text elements are styled using the Playfair Display font with a white shadow for legibility. The SVG rendering approach keeps the visualization scalable and interactive.

Feb 21, 2020

Loading thumbnail…

React Starter

This example displays a large, centered "Hello React!" message on a plain web page. The code imports React and ReactDOM, defining a simple App component that renders the message within a div styled with CSS. It mounts the component to the page's root element using `ReactDOM.render`, and the page loads React and ReactDOM from the unpkg CDN before executing the bundled JavaScript. The visual output is a static text display, with no data source or interaction involved.

Feb 21, 2020