RidaHwn

@RidaHwn·3 public vizzes

Fork of D3 Starter

This example demonstrates a minimal D3 v7 bar chart, displaying a static dataset of five values as vertical rectangles. The visualization shows how to bind data to SVG elements and map data values to visual properties. The chart is rendered in an SVG container using D3's selection, data-join, and attribute methods, including `selectAll`, `data`, `enter`, `append`, and `attr`. The code also sets the page text to "Hello D3 version 7" via the `select` function, while the chart dimensions and padding are defined as constants.

Aug 1, 2022

Loading thumbnail…

D3.js

This example demonstrates a bare-bones D3.js setup within an HTML page, featuring a large centered message that displays the result of logging the D3 library object to the browser console. The page uses a CSS class to style the text at a 13-em font size and imports D3 version 7 via a CDN script tag. The code explicitly calls `console.log(d3)` inside a div element, showing how the library is loaded and made accessible for further interactive visualizations.

Jul 21, 2022

Loading thumbnail…

Smiley Face Part I

This example shows a circular face rendered as a yellow SVG circle with a black stroke, centered on a 960×500 canvas. The code uses React 18 to define a functional component that outputs an SVG `<circle>` element, with dimensions calculated from the viewport’s center and half the stroke width. ReactDOM renders this component into the `#root` div, resulting in a simple smiley-face base without features. The rendering uses React’s JSX syntax and SVG primitives, with no additional data or interaction.

Jul 20, 2022