ffrabal

@ffrabal·4 public vizzes

Making a bar chart!

A horizontal bar chart displays the population of ten countries, with bar lengths corresponding to population values from a CSV file. The chart uses D3 v5's `d3.scaleLinear` to map population data to pixel widths, `d3.csv` to load the data, and `d3.select` to append SVG rectangles. Bars are fixed at 300 pixels tall, with lengths scaled proportionally to the maximum population in the dataset.

Mar 25, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow circular face with black eyes, eyebrows, and a mouth is drawn using D3.js v5. The code builds SVG elements directly, positioning a central circle, two eye circles, and eyebrow rectangles with a path for the mouth created via `d3.arc`. The eyebrows animate using chained `transition` calls over two seconds each, moving downward and returning upward. All geometry relies on computed spacing and offset constants, with the SVG centered via a `transform` attribute.

Mar 25, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using inline attributes and CSS classes. It shows shapes painted with default colors, explicit fills like red and green, and a group inheriting shared fill and stroke properties. A CSS class applies thick black strokes to lines and a purple stroke with rounded joins to paths. The code uses plain SVG elements with `transform` for scaling and translation, plus CSS from `styles.css` for styling.

Mar 25, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML page titled “HTML Cars Report” with a static list of car manufacturers, highlighting “Ford” in blue. It uses plain HTML and CSS to structure and style content, with no interactive visualizations or data bindings. The page relies on a linked stylesheet containing a `font-size` and `font-family` rule for the body, and a `.highlighted` class for emphasis. The code does not use any JavaScript libraries, frameworks, or data APIs—it is purely static markup and styling.

Mar 25, 2020