kevin0903

@kevin0903·5 public vizzes

Let's make a face with D3.js!

This example draws a simple smiling face using SVG shapes. It uses D3.js to create a yellow circle for the head and two black circles for the eyes, all with hard-coded positions. The code selects the existing SVG element, calculates width and height from its attributes, and appends circles using selections and the `circle` element API from D3 v5.

Oct 11, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates SVG shapes styled with CSS, illustrating how grouping and transform attributes organize and position circles, rectangles, and paths. The visualization uses inline SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes like `fill`, `stroke`, and `stroke-width` controlling appearance. CSS classes in the stylesheet define properties for the line graph, including color and stroke-linejoin. The rendering is purely client-side SVG, with no external JavaScript libraries. The layout applies a scale transform to the entire graphic and a translate transform to center the line elements.

Oct 10, 2019

Loading thumbnail…

Cars Report

This example renders a simple text report about cars from a static JSON array imported via an ES6 module. It displays the make of the first car in large, styled text using the Ubuntu font from Google Fonts, with dark blue page background and light text color. The code defines a `formatCar` function to convert a car object into a readable string, and it filters, maps, and joins the data, though only the first car’s make is ultimately shown in the `message-element` `<pre>` tag. It uses plain JavaScript array methods and DOM manipulation via `document.getElementById`.

Oct 10, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup that renders a single text message on a webpage. It shows how to structure a basic VizHub project with separate files for markup, styling, and JavaScript logic. The code uses D3’s `select` function to target a div element and update its content with a string imported from a local ES6 module. The page is styled with a dark background and large Ubuntu font, and it loads D3 version 5.9.1 from a CDN.

Oct 10, 2019

Loading thumbnail…

Cars Report

This example displays a simple text-based report of used cars. It initially shows a “Loading…” message, then after a two-second delay, it presents a list of formatted car entries, filtering out any car priced below $100. The visualization demonstrates asynchronous data fetching with a Promise and ES6 modules, using `getCars()` to retrieve JSON data and `formatCar` to turn each car object into a readable string. The report is rendered directly into a `<pre>` element, styled with CSS.

Oct 10, 2019