Skip to main content
100%

VP First Visual With Water Droplets

✓ Published0🌍 Public
VVansh Patel
Last edited Mar 27, 2024
Created on Mar 15, 2024
Forked from VP First Visual

This animated scatter plot visualizes New York City water consumption and population data from the City of New York dataset, with each data point rendered as a water droplet shape using SVG path commands. The droplets drop into place sequentially via `transition().delay()`, scaling from zero to full size. A linear gradient fills each droplet with a water-like blue, while a background pattern displays a rain cloud image. Hovering a droplet reveals its year, consumption, population, and per-capita values through an HTML tooltip. The visualization uses D3 scales, axes, and custom SVG patterns to convey the relationship between consumption and population over time.

AI-generated description

A simple scatter plot with D3 showing the Water Consumption in the City of New York Dataset, modified so the points are water droplets.

MIT Licensed

Similar vizzes