KCharoenkwan

@KCharoenkwan·3 public vizzes

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

A smiley face built with D3.js animates its eyebrows up and down in a looping transition. The SVG face consists of circles for the eyes, rectangles for the eyebrows, and a path generated with the `arc` function for the mouth. Code uses D3 selections, `transition().duration()`, and attribute manipulation to shift the eyebrow group’s vertical position. The yellow head and black outlines are rendered directly via SVG attributes, with no external data source.

Mar 8, 2023

Loading thumbnail…

Let's make a face with D3.js!

A face constructed from animated SVG line elements demonstrates how D3.js and raw SVG markup can build playful, expressive visual compositions. The example relies on D3.js v3 to generate and animate coordinated paths, with each line styled through CSS classes and applied stroke properties. The face emerges from a set of curves, using SVG’s `<path>` elements, coordinated via a force-directed simulation, while the overall canvas is set within an `index.html` file of 960x500 pixels. The rendering happens entirely in the browser as an SVG, with the `d3` script embedded directly on the page.

Mar 3, 2023

Loading thumbnail…

Fork of HTML Cars Report

This fork of the HTML Cars Report demonstrates a minimal static data visualization of three used car listings with prices. The page uses plain HTML and CSS, applying a monospace font and a red highlighted class to emphasize the first car entry. The example shows how basic styling can differentiate data points in a simple list-based report, relying on standard CSS selectors rather than any JavaScript or charting libraries. The rendered output is limited to the structure defined in `index.html` with the visual rules from `styles.css`.

Mar 3, 2023