Fork of Working with Time

100%

Fork of Working with Time

✓ Published1🌍 Public

Last edited Aug 31, 2023

Created on Aug 31, 2023

A scatter plot displays temperature readings over the course of a week, with each point representing a measurement. The visualization uses a time-scaled x-axis and linear y-axis, with weekday labels on the x-axis. Built with React and D3 v5, the code loads CSV data from the Data Canvas Sense Your City dataset, uses `scaleTime` and `scaleLinear` for axes, and renders SVG circles that include tooltips showing the time of each reading.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

RRoberto

100% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting temperature over time using React and D3 v5. It renders SVG circles positioned by `d3.scaleTime` and `d3.scaleLinear`, with axis components generated through the D3 `ticks()` method. The chart includes a `<title>` tooltip showing abbreviated weekday labels via `timeFormat`, and loading states display a "Loading..." message while `d3.csv` fetches the data.

AAbin

95% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, showing the fluctuation of weekly temperatures. The visualization uses React with D3 v5 scales, including `scaleTime` and `scaleLinear`, to map data points as circles on an SVG canvas. Axes are rendered via custom React components, with `timeFormat` for date labels and a native SVG `<title>` element for hover tooltips. Data is loaded asynchronously using D3's `csv` method and processed through useState and useEffect hooks.

Aalitemel89

94% match

Loading thumbnail…

Fork of Working with Time

This example visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a scatter plot, with time on the x-axis and temperature on the y-axis. The plot is rendered as SVG, with each data point drawn as a circle using React components that generate `circle` elements. The code leverages `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.timeFormat` for tick labels, and `d3.csv` to load the data from a remote URL. A `d3.zoom` call is included, though its behavior is not fully implemented in the displayed code.

MMetalquill

94% match

Loading thumbnail…

Fork of Working with Time

A fork of Curran Kelleher's "Working with Time" example, this scatter plot visualizes temperature readings over one week from the Data Canvas Sense Your City Dataset. The React application uses D3 v5 scales (`scaleTime` and `scaleLinear`) and React components for axes and marks, rendering SVG circles with a `title` element for tooltips. The data is loaded asynchronously via `csv()` from a GitHub gist, with time formatted using `timeFormat('%a')` for weekday labels on the bottom axis.

GGregS1290

94% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset. The chart uses a time-scaled x-axis showing weekday labels and a linear y-axis for temperature, with each data point rendered as a circle. Built with React and D3 v5, the code employs `scaleTime`, `scaleLinear`, and `extent` to map data, while custom `AxisBottom` and `AxisLeft` components generate SVG ticks and labels. Circles include a `<title>` tooltip displaying the formatted timestamp.

GGeekboxer

94% match

Loading thumbnail…

Fork of Working with Time

A scatter plot visualizes temperature readings over time for one week in San Francisco, using data from the Data Canvas Sense Your City dataset. React components render SVG circles positioned with d3.scaleTime and d3.scaleLinear, while d3.timeFormat formats weekday tick labels. The visualization uses React hooks to load and parse CSV data asynchronously, with native SVG `<title>` elements providing hover tooltips.

RReymond Mesuga

94% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time using the Data Canvas Sense Your City dataset. The visualization encodes timestamps on the x-axis and temperature values on the y-axis, with each circle representing a data point. Tooltips reveal the day of the week for each point. Built with React and D3 v5, the code uses d3.scaleTime and d3.scaleLinear for scaling, d3.extent for domain calculations, and d3.csv for data loading. SVG circles render the marks, with custom AxisBottom and AxisLeft components generating the tick marks and labels.

TTyler Brown

94% match