SirikanyaR

@SirikanyaR·5 public vizzes

Let's make a face with D3.js!

The visualization demonstrates a smiley face constructed from SVG primitives, with animated eyebrows that raise and lower over a four-second cycle. It shows how D3.js v5 manipulates the DOM by appending circles, rectangles, and a path formed with the `arc` generator to build the face. A chained `transition` call on the eyebrows group animates the vertical offset, first lifting then lowering the brows. The code imports `select` and `arc` from the D3 library and uses the `transition().duration()` API to create the timed motion.

Sep 26, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple face using D3.js v5 and SVG. The code creates an SVG canvas and uses a style method to set a background color, though the typo 'blackground-color' means no visible change occurs. A single empty SVG element is rendered, with no additional shapes or facial features drawn, making it a minimal starting point for a D3 visualization. The example demonstrates basic D3 selection and styling APIs within a React-friendly HTML structure.

Sep 26, 2020

Loading thumbnail…

My Cars Report

This example displays a single car record from a static JSON array, showing the first object’s make, model, year, and price as plain text. The code parses the inline `carsJSON` array using `JSON.parse` and then writes the formatted message to the page via `document.getElementById("message.element").innerHTML`. Built with React, the visualization relies solely on DOM manipulation and does not use any charting or animation libraries, presenting the data as a simple text report.

Sep 26, 2020

Loading thumbnail…

My Car Report

This example displays a pre-formatted message, “World,” in large blue text as a static React report titled “My Car Report.” It uses React 16.10 production builds via unpkg to render the text into a `<pre>` element with the id `message-element`. The data visualization is minimal, showing no charts or car data despite the title. The styling comes from a linked CSS file, setting the font size, color, and alignment directly on the body element.

Sep 19, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple list of used cars with their model years and prices, using styled HTML elements to differentiate entries. The page renders a black background with monospace text, where the first car is highlighted in yellow with red text, while the other three cars appear in pink. The visualization relies on basic HTML markup with an unordered list, alongside CSS classes (`highlighted` and `hl`) defined in an external stylesheet, demonstrating how static styling can encode categorical or attention-grabbing distinctions in a report.

Jun 8, 2020