TDissaux

@TDissaux·4 public vizzes

Hello HTML

A static smiley face rendered with React and SVG, centered on the screen. The code defines a yellow circle with black stroke, two offset eye circles, and leaves the mouth as a half-finished arc, as noted in the README. It uses ReactDOM to mount the component into the DOM, with dimensions directly from `window.innerWidth` and `window.innerHeight`. The SVG elements are positioned via a translation transform, and hardcoded constants control eye placement, radius, and stroke width.

Feb 14, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This visualization shows a simple, full-screen smiley face rendered with SVG, centered in the browser window. The face consists of a yellow circle with a black outline for the head, two black circles for eyes, and does not yet display a mouth. The code uses React to define the SVG markup, with ReactDOM rendering it into the page. Dimensions and positions are calculated from `window.innerWidth` and `window.innerHeight`, and the face is positioned using an SVG `<g>` transform.

Feb 14, 2022

Loading thumbnail…

BarChartTest

This example shows the population of countries and territories worldwide using a horizontal bar chart rendered as SVG. Each bar’s length encodes the population value, scaled linearly from zero to the maximum, while the vertical positions of bars are determined by a band scale across country names. The visualization is built entirely with D3 v5 APIs, including `scaleLinear`, `scaleBand`, `csv`, and `select`, and it draws rectangles directly via `svg.selectAll('rect')`. Data is loaded from a CSV file, with population figures multiplied by 1000 before rendering.

Jan 30, 2021

Loading thumbnail…

let's make a face I guess

A face-shaped visualization draws a single yellow circle with a black outline, centered on an SVG canvas. The example demonstrates minimal D3 setup by selecting the root SVG element and appending a circle primitive. It uses D3 v6’s `select` and `append` methods to position and style the shape via attributes like `r`, `cx`, and `cy`, with dimensions derived from the SVG’s own width and height. The accompanying CSS defines line and highlight classes, though the visible result is purely the static circle.

Jan 11, 2021