Rafiul Ahmed

@AhmedRafi09·3 public vizzes

Let's make a face with D3.js!

This example creates a smiling face from basic SVG shapes, including a red circle head, two eyes, rectangular eyebrows, and a mouth drawn with an arc path. The main visual behavior is an animated eyebrow movement, achieved by applying a two-stage D3 transition to the eyebrow group's transform attribute over four seconds. The code demonstrates fundamental D3.js v5 DOM manipulation by using the selection, append, and attr methods to build the SVG structure, while the transition method handles the animation loop.

Sep 18, 2019

Loading thumbnail…

Cars Report

This example displays a single car record from a hardcoded JSON array, showing the first object in the dataset. The visualization relies on JavaScript’s `JSON.parse` to load the car data from the `car.js` file, then uses `document.getElementById` to update the HTML element’s text content with the record. Styled with a global CSS stylesheet, the page presents the car information in large Ubuntu font against a dark blue background, offering a minimal, text-only report.

Sep 17, 2019

Loading thumbnail…

Cars Report

This example displays the text “gfgjhj” in large, centered font on a dark blue background, demonstrating a minimal setup for a single-page visualization. The page uses plain JavaScript to insert the message into an HTML `<pre>` element with a large font size, while CSS styles the body with a dark background and Ubuntu font. The code imports static JSON car data from `car.js` but does not render it, instead focusing on basic DOM manipulation and styling.

Sep 17, 2019