jlsabo

@jlsabo·3 public vizzes

Let's make a face!

This example visualizes 13 days of data with a bar chart showing trends over time, using a date-based y-axis and a numeric x-axis. The bars are rendered as SVG rectangles filled with steelblue, driven by the `data.csv` file containing date, actual, and trend columns. The code builds the chart with d3.v6, React, and the `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs, while `select` and `csv` handle DOM selection and data loading. The chart includes axes and margins, but the focus is on the clean, minimal bar representation.

Oct 22, 2020

Loading thumbnail…

Let's make a face!

A smiling face is drawn in an SVG, using simple geometric shapes for the eyes and mouth. The code imports `select` and `arc` from D3 v6 to append a yellow circle for the head, black circles for the eyes, and a path for the mouth. The mouth is created with the `arc` function, using inner and outer radii and specified angles to form a curve. The rendering is done through SVG elements, with the entire face centered via a translation based on the viewport size.

Oct 21, 2020

Loading thumbnail…

Cars Report

This example presents a text-based vehicle report that lists recently available cars, filtering out any listing priced at or above the maximum threshold. The application starts by showing a “loading...” message before it asynchronously retrieves a small, hard-coded JSON dataset of car makes, models, years, and prices via a custom Promise. Once fetched, the data is processed through a JavaScript pipeline that filters and formats each matching car into an HTML list item, which is then injected into the page’s message element. The visualization relies on plain JavaScript DOM manipulation and a React starter structure, without using any external charting or simulation libraries.

Oct 21, 2020