wachji2001

@wachji2001·4 public vizzes

HTML scalelinear

This example demonstrates a data visualization of country populations using a simple HTML5 SVG canvas. The code loads population data from a CSV file and uses D3's `csv` function to parse it. The visualization applies D3's `scaleLinear` to map population values, drawing a single purple rectangle as the primary graphic element. The implementation utilizes the D3 v6 library within a React framework, rendering the output as scalable vector graphics with a minimalist design approach—the page centers only one colored rectangle without additional axes, labels, or complex chart structures.

Sep 16, 2020

Loading thumbnail…

Bowl of Fruit - Animated Transitions

Five circles representing apples and lemons animate in a bowl-like row using SVG. Entering circles grow from radius zero, exiting circles shrink to zero, and existing circles transition their position, size, and color via d3-transition. The example demonstrates key-based data joins and ordinal color and radius scales in d3 v5.

Sep 7, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal setup for creating SVG visualizations with D3.js within a React project. It renders a single yellow circle centered horizontally on a 600 by 600 pixel canvas, using d3.select to manipulate the SVG element and its attributes. The code parses a string value from a JavaScript object into a number, though this parsed value is not used in the visualization. The circle’s radius and vertical position are fixed, while the horizontal coordinate is calculated from the SVG’s width attribute using unary plus for type conversion.

Sep 3, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page at a massive font size, with a matching console message. It serves as a minimal starting point for web-based projects, using plain HTML with a linked CSS file (`body.css`) to style the body element. The page also includes a small inline script that logs “Hello JavaScript!” to the browser’s developer tools, demonstrating basic integration of markup, styling, and scripting in a single document. No external libraries are used.

Jul 13, 2020