Timeseries Plot

Working with Time

A scatter plot displays one week of San Francisco temperatures, with time on the x-axis and temperature on the y-axis. The visualization uses a React and SVG structure with d3.scaleTime and d3.scaleLinear for scales, d3.extent for domain calculation, and d3.timeFormat for tick labels showing abbreviated weekdays. Circles are rendered and colored with a teal fill, and hovering reveals the exact timestamp via a `<title>` tooltip. The data is loaded asynchronously from a CSV using d3.csv.

Rrstrauss127

Working with time

This visualization displays a week of temperature readings in San Francisco using a scatter plot. It shows the relationship between time on the x-axis and temperature on the y-axis, with a tooltip on each point that reveals the day of the week. Built with React and D3 v5, the code uses `scaleTime` and `scaleLinear` to map data, `AxisBottom` and `AxisLeft` for axes, and SVG circles for marks. Data comes from a CSV file loaded via D3's `csv` function.

Llaplantalaplanta

Working with Time

This example visualizes a week of temperature readings in San Francisco, plotting each measurement as a dot along a time-based x-axis and a temperature-based y-axis. The scatter plot uses D3’s `scaleTime` and `scaleLinear` to map data to SVG coordinates, while React components render the axes and circular marks. The data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and each circle includes a `<title>` tooltip formatted with D3’s `timeFormat` to show the specific day.

JJun Suzuki

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 one week in San Francisco. Time is plotted on the x-axis using d3.scaleTime, while temperature appears on the y-axis with d3.scaleLinear. The SVG rendering displays a blue path connecting data points, with individual circles that reveal the day of the week as a tooltip via a native `<title>` element. Data loading relies on d3.csv and React’s useEffect hook. Axes are built from custom React components using d3’s tick generation and timeFormat for weekday labels.

Ccoltonjcox92

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 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

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