iXilef

@iXilef·3 public vizzes

Lets make a face with D3

This example demonstrates how to build a simple cartoon face using D3 version 6’s selection and shape APIs. The SVG output shows a yellow circle for the head, two eyes, eyebrows as rectangles, and a mouth drawn with the `d3.arc` shape generator. The code uses `select` and `attr` to position elements relative to the SVG center, while the arc’s inner and outer radii define the smile. No external data is loaded; all shapes are hardcoded in JavaScript.

Mar 29, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a car report generated from a JavaScript array of car objects, filtering and formatting entries to display those priced under $2,000. The code uses native JavaScript features like `JSON.parse`, array filtering with `filter`, and `map` to transform data, along with modular exports and imports. It simulates an asynchronous data fetch using a `Promise` with a `setTimeout` delay. The output is rendered into an HTML `<pre>` element, with a "Loading..." message shown initially before the report appears. The visualization relies on standard JavaScript object manipulation and DOM text selection via `document.getElementById`.

Mar 29, 2021

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript data-processing pipeline that reads a car inventory from an embedded JSON array, filters the cars by price, and formats the results into a text report. The interface shows a clear output panel, initially displaying a loading message. The code uses a custom `getCars` function, which simulates an asynchronous API call with a two-second delay, and a `generateReport` module that filters and maps car objects. The final formatted list is rendered into the HTML page using the `textContent` property of a designated `<pre>` element.

Mar 29, 2021