racoo

@racoo·4 public vizzes

Let's make a face with D3.js

This example builds a cartoon face out of basic SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth—all centered within an SVG canvas using D3.js v5. The code imports `select` and `arc` from the D3 library to append elements and compute the mouth’s path. A chained `transition().duration(2000)` sequence animates the eyebrows up and down, creating a winking expression. The layout uses fixed numeric constants for spacing and offsets, with no external data source.

May 19, 2020

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates how SVGs can be styled using CSS classes and inline attributes within a React framework. The visualization renders circles, rectangles, lines, and paths, employing D3 v5 for the SVG structure while leveraging CSS to define stroke properties and line joins. The `lines` class applies black strokes with a width of 10, while the path element inherits a teal stroke and rounded line joins, showcasing the interplay between SVG geometry and CSS styling.

May 19, 2020

Loading thumbnail…

Customizing Axes

This example shows a bar chart of country populations, with a custom linear gradient applied to the bars. The gradient transitions horizontally across the plot area, with the color shift defined by offset stops on the `linearGradient` element. Built with D3 v5, the SVG visualization uses `svg.append("defs")` to define the gradient and binds it to the bars. Data is loaded from a CSV file, listing the ten most populous countries, with population values in thousands. The chart emphasizes the ease of customizing visual elements through D3’s SVG composition.

May 19, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on the page using a bare minimum HTML file. The page’s CSS sets the body to align the text center and uses a large 13em font size. The associated JavaScript file defines a linear gradient through D3’s `svg.append("defs")` and `linearGradient` API, preparing for potential SVG styling. The code demonstrates a minimal setup for mixing static HTML and SVG-based graphical definitions.

May 18, 2020