davmaz

@davmaz·8 public vizzes

React Starter

This example renders a hierarchical tree diagram as an interactive SVG visualization. Built with React and D3.js, the code uses the `hierarchy()` and `tree()` functions to process a JSON data structure, preparing it for layout before the `linkVertical()` path generator draws the connecting lines between nodes. The visualization displays the tree’s nodes as text labels, with font size varying by depth, and uses the `select()` API to append paths and text elements to the canvas. Data is fetched asynchronously from a local JSON file served in a public directory.

Nov 5, 2020

Loading thumbnail…

Rendering Data with React & D3

A radial burst of 148 colored arcs visualizes CSS named colors. The SVG rendering is generated by React, which loads data using D3's `csv` utility. D3's `pie` and `arc` functions compute each arc's geometry based on the dataset, mapping the `RGB hex value` field to the `fill` attribute. The application uses React's state and effects to fetch and display the data asynchronously.

Oct 29, 2020

Loading thumbnail…

Rendering Data with React & D3

Oct 29, 2020

Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries organized by continent and subregion, with nodes labeled by country name and connected by curved links. The visualization uses the D3 v5 `tree` layout and `hierarchy` to structure the JSON data, while `linkHorizontal` generates the paths between parent and child nodes. Panning and zooming are enabled through the D3 `zoom` behavior. Labels scale in font size based on their depth in the hierarchy, and the entire graphic is rendered as SVG with a fixed, full-screen viewport.

Oct 28, 2020

Loading thumbnail…

Polished World Map

This example presents a polished world map using the Natural Earth projection, depicting country boundaries and graticules. The visualization loads World Atlas TopoJSON data, converting it to GeoJSON with `topojson.feature` and `topojson.mesh`. It renders the sphere, graticules, land areas, and interior borders as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`. The React component structure manages data loading with `useData` and renders marks with `Marks.js`, while CSS styling applies a teal color scheme for a refined cartographic look.

Oct 28, 2020

Loading thumbnail…

Pathetic Bar Chart

This example renders the top 10 most populous countries as a minimalist bar chart with no axes, using React to manage state and render SVG rectangles. The code loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, then orders the dataset to the first ten entries. With `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar widths, each country’s 2020 population is visualized as a gray rectangle. The chart intentionally lacks labels, ticks, or gridlines, presenting raw data without visual scaffolding.

Oct 28, 2020

Loading thumbnail…

Hello World

This example renders a simple smiley face using SVG circles, with three smaller circles for eyes and a mouth arranged on a larger orange face. The visualization demonstrates static SVG markup directly embedded in HTML, while also including a React component that tracks button click counts through state updates. The page imports React via a CDN and logs the React object to the console, but the interactive counter and the SVG graphic are not connected in the displayed output.

Sep 15, 2020

Loading thumbnail…

Hello HTML

This example displays a single empty SVG element inside a bare-bones HTML page. It uses no external libraries or data, relying solely on the native SVG tag within an HTML document structure. The rendering approach is visible as inline SVG, though no visual content is drawn. The code demonstrates the minimal foundation for embedding SVG in HTML, with the page title “Hello HTML” as the only text shown.

Sep 9, 2020