Skip to main content
Log in
S

Siva Srinivasa Reddy Yakkanti

@SivaSrinivas07·7 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

A yellow smiley face drawn with SVG circles, lines, and a quadratic path renders in a 500×500 viewport, with its eyebrows, mouth, nose, and face color all animating independently. The D3.js v5 code selects the root `svg` element and appends shapes directly, then uses chained `transition()` calls to move eyebrows and nose, remap the mouth path, blink eyes via radius changes, and cycle face fill colors through a fixed palette. A recursive `on('end')` callback drives each looping animation, with eye blinks triggered by `setTimeout` for irregular timing.

Feb 12, 2025
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example shows a smiley face with animated eyebrows, built entirely with D3.js v5 in a React component. The face is rendered on an HTML5 Canvas using the Canvas 2D API, with `ctx.arc` drawing the head and `ctx.fillRect` creating random sprinkles. The code demonstrates fundamental DOM and canvas manipulation, using React’s `useEffect` hook to execute drawing logic once on mount. No data source is used; it relies purely on hardcoded shape positions and random color generation for decoration. The result is a playful static illustration of basic graphics programming.

Feb 12, 2025
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a smiley face drawn with SVG primitives in D3.js v5, featuring a randomly colored face, fixed eyes, and a curved mouth. It demonstrates fundamental DOM manipulation by appending circles and a path directly to an SVG container. A button triggers a color change, using `transition().duration(500).attr('fill', ...)` to animate the face’s fill to a new random HSL value generated by `getRandomColor()`. The code relies on D3’s selection and transition APIs without any external data source.

Feb 12, 2025
Loading thumbnail…

Sun Flower

This example draws a simple, two-dimensional side-view car using the D3.js library's selection and SVG creation methods. The car is assembled from individual vector shapes, including blue rectangles for the body and roof, light blue rectangles for three windows, and black circles for the wheels with gray hubcaps. The code specifies hard-coded coordinates and dimensions for each element, defining the entire illustration from scratch using D3's `select`, `append`, and `attr` APIs to generate an SVG container. The final graphic is a static, non-interactive illustration rendered entirely through SVG elements.

Feb 12, 2025
Loading thumbnail…

Sun Flower

A sun flower of colored circles blooms on a pale green background as each circle expands from a point to its full radius in sequence. The animation uses D3 transitions with varying durations and easing functions, where entering circles grow slowly over two seconds with staggered delays, while updates reposition quickly. The code defines six circles with fixed coordinates and applies a semi-transparent fill using `transition.attr` and `easeLinear`. The example demonstrates D3’s data join with enter, update, and exit selections.

Feb 12, 2025
Loading thumbnail…

Sun Flower

A sun flower of colored circles blooms on a pale green background as each circle expands from a point to its full radius in sequence. The animation uses D3 transitions with varying durations and easing functions, where entering circles grow slowly over two seconds with staggered delays, while updates reposition quickly. The code defines six circles with fixed coordinates and applies a semi-transparent fill using `transition.attr` and `easeLinear`. The example demonstrates D3’s data join with enter, update, and exit selections.

Feb 12, 2025
Loading thumbnail…

Sun Flower

This example demonstrates the VizHub V3 runtime environment’s “Hello World” template, showing a single line of text whose font size is controlled by an interactive widget. Users can Alt-drag the numeric value in the code editor to continuously adjust the rendered text size in real time. The code exports a `main` function that receives a container DIV and sets its inner HTML with an inline style, relying on hot reloading to update the visualization without a page refresh.

Feb 12, 2025