Skip to main content
SimilarExport ZIP
100%

Scatter Plot with time

✓ Published2🌍 Public
Aadewole-top
Last edited Jul 30, 2021
Created on Jul 27, 2021

A scatter plot displays temperature readings over time, using a smooth curve to connect the data points. The x-axis uses a time scale with week-day labels, while the y-axis uses a linear scale for temperature values. Built with React and D3 v5, the visualization reads CSV data from an external URL, renders axes and marks as SVG elements, and uses the `line` and `curveNatural` functions to create the connected path.

AI-generated description

Dataset about temperature of a city and time from Curran

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

Scatter Plot with Time

This scatter plot visualizes temperature readings over time, with each circle representing a measurement plotted along a time-based x-axis and a linear temperature y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data from a CSV file into SVG circles. The chart includes labeled axes with formatted weekday tick marks on the x-axis, and hovering over a circle reveals the exact time through SVG `<title>` tooltips.

MMarco Malvicini
91% match
Loading thumbnail…

scatter -> line plot

This example shows how a scatter plot of temperature over time transforms into a line plot by connecting the data points with a smooth path. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear for scaling, and d3.line with curveNatural for the connecting curve. Data comes from a CSV file of weekly San Francisco temperatures, loaded via d3.csv. Hovering over each circle reveals a tooltip showing the day of the week.

XXingming Xu
89% match
Loading thumbnail…

Scatter Plot with Time Series

A scatter plot displays temperature readings against timestamps from a San Francisco weekly weather dataset, using circular marks positioned by time and linear temperature scales. Built with React and D3 v6, the visualization renders as SVG with reusable axis components and tooltips showing formatted day labels. Data loads via CSV from a remote gist, with `scaleTime` and `scaleLinear` handling the mapping, while `d3.timeFormat` formats tick labels.

AAndres de la Garza
88% match
Loading thumbnail…

Working with Time

A scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLinear` to map data domains to pixel coordinates. The `Marks` component renders circles for each data point, while the `AxisBottom` and `AxisLeft` components draw the axes. Data is loaded from a CSV file via D3's `csv` method, with timestamps parsed as `Date` objects and temperatures converted to numbers.

CCodeDuckie99
87% 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

This scatterplot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Each orange circle represents a data point, and hovering reveals its exact timestamp and temperature. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` to map the data. SVG elements render the axes, tick marks, and labels, while the data is loaded from a CSV file and parsed with `csvParse`.

EEhtisham UL Hassan
87% match
Loading thumbnail…

time

A time-series scatterplot displays temperature readings over the course of a week, with each point representing a timed measurement. The visualization uses a time-scaled x-axis and linear y-axis with labeled ticks to orient the viewer. Data comes from the San Francisco weekly temperature CSV, loaded asynchronously via `d3.csv` in a custom React hook. React components render SVG circles and axes using `d3.scaleTime` and `d3.scaleLinear`, with axis tick generation handled by reusable `AxisBottom` and `AxisLeft` components.

Jjth500
87% match