Donisius Wigie

@Donisius·3 public vizzes

Let's make a face with D3.js!

This example uses D3.js to draw a cartoon face on an SVG canvas. The face consists of a yellow circle for the head, two dark circles for eyes, and a semi-circular path for the mouth, all positioned with D3’s `select` and `append` methods. The `arc()` API generates the mouth’s curved shape, while `attr` calls set dimensions and styles. The code imports functions from the D3 v5 library and works with an SVG element sized at 960 by 500 pixels.

Oct 6, 2019

Loading thumbnail…

HTML Cars Report

This example displays a minimal HTML-based cars report, using a title heading while a message from an external module populates a separate div. The page leverages D3.js’s `select` method to update text content, with styling handled through CSS that imports the Ubuntu font and applies a dark blue background. The visualization demonstrates VizingHub's integration of ES6 modules, local imports, and D3’s DOM manipulation capabilities through the provided files.

Oct 5, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based car report generator that filters and formats car listings by price. The application transforms raw JSON data into a readable summary using the `filter`, `map`, and `join` array methods within the `generateReport` function. The `formatCar` module constructs formatted strings from car objects, while the browser displays the final output in a styled `pre` element. The data is hardcoded in the `cars` module as JSON, and the rendering relies on plain JavaScript DOM manipulation to update the page content.

Oct 5, 2019