PaulCaballero

@PaulCaballero·6 public vizzes

Let's make a face with D3.js

This example creates a smiling face using D3.js within an SVG canvas, starting with a red background applied via `d3.select('svg').style('background-color', 'red')`. The face is constructed from SVG elements, with thick lines styled by the `.lines` CSS class that sets black strokes and a rounded line join, while paths within that class use a teal stroke color. The code relies on the D3 v5 library loaded from a CDN and includes an ES6 module example, though the primary drawing logic is initiated in `index.js` with a basic selection of the SVG element.

Aug 22, 2019

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, showing each car’s year, make, model, and price when priced under a given threshold. The page initially displays “Loading…” while a promise-based `getCars()` function simulates a two-second delay before resolving a hardcoded JSON array of five cars. The `generateReport()` function filters the array, maps each car through `formatCar()` to format the string, and joins them with newlines into a single report. No external libraries are used; the code relies on native JavaScript promises, array methods, and ES modules.

Aug 22, 2019

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2000, using static JSON data embedded directly in the code. It filters the inline `cars` array with `.filter()` to select qualifying vehicles, formats each entry with a template literal, and joins them with `.join('\n')` into a single message. The result is rendered into a `<pre>` element by setting `textContent` via `document.getElementById()`, with styling applied through a Google Fonts-driven CSS file.

Aug 21, 2019

Loading thumbnail…

Cars Report

The Cars Report visualizes a small dataset of used cars, displaying the make of the first vehicle in the list. It loads car data from a JSON string, parses it, and updates a text element with the result. The example uses ES6 modules for data import and plain DOM manipulation to render the message, with the page styled using CSS.

Aug 21, 2019

Loading thumbnail…

Cars Report

This example shows a simple page that displays the text “Hello VizHub!” and “Hello World” as a large message using a custom font. It uses vanilla JavaScript to parse an embedded JSON array of car data and writes a greeting into a `pre` element via the DOM API. The code imports an ES6 module for the message text, and the styling uses CSS with a Google Fonts import and a dark navy background. The visualization demonstrates basic data binding and text rendering without any charting library.

Aug 21, 2019

Loading thumbnail…

Cars Report

This example demonstrates a basic VizHub project that displays a static "Hello World" message on a page. It parses an embedded array of car objects—containing year, make, model, and price—but does not render or visualize the data. The code uses plain JavaScript and an ES6 module to import the message, with styling applied via an external Google Fonts stylesheet. The page structure relies on standard HTML and a bundled script, with the text content set through `document.getElementById`.

Aug 21, 2019