Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Shapes with SVG and CSS

Public visualization

Shapes with SVG and CSS

0 stars1🌍 Public
YYasara Peiris
Last edited Jul 18, 2020
Created on Jul 18, 2020

This example combines a D3 bar chart with an animated SVG smiley face. The bar chart displays population data for ten countries from a CSV file, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. The smiley face, built with `circle`, `rect`, and `path` elements, uses an `arc` generator for its mouth and a `transition` to animate the eyebrows up and down. Both visualizations are rendered dynamically within an SVG canvas, with the chart styled via CSS.

AI-generated description

A bare minimum HTML page.

See also React Starter.

Comments

Sign in to join the discussion.

MIT Licensed