Working with Time

Working with Time

This example visualizes a week of temperature readings in San Francisco as a scatter plot, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, and hovering reveals the exact timestamp. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, while custom `AxisBottom` and `AxisLeft` components render the ticks. The code loads data from a CSV file containing the "Data Canvas Sense Your City" dataset and formats the time axis using `timeFormat("%a")` for day abbreviations.

RRajat Dangat

Working With Time

This example shows a scatter plot of temperature readings over the course of a week, using a time-based x-axis and a linear y-axis for temperature. The data is loaded from a CSV file containing timestamps and temperatures for San Francisco, fetched via the `csv` function from `d3`. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates, with React components rendering the axes and circular marks. Each point includes a tooltip showing the corresponding day of the week, generated with `d3.timeFormat`.

Rrayking99

Working with time

This example visualizes temperature readings over a week in San Francisco, plotting each observation as a circle on a time-scaled x-axis and a linear temperature y-axis. React renders the SVG scene, while D3 v5’s `scaleTime`, `scaleLinear`, and `extent` handle scaling and domains; `timeFormat` labels days. The CSV data is loaded via `d3.csv`, and custom AxisBottom, AxisLeft, and Marks components generate ticks and circles with tooltips showing the day.

DDanier

Working with Time

This example visualizes temperature measurements in San Francisco over a week using a scatter plot. Each circle represents a temperature reading plotted against time on the x-axis and temperature on the y-axis, with a tooltip revealing the exact timestamp on hover. Built with React and D3 v5, the chart uses `scaleTime` and `scaleLinear` for axes, while `csv` loads the external dataset. The SVG rendering leverages custom components like `AxisBottom`, `AxisLeft`, and `Marks` to construct the visualization, styled with the Poppins font.

Nnpelliccia

Working with Time

This scatter plot visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. It uses React to render SVG elements and D3 v5’s `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to map data to coordinates and format weekday labels. The dataset is loaded via D3’s `csv` from a GitHub gist, and hovering over a circle reveals its timestamp through an SVG `<title>` tooltip.

Jjwlam83

Working with Time

This example displays a time series of temperature readings for a week in San Francisco, with each data point plotted as a circle. The chart uses a time-based x-axis and a linear y-axis for temperature. The visualization is built with React and D3 v6, leveraging D3's `scaleTime`, `scaleLinear`, and `timeFormat` APIs to handle axis scaling and tick labels. Data is loaded asynchronously via D3's `csv` function from a remote CSV file. The SVG rendering includes custom axes and interactive tooltips that show the date on hover.

Fforcox43

Working With Time

This interactive scatterplot visualizes San Francisco’s temperature readings over one week, with time on the x-axis and temperature on the y-axis. Using D3 v5 scales (`scaleTime` and `scaleLinear`) and React, the chart renders SVG circles for each data point via the `Marks` component, while `AxisBottom` and `AxisLeft` generate tick marks and labels. The data comes from a CSV file loaded asynchronously with `d3.csv`, and hovering over a circle shows its exact time via a native SVG `<title>` tooltip.

Aaakarsh satyam

Working with Time

This scatter plot visualizes weekly temperature readings in San Francisco, using time on the x-axis and temperature on the y-axis. The React-based visualization renders SVG circles, with axes built using D3’s `scaleTime` and `scaleLinear` APIs and tick generation via those scales’ `.ticks()` methods. Each circle includes a native SVG `<title>` tooltip showing the formatted timestamp. Data is loaded asynchronously from a CSV file using D3’s `csv` function and parsed with a custom row conversion, while `extent` and `.nice()` determine the scales’ domains.

Rroc286