justvizzin

@justvizzin·6 public vizzes

Map

This example displays a static map image of Ukraine with a title overlay, sourced from the Institute for the Study of War’s analysis of the conflict. The page uses plain HTML and CSS to center the content and size the image, with no interactive JavaScript or data visualization libraries. It demonstrates a minimal React-compatible structure, relying on a simple `<img>` tag and inline styles rather than any framework-specific rendering or mapping APIs.

May 12, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a full-page “Hello HTML!” message in large, centered text. It demonstrates a minimal HTML page that uses embedded CSS to style a single `div` element, with the font size set to 13em. The page relies on plain HTML and CSS only, with no external libraries or JavaScript logic. The rendering approach is a static, unstyled document that shows how basic markup and styling can produce a simple visual output without any data or interactive behavior.

May 5, 2022

Loading thumbnail…

Fork of Multicolored Clock

A multicolored clock displays the current time as nested, animated SVG arcs, each ring representing seconds, minutes, hours, day, date, and month. The outermost arc shows the author’s name and a full circle. The visualization updates every second with d3.transition and an elastic easing, while the arc paths are interpolated using attrTween. It uses d3.time.format for time labels, d3.svg.arc for ring geometry, and a linear color scale interpolating between HSL hues.

May 5, 2022

Loading thumbnail…

Fork of HTML Starter

This example displays a stylized cartoon face composed of SVG shapes, featuring a yellow circular background, two black eyes, and a mouth drawn as an arc. It uses React components to structure the face, including `BackgroundCircle`, `Eyes`, and `FaceContainer`, which center the graphic within an SVG canvas. The mouth is generated with the D3 `arc()` generator, and the project loads D3 v7, React 18, and ReactDOM from CDN.

May 5, 2022

Loading thumbnail…

Fork of Pie Chart

This example displays a pie chart of 2022 U.S. auto sales by brand, with each slice colored gold and accompanied by a legend showing the brand name, its percentage of total sales, and its sales volume in thousands. The code loads CSV data from a GitHub gist using `d3.csv`, computes the pie layout with `d3.pie`, and draws arcs with `d3.arc`. Legends are rendered using SVG elements, with colors assigned via `d3.scaleOrdinal` and numeric formatting via `d3.format`.

May 3, 2022

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js setup where a single text element is rendered into the DOM. It loads D3 v5 from UNPKG and uses the `d3.select` method to set the text content of an HTML div to a static string. The code also shows how to import local ES6 modules and external libraries, with styling handled by a separate CSS file.

Apr 24, 2022