Tiffani Gamboa

@tiffanigamboa·5 public vizzes

Let's make a face with D3.js!

A yellow circle with black outline forms a face, featuring two black eyes and a curved arc mouth. Built with D3.js v5, the example uses `d3.select` to manipulate SVG elements directly, setting position and size attributes for the head and eyes. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular ranges, all centered on the SVG canvas.

Oct 13, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS. It shows a static composition where the first circle and rectangle inherit default fills, a translated group applies shared fill and blue stroke attributes, and the `.lines` class sets black stroke width for lines while paths override the stroke to red with round line joins. The code uses the SVG API directly within an HTML document, with CSS rules in a separate stylesheet controlling presentation. No external libraries are involved.

Oct 13, 2019

Loading thumbnail…

Cars Report

This example displays a simple car report with a heading listing Ford and Honda. The page presents two car brands in an unordered list, visually distinguishing Ford by applying the CSS class `highlighted` to turn its text red. The document uses plain HTML markup with a linked `styles.css` stylesheet that sets a large monospace font for the body and defines the red color for highlighted items. The report does not show any data files or visualization libraries; it is purely static HTML and CSS.

Oct 13, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple, text-based report of three used cars and their prices. The report is presented as an HTML list, with the first vehicle, a 2012 Nissan Leaf, visually emphasized in red and labeled as "highlighted." The presentation relies on basic HTML markup and a linked CSS stylesheet, which sets the font size and family, and applies the red color to the highlighted class. No JavaScript, charting, or data visualization libraries are used; the visualization is purely a styled text report.

Oct 13, 2019

Loading thumbnail…

Cars Report

This example displays a list of five used cars with their make, model, year, and price, rendered as plain text in a `<pre>` element against a dark blue background. It imports a JSON array from the `cars.js` module, parses it via `JSON.parse`, and writes the resulting object to the page using `document.getElementById` and `textContent`. The styling uses an Ubuntu font from Google Fonts and a large 12em font size for dramatic visual impact.

Oct 13, 2019