imoutidi

@imoutidi·7 public vizzes

Let's make a face with D3.js!

This example charts the ten most populous countries using a horizontal bar chart, with population values read from a CSV file. The visualization transforms D3.js’s fundamental DOM manipulation capabilities into an interactive tutorial, as demonstrated by a smiley face with moving eyebrows. The code explicitly uses `d3.csv` to load data, `scaleLinear` and `scaleBand` for positioning, and `axisLeft` and `axisBottom` for axes. D3’s selection and data-binding methods (`selectAll`, `enter`, `append`) populate the SVG’s `rect` elements, while a tick formatter using `format('.3s')` shortens large numbers in the display.

Sep 25, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example shows a bar chart of country populations using D3.js v5, with each bar representing a country from a CSV file. The visualization renders an SVG with scaled linear and band axes, displaying population data for ten countries. The code imports specific D3 modules like `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the chart. While the title references a smiley face, the actual implementation focuses on fundamental DOM manipulation through data binding and rectangle elements styled with steelblue fill.

Sep 25, 2019

Loading thumbnail…

Face D3.js

A yellow circle with black eyes and a curved mouth forms a simple animated face in an SVG canvas. The right eye moves vertically in a looping transition, shifting down and back up over a two-second duration. The code builds the face using D3 selections and the `arc` generator for the mouth, setting attributes like `cx`, `cy`, and `fill` directly on SVG circles. All rendering occurs in-browser with D3 v5, animating through chained `transition().duration()` calls.

Sep 25, 2019

Loading thumbnail…

Face D3.js

This example renders a simple face using SVG circles. A large yellow circle forms the head, with a smaller black circle serving as the left eye, positioned at the center of the canvas. The code uses D3.js version 5's selection and append methods to create and style the shapes, reading the SVG’s width and height attributes to center elements. The styling is supplemented by an external CSS file that defines stroke and color properties for the shapes.

Sep 25, 2019

Loading thumbnail…

Face D3.js

An SVG circle with a thick teal outline stands centered on a dark background, drawn using D3.js v5. The code selects the `<svg>` element, appends a single `<circle>`, and sets its radius and center coordinates based on the SVG’s width and height attributes. Styling comes from CSS classes, with stroke color and line join defined in the `.lines` and `.lines path` rules. D3’s `select` method and attribute manipulation handle the rendering, producing a minimal, static geometric composition.

Sep 25, 2019

Loading thumbnail…

Shapes SVG-CSS

This gallery example demonstrates basic SVG shape rendering inside an HTML page. It displays circles, rectangles, lines, and a path, with some shapes inheriting presentation attributes from parent groups, such as a yellow fill and black stroke. The visualization uses raw SVG elements directly in the markup, with styling supplemented through a CSS file that defines a shared stroke style for line elements. Rendering is achieved through SVG’s native vector graphics, relying on no JavaScript or external charting library.

Sep 25, 2019

Loading thumbnail…

Shapes SVG-CSS

The example demonstrates static geometric shapes composed of circles, rectangles, lines, and paths, arranged in a flat, abstract composition. A red circle and a yellow group with black outlines highlight styling variations, while the `.lines` class applies thick black strokes to line elements and a distinct teal color with rounded joins to the path. The visualization relies on embedded SVG markup and CSS rules for appearance, with no interactive or dynamic behavior.

Sep 25, 2019