Fork of Working with Time

100%

Fork of Working with Time

✓ Published1🌍 Public

Last edited Mar 5, 2023

Created on Mar 5, 2023

This example shows a time-series line chart of San Francisco weekly temperatures, with daily points plotted along a smooth curve and native SVG tooltips on hover. The code loads CSV data, parses timestamps and numeric values with `useEffect`, and renders axes and marks using React components. D3’s `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` handle scaling and path generation, while `timeFormat` formats tick labels. React state manages the fetched data, and SVG elements are produced from JSX in the `AxisBottom`, `AxisLeft`, and `Marks` components.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This example visualizes weekly temperature data from San Francisco as a smooth line chart over time, using a natural curve to connect hourly readings. The visualization relies on React for component-based rendering and D3 utilities like `scaleTime`, `scaleLinear`, `extent`, and `line` with `curveNatural` to map timestamps and temperatures. Axes are custom-built with `AxisBottom` and `AxisLeft` components, while data loading uses D3’s `csv` parser to fetch and format the remote dataset. All graphics render as SVG elements within a React application, with styling applied via CSS classes.

Ddoaa-shehab

93% match

Loading thumbnail…

Fork of Working with time

This interactive line chart visualizes temperature variations over time, using D3’s `scaleTime` and `scaleLinear` to map the data from the San Francisco week temperature CSV onto an SVG canvas. A natural curve connects the points, with circles marking each hourly reading, providing a clear temporal trend. Axis components—custom React modules `AxisBottom` and `AxisLeft`—render labeled ticks, while the `Marks` component employs D3’s `line` and `curveNatural` for the smooth path. Built with React and D3 v6, the chart uses the `csv` function to load data and SVG for rendering.

RRMartins11

93% match

Loading thumbnail…

Fork of Working with time

This example visualizes the weekly temperature variation in San Francisco as a smooth line chart, with time on the x-axis and temperature on the y-axis. The React-based application loads CSV data from a GitHub gist (United Nations World Population Prospects 2019) using d3.csv in a custom useData hook. d3.scaleTime and d3.scaleLinear map the data to SVG coordinates, while d3.line with curveNatural draws the path. Custom AxisBottom and AxisLeft components render the ticks and labels, and the chart includes axis titles for both dimensions.

DDanier

92% match

Loading thumbnail…

Fork of Working with Time

This example visualizes the relationship between time and temperature for a week in San Francisco, plotting each observation as a circle along a time axis. The x-axis displays the day of the week, while the y-axis shows the temperature value. The chart is rendered as an SVG using React, with axes and data marks constructed from custom components. The implementation leverages d3’s `scaleTime`, `scaleLinear`, and `extent` functions for scaling and domain calculation, while data is loaded asynchronously from a CSV file using d3’s `csv` helper. Each circle includes a tooltip formatted with `timeFormat`.

YYedrup

92% match

Loading thumbnail…

Fork of Working with Time in LIne Chart

This line chart visualizes temperature readings over a week for San Francisco, using a smooth natural curve to connect daily data points. The chart displays time on the x-axis and temperature on the y-axis, with hover tooltips showing the day of the week for each point. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveNatural` for the path, and renders as SVG. Data comes from a CSV file loaded via `d3.csv`, with axis labels and tick marks styled through CSS.

AAdriana Rodriguez Sanabria

92% match

Loading thumbnail…

Fork of Working with Time

This fork of the Working with Time example displays a San Francisco temperature time series as a smooth curved line chart in SVG. The visualization uses React components for axes and marks, with D3 scales (scaleTime, scaleLinear) and the curveNatural line generator to render the data path. The data comes from the Data Canvas Sense Your City Dataset’s weekly temperature measurements, loaded via d3.csv.

EEugenio2192

92% match

Loading thumbnail…

Fork of Fork of Working with Time

This visualization displays temperature readings over a week in San Francisco, using a smooth curved line to show the trend across time. The chart loads CSV data via D3's `csv` utility, parses timestamps with `new Date`, and uses React hooks to manage the asynchronous data fetching. D3 scales (`scaleTime`, `scaleLinear`) map the data to SVG coordinates, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and the line path using `d3.line` with `curveNatural` interpolation.

Ddoaa-shehab

91% match

Loading thumbnail…

Fork of Working with Time

A scatter plot shows temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses React with D3 v5, employing `scaleTime`, `scaleLinear`, `extent`, and `csv` to load and parse the Data Canvas Sense Your City dataset. SVG marks are rendered as circles with embedded tooltips, while `AxisBottom` and `AxisLeft` components generate tick marks. A natural curve connects the points, and the chart is styled with Poppins font and custom axis labels.

EEdgar Alves

91% match