duckmammal

@duckmammal·4 public vizzes

Make a face with D3.js!

This example demonstrates how to draw a cartoon face using D3.js with SVG shapes and animation. The face consists of a yellow circle, two black eyes, rotated rectangular eyebrows, and a curved smile path. The code uses D3’s `select`, `arc`, and `transition` APIs to position and animate the eyebrows over time. All shapes are rendered in SVG, and the face is centered using a translation transform.

Nov 23, 2020

Loading thumbnail…

Let's Make a Bar Chart

A horizontal bar chart displays population counts for ten countries, using bars to represent values from China down to Mexico. The chart is built with D3 v6, using `scaleLinear` for the x-axis population scale and `scaleBand` for the categorical y-axis of country names. Data is loaded from a CSV file, with population values multiplied by 1000, and rendered as SVG rectangles inside a chart area with margins.

Nov 20, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined in a minimal HTML page. A circle and rectangle are drawn with default black fills, while a second group of the same shapes uses inline SVG attributes to apply purple fills and thick black strokes. List items are styled with CSS classes, demonstrating color and background changes. The page also includes a JavaScript console log statement. The code uses raw SVG elements, CSS rules in an external stylesheet, and vanilla JavaScript, with no additional libraries or frameworks.

Nov 20, 2020

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a static “Cars Report” list with styled text. It demonstrates how CSS and JavaScript integrate with plain HTML, using a `<link>` tag for stylesheets and an inline `<script>` for console logging. The CSS applies a red background and blue text to a highlighted list item, while JavaScript is limited to a `console.log` call. No external libraries or data sources are used; the content is hardcoded in the markup.

Nov 20, 2020