Working with time

100%

Working with time

✓ Published1🌍 Public

Last edited Sep 18, 2021

Created on Sep 18, 2021

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.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

96% match

Loading thumbnail…

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

95% match

Loading thumbnail…

Working with time

This example visualizes San Francisco temperature readings over one week, plotting temperature against time as a smooth curve with individual data points marked by circles. It uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear mapping the temporal and temperature domains. The d3.line generator with curveNatural creates the interpolated path, while custom AxisBottom and AxisLeft components draw the ticks. Data is loaded as CSV via d3.csv and parsed into JavaScript Date objects, with tooltips formatted using timeFormat.

MMosheAron

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

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

94% match

Loading thumbnail…

Working with Time

This example visualizes a week of temperature readings in San Francisco as a smooth line chart, with circular marks highlighting each data point and tooltips revealing the exact timestamp. It uses React to manage component state and render the SVG, while D3 v5 utilities handle data loading, scales, and shape generation. The data is fetched from a CSV file using `d3.csv`, then mapped through `scaleTime` and `scaleLinear` to position points along the time and temperature axes. Curves are drawn with `d3.line` and the `curveNatural` interpolation, and custom React components encapsulate the axes and marks.

JJanet Li

94% match

Loading thumbnail…

Working with time

This example visualizes temperature readings over time from a dataset of weekly San Francisco weather. The SVG chart plots each data point as a circle, with a time-scaled x-axis and a linear y-axis for temperature. Built with React and D3 v5, the code uses `scaleTime`, `scaleLinear`, and `extent` to map data to coordinates, while the custom `AxisBottom`, `AxisLeft`, and `Marks` components render the axes and circles. Tooltips display the day of each timestamp using `timeFormat`.

SSamirAhma

94% match

Loading thumbnail…

Working with Time

This visualization displays temperature readings from San Francisco over one week, plotted as circles on a time-based x-axis and linear temperature y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the dataset, with SVG circles rendered through reusable axis and mark components. Time formatting via `timeFormat('%a')` labels the weekday ticks, while tooltips show the exact timestamp for each data point. The chart loads CSV data using `d3.csv`, with margins and labeled axes for clear temporal and temperature context.

SSam

94% match