Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Working with Time

Public visualization

Viewing a saved revision (read-only)

6198fc0733f4405eb1cc7f1399d632fa

Working with Time

0 stars1🌍 Public
AAlex Gomes
Last edited Mar 1, 2022
Created on Mar 1, 2022

This example visualizes weekly temperature variations in San Francisco using a smooth, natural curve with circular data points. The SVG chart displays temperature on the y-axis and time on the x-axis, with tick marks formatted to show abbreviated weekday names. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `extent`, and `line().curve(curveNatural)` to construct the visualization. Data is loaded asynchronously from a remote CSV file via `d3.csv`, while React state manages the loading process.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React state to keep track of the data.