Temperature scatterplot chart

100%

Temperature scatterplot chart

✓ Published2🌍 Public

Last edited Mar 11, 2021

Created on Mar 11, 2021

A temperature scatterplot shows hourly temperature readings over one week, with time on the x-axis and degrees on the y-axis. Each data point is an SVG circle colored teal, with a native `<title>` tooltip displaying the exact temperature value. The chart uses React components for the axes and marks, while D3 v6 APIs (`scaleTime`, `scaleLinear`, `extent`, `csv`) handle data loading, scaling, and tick generation. The dataset comes from the Sense Your City weather CSV, and labels are formatted with `timeFormat`.

AI-generated description

Stylized scatterplot chart demonstrating how to work with time. Data: Data canvas sense your city dataset

MIT Licensed

Similar vizzes

Loading thumbnail…

Temperature Scatter Plot

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, with each point representing a single observation. The chart uses React with D3 v7, employing `scaleTime` and `scaleLinear` to map timestamps and temperature values to SVG coordinates. The `Marks` component renders circles with tooltips showing the day of the week, while `AxisBottom` and `AxisLeft` generate labeled tick marks. The visualization loads CSV data asynchronously via the `useData` hook and D3's `csv` function, with axes labeled "Time" and "temperature".

OOleg Zhernovoy

89% match

Loading thumbnail…

Scatter Plot for timestamp

This scatter plot visualizes temperature readings over a week from the Sense Your City dataset, with time on the x-axis and temperature on the y-axis. Each point represents a timestamped measurement, and hovering reveals the exact time via a native SVG `<title>` tooltip. The React-based implementation uses D3 v5 scales (`scaleTime`, `scaleLinear`) and `extent` to map data to coordinates, while custom axis components render tick marks and labels. The SVG circles are generated by a Marks component, and data loading relies on D3’s `csv` parser fetching from a GitHub gist.

SSushan Prajapati

89% match

Loading thumbnail…

Scatter plot, temperature over time.

A scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization uses React with D3 v5’s `scaleTime` and `scaleLinear` to map data points, rendered as SVG circles. Each circle includes a tooltip showing the day of the week. Data is loaded asynchronously from a CSV file via the `csv` function.

Aazharahmad0

88% match

Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Yyastika

87% match

Loading thumbnail…

working with time

A scatter plot displays daily temperature readings from the Sense Your City dataset, plotting time on the x-axis and temperature on the y-axis. Each circle’s position encodes a timestamp and temperature value, with a native SVG title element providing a tooltip showing the abbreviated weekday. The visualization uses React components for the axes and marks, with d3.scaleTime, d3.scaleLinear, and d3.extent handling the scaling and domain calculations. Data is loaded asynchronously via d3.csv and parsed into JavaScript Date objects and numeric temperatures.

Rrsulli4

87% match

Loading thumbnail…

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The chart uses React components for rendering and D3 scales—specifically `scaleTime` and `scaleLinear`—to map the timestamp and temperature values from the Data Canvas Sense Your City dataset. Each data point is drawn as an SVG circle with a tooltip showing the formatted day. The visualization incorporates custom axis components that generate ticks and grid lines.

DDean Bozic

87% match

Loading thumbnail…

Temp over time

This example visualizes temperature readings over time as a scatterplot, with each data point marked by a green circle. The chart plots timestamps on the x-axis and temperature in Celsius on the y-axis, using D3's `scaleTime` and `scaleLinear` to map the data domain to pixel coordinates. React renders the SVG, with custom components for axes and tick marks, while D3's `csv` utility loads the data from a remote SF weekly temperature file. The x-axis labels are formatted as abbreviated weekday names via `timeFormat`.

JJulia Hack

86% match

Loading thumbnail…

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the data, with `extent` and `max` computing the domains. The visualization renders as an SVG, with custom axis components and circular marks that include tooltips via SVG `<title>` elements. Data comes from the Data Canvas Sense Your City dataset, loaded as CSV through `d3.csv`.

Jjerate11

86% match