Morris Muriithi

@Mo-rr-is·5 public vizzes

Device1

A yellow smiley face with animated eyebrows is rendered in an SVG using D3.js v5. The face includes two eyes, a curved mouth, and rectangular eyebrows, all drawn with basic SVG shapes and manipulated via D3 selections. The eyebrows transition vertically in a repeating two-second cycle using chained `transition().duration()` calls. The code imports `select` and `arc` from D3, using `arc` to generate the mouth path, and applies transforms to position elements relative to the SVG center.

Aug 4, 2024

Loading thumbnail…

Add Axes

This example displays a bar chart of the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The chart renders as SVG via React, with D3’s `scaleBand` and `scaleLinear` mapping country names and population values. Axes are drawn manually: x-axis ticks and gridlines come from `xScale.ticks()`, while y-axis labels are positioned using the band scale’s domain and bandwidth.

Jun 18, 2024

Loading thumbnail…

Mouse Follower

This interactive SVG visualization displays a circle that continuously follows the mouse cursor across the viewport. The circle remains centered on the pointer’s position, updating in real time as the user moves the mouse. Built with React and rendered as SVG, it uses the `useState` hook to track mouse coordinates and a `handleMouseMove` callback triggered by the SVG element’s `onMouseMove` event. The circle’s `cx` and `cy` attributes are bound to these state values, with a fixed radius of 30 pixels. The visualization starts with the circle centered on the screen.

Jun 17, 2024

Loading thumbnail…

Create a face

Repeated SVG smiley faces are generated in a grid, each drawn with a yellow circular background, two black eyes, and a curved mouth. The code builds these faces using React to compose separate components, including `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth shape is rendered using `d3.arc()`, which creates a path based on specified radius and angle parameters. Each face is rendered identically without variation in appearance, placement, or styling.

Jun 17, 2024

Loading thumbnail…

Circles with D3

This example displays seven colored circles, each with distinct positions, radii, and fill colors, laid out on a light green background. The visualization uses the D3.js library within a data-driven approach, binding circle elements to an array of data objects. It demonstrates D3's method chaining and data join pattern, where the `select`, `selectAll`, `data`, and `join` methods manage the SVG creation and attribute updates, including `cx`, `cy`, `r`, and `fill`.

Jun 17, 2024