semiramiss2020

@semiramiss2020·2 public vizzes

Shapes and Colors with SVG and CSS

A simple SVG example demonstrates how shapes and colors can be styled using CSS. It shows circles, rectangles, a line, and a path, with fills and strokes applied both directly as SVG attributes and through a linked stylesheet. The code uses core SVG elements such as `circle`, `rect`, `line`, and `path`, along with grouping and transformation via the `g` element’s `transform` attribute. No JavaScript libraries are involved; rendering relies purely on inline SVG markup and CSS rules for visual customization.

Sep 30, 2020

Loading thumbnail…

Color and Size Legends

This example illustrates two distinct legend types for scatterplots using D3 v5 and SVG rendering. It combines a categorical color legend with an ordinal scale, showing fruit names mapped to distinct hues, and a quantitative size legend using a square-root scale for proportional circles. The size legend generates ticks from the scale and positions text offset by each circle’s radius. Both legends are built with reusable functions that append and update `g` elements, demonstrating a consistent pattern for interactive legend components.

Sep 30, 2020